►
From YouTube: Expo and JAMStack - Jozi.js November
Description
Creating Cross-platform Mobile Apps with Expo (RN)
Sebastião Bruno Kiafuka Fernando (@bruno_kiafuka)
In this talk, I’d like to present Expo CLI, which is a tool that allows developers to create cross-platform apps using expo.
Why expo?
Expo reduces the barrier to entry for new RN Devs and also helps users to quickly prototype their apps to users without having to submit this apps to the store.
I’d also be demoing a small app using expo, presenting also expo web.
How I Leveraged the JAMstack for Progressive Enhancement
Ire Aderinokun (@ireaderinokun)
Services like Puppeteer give us the power of headless browsers, which give us to power to do things like dynamically capture screenshots of web pages. This can be incredibly useful for creating static image fallbacks of content that would otherwise only be accessible with Javascript enabled.
In this talk, I’ll show how I used Puppeteer and Cloudinary to create what I call “live images” of the dynamic embed of CanIUse compatibility tables I created. Together we’ll create a tiny microservice that leverages these technologies and we’ll see how it all fits together to create the final product.
❓Q&A: slido.com - #32872
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/273089884/
A
A
A
There
is
still
not
quite
any
definite
word
yet
on
when
we
can
meet
up
in
person,
share
some
pizza
and
have
one
or
two
drinks.
While
we,
while
we
enjoy
these
talks,
but
hopefully
you've
taken
the
time
to
order
some
pizza
for
yourself
you're
sitting
at
home
and
having
a
a
good
time
together
with
your
loved
ones
and
enjoying
this.
This
beautiful
weather,
we're
having
here
in
joburg,
please
be
in
bear
in
mind.
We
do
have
a
code
of
conduct,
be
nice,
be
respectful
and
constructive.
A
Let's
work
together
and
don't
be
spammy
if
you
have
any
particular
problems
with
any
of
our
any
of
the
other
members
within
in
josie
js
feel
free
to
contact
one
of
our
organizers,
our
wizards.
If
you
have
a
problem
with
any
of
our
wizards,
please
feel
free
to
contact
mike
or
jerry
speaking
of
our
wizards.
Here
they
are,
you
know,
we've
got
wizard
hats.
A
A
Innocence
who's
been
helpful
with
our
has
been
sponsoring
our
zoom
subscription
and
microsoft
for
our
meetup.com
subscription.
We
are
always
looking
for
talks.
You
might
not
think
that
you
have
the
most
amazing
skills,
but
I
promise
you
now.
You
know
something
that
somebody
else
doesn't
know
as
as
bill
nye
says.
So
you
know
if
you
have
worked
with
something
very
recently
and
you're
super
excited
about
it
or
you
struggled
with
it
and
you
feel,
like
other
people
could
benefit.
Please,
please
please
submit
a
talk.
We
will
help
you
get
it
up
to
scratch.
A
If
you
feel
that
it's
not
great
or
you're,
not
sure
how
to
put
it
together,
you
know
we'll
sit
through
dry
runs.
We
would
love
to
have
you
speak
at
one
of
our
events.
If
you
are
watching
this,
you
are
almost
guaranteed
to
be
on
youtube,
so
you
can
click
the
playlist
button
which
is
somewhere
over
there,
and
you
can
see
our
previous
talks.
Alternatively,
if
you're
watching
this
as
a
recording,
feel
free
to
use
the
qr
code
and
that'll,
take
you
straight
through
to
our
youtube
channel.
A
As
you
might
be
familiar
for
questions,
we
are
going
to
be
using
slido.
We
won't
be
monitoring
the
youtube
comments
for
questions.
So
please,
please,
if
you
have
a
question,
submit
it
there
and
you
can
also
vote
for
the
most.
The
questions
that
you'd
like
to
see
on
ask
the
most,
as
this
is
our
last
jersey,
js
psi
of
2020
and
people
might
be
doing
road,
trips
or
traveling.
A
I
know
this
december
is
a
little
bit
stranger
than
el
than
normal.
Please
be
safe.
Take
it
easy!
It's
more
about
the
journey
than
the
destination
and
stay
safe
awesome,
so
our
first
speaker
is
going
to
be
talking
to
us
about
creating
cross-platform
mobile
apps
with
expo,
which
is
part
of
react
native.
So,
as
somebody
who
uses
react
native
myself,
I'm
super
excited
to
see
this
and
over
to
you
thanks
bruno
and
I
just.
B
B
B
All
right,
so
my
name
is
bruno
as
mentioned
today,
I'll
be
speaking
about
creating
a
cross-platform
application
using
expo,
as
ryan
mentioned
expo
is
one
of
the
tools
sets
that
allows
us
to
create
application
using
react
native.
So
before
I
dive
into
expo
I'll.
Describe
you
guys
a
little
bit
my
journey
with
react
native.
B
So
then
I
fall
in
love
with
expo,
and
then
I
consider
expo
now
as
being
like
one
of
the
easiest
ways
to
create
or
get
started
with
react
native
so
today
I'll
be
basically
speaking
on.
What
is
our
expo?
Why?
I
think
people
should
use
expo
and
some
tools
that
expo
has-
and
I
will
run
through
a
quick
demo
that
are
already
set
up
because
of
the
time.
B
Basically,
you
have
like
a
as
a
normal
react
native
application.
You
have
one
single
code
base
being
typescript
of
javascript
and
then
your
application
will
be
deployed
to
the
various
platform
being
android,
ios
or
web
now
so
brent,
which
is
one
of
the
main
contributors
on
expo.
He
defines
expo
as
being
the
rails
of
react
nato.
B
So
why
is
that?
So
many
people
complain
about
the
the
amount
of
configurations
you
need
to
do
react
nature
to
get
started
with
your
project,
especially
if
you,
if
it's
your
first,
if
it's
your
first
time
using
react
native
what
expo
basically
does
it
reduces
that
friction
of
somebody
getting
started
with
with
with
the
project?
So,
basically,
with
running
simple
commands,
you
have
your
application
all
set
up.
You
can
demo
to
your
clients.
B
If
you
are
freelancing,
you
can
basically
get
everything
off
the
ground
in
one
single
go
and
there's
a
lot
of
friction
or
configuration
reduced.
So
those
are
like
the
main
points.
I
hope
I'm
not
speaking
too
fast.
These
are
the
main
points
of
of
why
I
think
people
should
use
expo
so
expo,
for
me
is
one
of
the
easiest
and
fastest
ways
to
build
and
demo
your
mobile
applications.
B
So
a
lot
of
platforms.
We
have
the
to
build
more
cross-platform
apps.
They
are
good.
I
I
can't
take
it
from
them,
but
with
expo
you
you,
you
can
have
the
first
interaction
like
with
your
app
as
you
build
it,
and
then
you
can
run
it
straight
on
your
devices
and
and
then
your
customers
can
also
test
it,
as
you
go
expo
also
has
like
a
set
of
libraries
or
apis
that
are
already
written,
and
this
this
apis
basically
allow
us
to
to
speed
up
our
development
process.
B
Our
development
experience,
because
you
no
longer
need
to
think
how
do
I
read
files
from
from
the
library
expo
has
that
how
do
I
do
google,
google
signing
facebook
signing?
How
do
I
do?
What's
this,
how
do
I
it
interact
with
some
hardware
parts
of
the
device
expo
hazard?
Yes,
they
have
some
limitation
on
some
of
the
apis,
but
the
community
is
large
and
we
like
they
are
trying
their
best
to
make
as
much
apis
available
as
possible.
B
The
other
point
is
like
expo.
I
help
you
to
have
your
app
deployed
into
app
stores
very
quickly,
so
they
they
have
something
they
call
the
managed
workflow.
So
when
you're
using
the
manage
workflow,
basically,
you
don't
have
to
to
to
set
up
a
lot
of
the
keys
yourself.
You
just
need
to
basically
tell
expo
basically
answering
some
questions.
B
If
you
want
to
do
like
quick
updates,
they
created
this
thing
called
over
there
updates,
which
basically
allows
us
to
download
our
app
bundle
because
expo
and
react
native
is
javascript
with
the
right
configurations.
Of
course,
you
can
make
a
change
on
your
on
your
application
and
you
don't
need
to
pass
through
the
store
review
process.
For
example,
let's
say
you
misspelled
something
on
your
application
with
a
single
command.
B
B
B
B
And
then
give
the
name
of
our
project
expo
will
basically
prompt
us
with
some
options.
The
manage
workflow
is
where
you
basically
allow
export
to
have
all
configuration
set
for
you.
So
you
have
like
a
tab
template.
We
have
a
blank
template
to
type
script.
You
have
a
blank
template
with
with
normal
javascript
and
then
the
bare
workflow
is
when
you
just
want
to
use
something.
B
They
call
expo
uni
modules,
which
are
this,
which
is
a
part
of
the
sdk,
but
you
don't
want
export
to
handle
the
whole
project
for
you,
so
you
use
the
bear
workflow
so
that
you
don't
have
to
to
deal
with
some
of
the
limitations
that
expo
has
so
I
won't
run
it
now.
I
have
a
project
here
already
set.
So
if
I
run
expo
start
right,
I
won't
go
through
the
code
because
it's
a,
I
believe,
it's
just
a
normal
react
native
project
and
for
those
who
use
react
native,
bear
react.
B
Native
you'll
notice
that
you
don't
have
like
the
metro
bundle
configuration
in
the
so
xv
already
deals
with
it
for
you,
so
you
don't
have
to
think
about
it.
So
now
that
I'm
running
my
terminal,
I
started
the
project.
If
you
are
using
an
android
device
or
ios
device,
you
can
scan
this
qr
code
and
you
can
basically
have
the
app
running
on
your
device.
B
So
I
have
this
is
my
my
phone
right
and
then
I'll
start
my
simulator
I'll
start.
I
won't
start
my
android
studio
because
my
computer
will
get
slow,
so
this
installs
expo
application
on
your
simulator
and
then
you
have
the
app
starting
sorry
this.
This
is
like
from
the
other
project,
so
this
is
running.
If
I
press
here
it's
also
starting
my
on
my
phone.
So
basically
I
can
test
the
app
have
out
see
how
it
will
basically
behave
on
the
device
as
I
as
I
build
it.
B
B
Actually,
let
me
just
put
it
out
here,
so
both
environments
are
behaving
the
same
way
with
and
then
we
have
expo
web
if
I
press
or
enter
w
on
my
terminal,
this
will
create
the
web
version
of
this
app
that
I
have
so
I
don't
need
to
it's
the
same
code
base.
Basically,
everything
is
the
same,
and
then
the
application
just
just
works
on
on
every
environment
that
I
have
so.
B
This
is
basically
the
same
application
that
I'm
showing
you
to
you
guys.
This
is
the
same
app
it's
running
on
web
my
device
and
then,
if
one
of
you
guys,
for
example,
want
to
test
it
right
now.
I
just
change
this
to
the
tunnel
and
allow
you
guys
to
if
you
guys
have
had
like
expo
client
to
scan
this
qr
code
and
then
you
can
test
with
me,
live
and-
and
it
just
works.
So
this
is
basically
one
of
the
amazing
things
about
expo
for
expo
web
there's.
B
So,
for
example,
if
you
see
if
I
press
here
the
model
the
image
will
show
here
so
and
when
I'm
on
the
devices
the
model
will
display
fine.
So
I
need
to
put
some
constraints
to
check
which
environment
I'm
under
and
then
make
some
configurations
because
of
time.
I
couldn't
fix
that,
but
I
just
wanted
also
to
to
show
that
you
need
to
do
some
configurations
by
yourself
to
make
everything
work
smoothly
on
every
environment.
But
of
course
it's
a
nice
start
and
yeah.
B
B
They
will
basically
make
you
feel
as
you
as
as
you
like,
another
wizards
from
the
team,
and
you
just
basically
have
fun
with
them
and
hack
and
try
to
create
new
solutions.
So
that's
basically
it
for
today.
I
hope
I
didn't
rush,
because
I
speak
too
fast
when
I'm
a
bit
shaky
so
yeah.
Now
I'm
open
for
questions.
A
Thanks
that
was
awesome,
I
think.
Maybe
I
should
switch
from
building
the
the
standard
old
style
react
native
apps
to
using
expo.
It
looks
like
a
nice
way
to
get
fast,
get
started
really
quickly,
okay,
so
questions.
We
have
some
questions
here.
First
question:
why
did
you
switch
to
ionic?
That
was,
I
think
that
you
mentioned
that
at
the
very
beginning
of
your
talk
and
then
the
second
part
of
that-
and
why
did
you
switch
back
to
react
native.
B
A
Yeah
I
stand
to
be
corrected.
The
first
version
of
ionic
definitely
used
a
web
webview.
I
think
they're
doing
something
similar
now
to
react
native.
If
I'm
not
state
and
mike's
giving
me
the
head
shake.
So
that
looks
good.
Then
next
question
is
expo
a
library
on
top
of
react
native.
Why
would
you
use
it
rather
than
just
using
react
native
without
it.
B
As
I
explained
throughout
the
the
the
it's,
it's
not
only,
I
wouldn't
consider
exports
being
like
a
library
or
considered
as
being
like
a
whole
framework,
because
even
if
you
go
now
into
the
react
native
official
website,
you'll
see
that
they
actually
advise
people
to
start
using
expo
more
because
they
expo
team
just
made
things
much
easier
and
and
faster
to
get
someone
started
with
with
expo.
I
mean
with
react
native,
it's
the
same
same
framework.
B
It's
the
same
tools,
it's
the
same
code
that
you're
writing,
but
you
don't
need
necessary
to
think
about
configurations.
So
you
you
are
not
conf.
You
know,
I
mean
ryan,
you
do
the
normal
react
native,
so
dealing
with
metro,
bangladesh
and
everything
just
just
blogs.
If
you're
very,
very
it's
your
first
time,
you'll
be
blocked,
but
expo
has
this
is
a
given
you,
you
have
everything
there.
A
Yeah
as
somebody
who
started
on
react
native
in
version
0.34
and
went
through
a
lot
of
upgrades
and
now
I'm
using
hermes,
which
is
the
upgraded
engine
every
time
you
try
and
upgrade,
it
is
an
absolute
nightmare
and
you
dread
it
and
you
put
it
off
and,
and
the
way
I'm
seeing
this
is
like
expo
is
like
a
really
cool
cookbook.
It's
like
here's
everything.
A
B
A
B
A
A
C
C
So,
just
a
bit
about
myself,
I'm
a
front-end
developer
and
ui
designer
I'm
co-founder
of
buy
coins,
which
is
a
cryptocurrency
exchange
based
in
nigeria
and
I'm
from
nigeria
as
well.
Although
I
haven't
been
there
for
most
of
this
year
because
of
you
know
the
apocalypse
and
yeah
I'm
also
a
google
web
expert
yeah,
and
I
write
on
my
blog,
which
is
called
bits
of
code,
which
I
will
get
into
a
bit
so
just
a
bit
of
background
so
way
back
in
like
2006.
C
The
primary
function
of
the
majority
of
websites
at
the
time-
and
this
was
even
before,
like
front-end
frameworks-
were
even
a
thing
like
angular-
wasn't
even
launched
at
this
point.
So
I
haven't
really
been
able
to
find
more
up-to-date
data
on
this,
but
I
can
only
imagine
that
this
number
is
even
higher
and
occasionally
I
like
to
try
and
disable
javascript
in
my
browser
to
see
how
different
sites
work-
and
this
is
something
anyone
can
do.
C
Obviously,
and
as
you
expect
some
websites
like
kind
of
completely
break
like
facebook,
I
feel
like
they
don't
really
make
an
attempt.
They
just
say
javascript
is
required
and
that's
basically
it
and
that's
just
kind
of
it.
And
surprisingly,
some
websites
have
like
even
a
better
experience
than
normal,
because
you
don't
get
all
of
these
like
pop-ups,
and
all
these,
like,
I
guess,
random
things
happening,
and
although
this
like
reliance
of
javascript,
has
kind
of
allowed
us
to
build
a
lot
of
incredible
things,
there's
obviously
some
downsides
to
it
as
well.
C
So
in
a
lot
of
cases,
performance
suffers
right,
especially
when
large
frameworks
are
used
for
sites
that
could
just
be
like
a
static
thing,
and
accessibility
can
also
become
a
problem,
especially
in
single
page
applications
where
the
controls
and
navigation
may
not
really
be
handled
properly.
And,
of
course,
progressive
enhancement
is
usually
an
afterthought.
So,
instead
of
starting
with
a
base
experience
that
works
for
everyone
and
kind
of
building
up,
we
usually
start
with
a
experience
that
requires
javascript
and
then
only
in
some
cases.
C
We
like
kind
of
backtrack,
to
try
and
figure
it
out,
but
this
isn't
like
some
witch
hunt
to
say,
never
use
javascript
for
anything
and
it's
not
even
to
shame
any
of
these
websites
as
being
horrible
or
anything,
because
there
are
definitely
cases
where
you
just
need.
Javascript
like
at
buy
coins,
even
though
the
main
like
marketing,
I
guess
website,
is
accessible
to
everyone.
C
We
require
javascript
for
like
when
you
log
in
and
stuff,
because
you
can't
really
like,
buy
and
sell
and
trade
and
things
without
like
javascript,
because
there's
like
a
lot
of
complexity
to
it.
So
this
isn't
about
saying,
like
don't
use.
Javascript,
it's
actually
about
saying:
maybe
we
can
use
javascript
and,
like
the
jam,
stack
to
try
to
improve
a
lot
of
the
issues
that
like
javascript
itself
raises,
so
this
is
kind
of
what
this
talk
is
about.
This
is
like
a
another
title.
I
guess
going
ham
with
the
jam
slack.
C
I
just
thought
that
was
funny.
So
it's
basically
like
a
case
study
of
how
I
was
able
to
use
jam
stack
tools
like
cloudinery,
puppeteer
and
cloudflare,
in
particular,
to
improve
the
experience
for
like
non-javascript
users,
and
this
kind
of
all
starts
with.
Like
my
blog,
as
I
mentioned,
I
write
like
articles
related
to
front
end
development,
and
I
would
typically
or
frequently
want
to
reference
and
display
information
from.
Can
I
use
dot
com,
so
what
I
did
was
I
created
this
embed.
That
kind
of
pulls
information
from.
C
Can
I
use
and
displays
it
in
this
like
interactive
table
thing
and
the
way
it
works
is
that
you'll
first
obviously
include
this
script.
Wherever
in
your
documents,
then
you
would
place
this
code
wherever
you
want
the
embed
to
show,
and
I
have
like
a
website-
you
can
use
to
kind
of
generate
this,
so
you
don't
have
to
like
manually
type
it
out
or
anything,
and
it's
basically
just
like
a
class.
Then
like
the
feature
id
from,
can
I
use
and
then
this
is
like
fallback
data.
C
So
the
script
then
sort
of
like
swaps
out
this
for
the
actual
like
live
embed,
and
this
is
kind
of
like
where
the
problem
starts,
because
if
someone
were
to
visit,
my
blog
without
javascript
enabled
they'll
just
see
that,
like
fallback
text,
that's
kind
of
just
waiting
for
the
script
to
come
in
and
do
its
thing.
But
obviously
that
doesn't
actually
happen,
and
this
isn't
just
a
problem
for
browsers
with
like
javascript
disabled
which,
like
that,
might
not
be
even
like
a
large
enough
user
base
for
you.
C
If
you
don't
think
like
that's
as
important
for
your
particular
use
case,
but
you
can
think
about
like
slow
connections.
So,
even
if
the
embed,
eventually
loads,
like
the
user,
might
still
have
to
see
that
fallback
for
like
a
few
seconds
or
even
minutes,
depending
on
how
bad
the
connection
actually
is
and
then
there's
places
where
javascript
just
isn't
available
like
I
send
out
each
article
as
an
email
as
well,
and
obviously
the
embed
just
doesn't
work
in
that
kind
of
case.
C
So,
instead
of
anyone
seeing
this
on
the
left,
they
would
see
like
an
actual
image
right.
So
just
to
kind
of
show.
How,
like
I
did
that.
So
the
first
part
is
using
puppeteer
to
get
a
screenshot
of
the
embed
and
the
puppeteer
library
is
actually
really
nice
and
it's
one
of
the
it's
probably.
Maybe
one
of
my
favorite
libraries,
because
it
makes
everything
that
feels
kind
of
complex
like
headless
browsers
and
all
of
that
it
makes
it
like
relatively
like
simple.
C
C
Then
the
next
part
is
uploading,
that
image
to
cloudinaries
so
again
like
just
importing
the
library
and
doing
any
kind
of
like
config
and
stuff
like
that,
then
I'm
using
this
upload
stream
method
to
actually
upload
it
and
then
passing
in
the
screenshot
variable
from
the
previous
section
and
then
when
it's
done.
I
just
have
access
to
the
like
url
on
quad
dinner.
C
So
when
using
the
embed
on
like
the
blog
instead
of
this
fallback
text
that
we
had
before,
which
wasn't
ideal,
we
can
then
just
include
like
an
image
of
that
fallback.
Instead
and
even
better
because
we're
using
cloud
dinner,
we
actually
now
automatically
have
access
to
all
different
types
of
file,
types
and
sizes
to
make
it
an
even
better
experience.
So
you
can
have
like
the
webp
for
browsers
that
support
that
or
png
or
jpeg,
or
basically
whatever
you
want.
C
So,
although
the
full
experience
like
when
the
embed
loads
is
like
that
nice
live
up-to-date
data,
the
fallback
data
could
be
from
like
weeks
or
months
or
years
ago,
and
I
kind
of
feel
like
that's
more
of
a
maybe
like
graceful
degradation
approach
rather
than
like
progressive
enhancements,
because
I
feel,
like
a
progressive
enhancement
approach,
would
be
to
try
to
provide
that
same
data
that,
like
the
user,
is
expecting.
So
you
want
an
image.
That's
essentially
like
the
same
value
as
the
live
embed.
C
So
I
again
like
went
back
to
the
drawing
board
to
see
what
I
could
do
and
luckily
I
actually
already
had
all
the
main
parts
done.
I
just
kind
of
needed
to
take
like
an
extra
step,
so
the
solution
that
I
came
up
with
would
be
to
sort
of
like
actually
capture
a
screenshot
of
basically
all
the
features
possible
and
do
this
every
single
day.
C
C
C
C
So,
first
of
all,
you
obviously
have
just
like
the
cloudinary
domain
name.
Then
you
have
your
cloud
name,
which
is
like
your
user
account.
Essentially,
then
you
have
like
the
resource
type
delivery
type
I
get
resource
type.
I
don't
think
I
still
understand
what
delivery
type
is,
but
I
don't
know
you
just
put
it
there
and
then
the
version
number-
and
this
is
like
an
important
part
to
note-
because
whenever
you
upload
something
to
call
dinnery,
they
assign
a
version
number
to
that
image
so
to
and
it's
sort
of
to
like
assist
with
caching.
C
So
once
you
access
an
image
by
a
particular
version,
number
it's
like
cached,
and
if
you
change
that
version
number,
then
it'll
try
and
get
whatever.
The
latest
version
of
that
image
is,
but
it's
also
possible
to
actually
just
access
the
image
without
adding
a
version
number
at
all.
But
that
is
also
technically
a
cached
version,
so
it
will
take
a
while
to
update
if
you're
like
doing
it
every
single
day
which,
as
I
said,
that's
kind
of
what
I'm
doing
so
it
does
sort
of
present
a
problem.
C
And
then
the
final
thing
to
note
about
the
version
number
is
that
it
doesn't
actually
have
to
be
the
one
that
you
you're
given
at
first.
You
can
actually
just
use
any
random
number
that
you
want,
and
this
will
also
be
important
for
the
next
stage,
which
I
will
explain
in
a
bit
and
then
finally,
it's
just
like
the
folder
that
you
set
it
in
and
then
the
file
name
and
then
the
extension.
C
So,
although,
like
the
top,
is
the
url
url
that
we
actually
get
from
cloud
generate?
What
I
actually
wanted
is
for
people
to
be
able
to
use
the
bottom
thing,
which
is
like
a
lot
shorter,
a
lot
easier
to
just
like
understand,
and
also
I
don't
necessarily
want
people
just
accessing
my
cloudinary
link
directly
like
maybe
I
want
to
change
like
the
cloud
name.
Maybe
I
want
to
change
where
it's
hosted
things
like
that,
so
I
wanted
it
to
sort
of
be
separate
and
that's
where
cloudflare
have
cloud
flare
accord.
C
So
I
can
have
like
the
sort
of
url
that
I
want
and
it'll
basically
just
map
to
that
and
it's
just
kind
of
like
expanding
it.
Essentially,
it's
almost
like
a
url
shortener
in
a
way,
but
like
the
problem
with
this,
is
that,
like
the
version
number
is
technically
going
to
be
hard-coded,
so
that
means
that
the
image
will
maybe
never
actually
be
updated
because
we're
always
trying
to
cache
to
access
the
image
cached.
C
At
that
particular
version
and
like
I
said
because
the
version
number
is
optional,
I
could
remove
it,
but
without
without
adding
a
version
number
it
might
take
a
while
for
the
image
to
like
fetch
the
new
version
and
because
I'm
like
updating
the
image
every
single
day.
It's
not.
It
needs
to
be
updated
like
immediately.
C
So
what
I
kind
of
needed
to
do
was
to
find
a
way
to
actually
update
that
version.
Number
on
cloud
flare.
Every
time
the
image
is
updated
and
at
first
I
thought
like
okay,
I
can
just
go
to
cloudflare
and
try
and
update
it
myself,
but
then
I
quickly
realized.
I'm
not
gonna.
Do
that
every
day
for
the
rest
of
my
life,
so
I
needed
to
like
find
a
way
to
do
it
like
programmatically,
so
we
just
have
a
little
bit
more
code
to
actually
make
that
happen.
C
So
what
I
needed
to
do
is
use
the
cloudflare
api,
so
luckily
they
do
have
an
api
that
I
can
use
to
just
update
page
rules
or
anything.
So
this
is
just
like
the
part,
that's
relevant.
So
what
I'm
just
gonna
do
is
update
the
url
of
that
page
rule
and
then
I
just
use
I
used
just
like
a
timestamp
actually
because
it's
not
actually
relevant,
which
one
I
use.
C
So
that's
how
this
number
is
going
to
change
every
single
time
that
I
upload
the
new
image.
So
this
is
kind
of
like
the
entirety
of
what
I
run
like
step
by
step.
So
first
I'm
getting
like
that
list
of
features
from
can
I
use
then
I'm
using
puppeteer
to
take
the
screenshots
of
all
the
features,
and
then
I
use
cloud
dinner
to
upload
all
of
those
and
then
at
the
very
end,
then
I
just
update
the
cloud
flare
page
rule
so
that
it
knows
to
like
reset
the
cache.
C
Yeah,
and
basically
all
of
that
is
just
bundled
as
a
job-
that's
scheduled
on
heroku
to
run
like
every
day.
I
could
choose
to
run
at
any
number
of
like
frequency
that
I
wanted,
but
I
just
figured
every
day
is
like
pretty
safe,
although
most
things
don't
even
change
every
day
I
just
felt
like
I
can
so
I
might
as
well.
I
might
as
well
do
it
so
now,
when
you
create
the
embed
they
already
like
by
default,
is
going
to
include
that
live
image
as
a
fallback,
but
you're.
C
Also,
I'm
also
like
giving
you
the
option
to
create
like
a
static
image.
If
you
do
actually
want
that
because
you
might
just
want
to
capture
what
is
the
feature
states
at
like
particular
dates
or
time,
and
you
can
also
just
use
the
image
alone
if
you
want,
instead
of
using
the
full
like
interactive
embed
thing
so
yeah,
I
don't
think,
there's
anything
else
to
see
here
so
now
we
can
actually
fully
celebrate
because
we've
created
something
that
works
well
in
the
like
fallback
and
the
full
experience.
C
So
thank
you
yeah.
I
hope
you
found
this
as
like
a
really
interesting
use
case
of
cloudineary
and
the
jam
stack
and
all
of
that
stuff.
It
was
exciting
for
me
to
work
on
myself
so
yeah
and
I've
written
a
bunch
of
articles
about
it
as
well,
so
you
can
find
them
in
this
link
and
I'll
share
these
slides
online
at
some
point,
so
thank
you.
A
Awesome
we'll
put
those
links
that
you're
gonna
send
into
the
video
description.
That
was
crazy,
amazing,
so
good
job
on
that
thanks
awesome.
So
we
have
one
question
so
far.
So
could
you
do
something
similar,
but
instead
of
an
image
create
an
html
table
that
looks
like
something
on?
Can
I
use
dot
com
site.
C
Yeah,
so
that's
basically
what
the
live
embed
is.
Actually
it
is
like
an
html
table,
but
it's
just
that
it's
like
hosted
somewhere
and
because
of
the
way
the
embed
works
it
because
it
requires
javascript
to
like
do
all
that.
I
guess
magic
for
you.
That's
why
I
had
to
do
it
this
way,
but
you
could
also
just
directly
access
that
page
and
you
wouldn't
need
you
wouldn't
need,
like
the
images
either.
A
A
C
Yeah,
that's
one
thing
I
have
been
thinking
of
with
the
images
like
to
potentially
also
make
them
sort
of
responsive,
so
just
to
have
like
a
mobile
version
and
a
desktop
version,
and
that
is
technically
something
I
could
do
because
with
puppeteer
by
me,
defining
the
viewports.
I'm
saying
like
this
is
actually
the
layout
I
want,
but
the
embed
itself
is
already
responsive.
C
So
I
could
technically
just
take
a
second
batch
and
just
resize
like
the
viewports
to
the
smaller
size
and
then
make
that
like
a
smaller
thing-
and
I
thought
like
something
even
weirder
would
be
to
even
make
that
like
almost
responsive,
because
I
think
with
cloudflare
or
with
cloud
dinner
you
rather
you
can
sort
of
serve
different
images
depending
on
the
viewport
of
the
device.
That's
like
requesting
it.
So
I
think
that
you
can.