►
From YouTube: PWA Studio Community Sync 17 July, 2020
Description
7.0.0 Release Notes, new My Account, Mini-Cart updates, new Security Headers, Style Updates, and an Image Optimization fix
A
Hello,
everybody
welcome
to
community
sync
for
the
pwa
studio
team
and
interested
parties
and
local
legends
and
community
heroes.
It
is
july
17th
and
we
have
a
huge
schedule.
Welcome
everybody.
We
are
going
to
talk
about
upcoming
release,
notes
with
james
kalkeman
and
docs
andy
taranova's
gonna
do
some
my
account.
Walkthrough
revamp
is
going
to
do
some
mini
cart,
walkthrough,
tommy
weeble's,
going
to
talk
about
security
and
then
thula's
going
to
walk
us
through
some
ux
primitives.
We
have
a
full
plate
and
community
corner
as
well.
B
B
B
Of
these
demos
and
you'll
know
that
we've
changed
how
venue
looks
you
can
check
out
a
what
that
looks
like
in
developed
at
pwavenia.com.
I've
added
some
links
here.
This
is
to
a
build
of
the
develop
branch.
We've
also
introduced
a
new
route
for
vinya
to
showcase
a
page
builder
integration.
You
can
access
what
that
looks
like
this
link.
B
B
C
B
And
between
the
last
release
and
this
release,
we've
been
publishing,
you
know
pwa
studio,
fundamental
tutorials.
You
can
find
these
listed
here.
We
I
finally
managed
to
go
through
the
backlog
of
contributions
from
the
community
for
for
these
tutorials
so
check
those
out
and
if
you
ever,
if
you
want
to
get
a
deep
dive
into
the
details
of,
what's
all
in
this
release,
I've
listed
all
the
prs
know
it's
about
120
some
prs
in
this
release.
You
take
a
closer
look
at
what
exactly
changed.
B
C
C
B
B
A
That's
a
hard
favor
to
ask,
because
what
we're
asking
is
go,
look
at
something
that
you
don't
know
if
you
can
use
it
yet
take
some
time
to
investigate
a
feature
that
may
not
be
part
of
your
plans
and
needs
right
now,
and
so
I
have
no
expectation,
but
I
would
hope
that
you
would
look
at
upcoming
things
and
be
very
willing
to
say
I
understand
this
or
I
don't
understand
this.
Some
of
our
most
treasured
people
will
say
straightforward.
A
I
don't
get
it
and
so
don't
worry.
Please
do
that
when
you
see
it,
these
things
take
several
revisions
to
start
making
sense
to
everyone,
but
given
that
this
is
the
earliest
time
that
this
is
the
first
version
of
a
documentation
of
a
new
thing.
I
just
want
to
say
thank
you
james,
for
bravely
setting
forth
to
make
it.
Thank
you
very
much.
You're.
B
A
C
Yeah,
let's
all
right
all
right,
all
right
so
yeah
I
was
just
excited
to
pick
up
the
first
ticket
in
the
new.
My
account
epic,
so
you'll
start
to
see
some.
My
account
stuff
coming
online
looks
really
cool.
This
first
one
was
the
addition
of
the
my
account
menu
so
that
you'll
see
up
at
the
top
of
the
site
header
now,
where
there
used
to
be
just
search,
and
the
mini
cart
triggers
there's
now
a
sign
in
trigger
so
like.
C
I
said
this
kind
of
functionality
coming
online,
so
we've
kind
of
split
the
sign
in
form
out
into
a
different
ticket,
so
that'll
be
picked
up
soon
over
here
in
the
left.
Nav.
The
kind
of
footer
over
here
is
a
little
bit
different.
Now
the
call
to
action
to
sign
in
so
you
can
sign
in
from
the
left
nav.
We
got
this
stuff
filled
out
automatically
by
the
browser,
but
signing
in
you
can
kind
of
see.
C
There's
like
a
new
header
icon
thing
up
here,
personalized
greeting
and
here's
like
your
list
of
account
links
once
you
are
signed
in
that
you
can
go
visit.
None
of
these
things
are
online.
Yet
but
they're
all
part
of
the
new,
my
account
epic,
that
we've
just
started
so
as
we
go
on
here,
these
these
links
will
become
active
and
these
these
functionalities
will
come
online,
so
just
to
show
what
that
looks
like
back
on,
like
the
full
screen
up
here.
C
C
C
A
A
It's
question
time:
it's
there's
a
lot
to
look
at.
I
I
have
to
ask
if
you
can
see
any
way
that
the
layout
and
the
features
you've
built
could
be
extended.
Additional
sections
additional
cramming
new
functionality
in
there
can
get
pretty
gross
we've
seen
a
lot
of
busy
screens.
So
I
think
that
this,
what
you've
made
is
both
possible
to
extend
and
scale
really
well,
I've
looked
at
it,
so
you
know
I
I'm
not
casting
any
doubt.
C
C
There's
a
lot
more
room
for
now,
like
I
kind
of
showed,
if
you,
if
you
go
to
mobile,
that
area
decreases
a
lot,
so
you
should
probably
be
careful
there,
but
certainly
you
could
add
a
whole
bunch
of
call
to
actions
up
here
as
far
as
like
the
links
themselves
like
if
you
wanted
to
add
new
menu
items
in
here
this,
like
literally
right
now.
This
is
just
a
json
list,
so
yeah
we
could
pretty
pretty
easily
tap
into
that.
A
Thank
you
for
elaborating,
let's
see,
are
there
questions
in
chat?
Are
there
no
all
right?
Thank
you
very
much
andy
and
man.
We
are
killing
it
on
time,
so
maybe
I'll
talk
about
routing
after
all,
ramance
is
gonna.
Look
at
the
mini
carts
and
the
the
ways
we've
been
revisiting
and
rethinking
it
reverend.
Are
you
ready
to
do
that.
G
G
Just
so
we
clear
okay,
so
this
is
the
mini
card
demo.
We
already
went
over
mini
card
right
before
the
break
and
he
did
a
demo
of
it.
But
since
then
we
have
come
up
with
a
couple
of
adjustments
to
it
and
that's
what
that's
what
I'm
going
to
be
demoing
today.
There
are
a
bunch
of
peers
right
now
sitting
in
the
in
the
backlog,
but
all
of
them
tend
to
make
certain
change
to
the
mini
card.
Most.
C
H
G
G
G
Also,
we
have
added
links
for
the
items
in
the
cart.
So
when
you
click
on
it,
it
takes
you
directly
to
the
pdp
page.
There
is
an
open
feature
request
where,
when
you
click
on
an
item
it
takes
you
to
the
pdp
page
and
also
applies
the
the
configuration
that
is
set
on
the
current
item.
So
right
now,
the
size
as
small
quantity
is
one
assuming
that
the
feature
goes
through
when
you
land
on
the
pdp
page,
the
color
and
the
size
are
automatically
selected
for
you.
G
G
E
G
Let's
do
that,
I
guess
the
width
is
somewhere
around
700
760,
oh
no
360
or
something
let's
see
yeah.
So
once
you
hit
360
the
width,
if
you
look
at
the
width
on
the
top
the
pixels,
where
is
it
it
switches
to
the
mobile
view?
Andy,
do
you
remember
what
is
the
pixel
count
at
which
point
it's
going
to
switch
to
a
mobile
gear.
G
E
G
Okay,
great,
so
it's
actually
documented
right
here
in
the
cartridge
like
this
button
behaves
differently.
There
are
two
different
buttons
for
desktop:
okay,
cool
thanks.
I
thought
you
were
talking
about
the
the
width,
just
that's
what,
if
that's
what
we
were
talking
about?
It's
960,
pixels,
yeah,
okay,
yeah,
but
sorry
for
that.
G
G
A
A
A
H
Three:
okay:
let's
go
okay,
so
I
first
have
to
credit
zetlan
a
lot
with
laying
the
foundation
for
this
work
so
that
what
he
did
with
one
line
of
code
was
just
mind
blowing
where
he
injected
the
build
bus.
Our
extensibility
framework
into
upward,
so
upward
is
kind
of
our
kind
of
routing
how
what
pwa
needs
from
the
back
end
to
function.
H
So
he
had
this
brilliant
idea
to
inject
the
build
bus
into
it.
So
you
can
kind
of
modify
those
upward
configurations
in
your
own
app.
So
we
had
we
started
using
web
page
tests
to
validate
that.
We
were
kind
of
doing
things
correctly
kind
of
gives
you
a
general
idea
of
how
things
are
going
and
we
had
this
glaring
f
on
security.
So
this
is
kind
of
the.
F
H
Step
to
kind
of
get
ourselves
to
be
more
secure
by
default.
I
will
preface
this,
but
this
is
kind
of
this
is
not
a
completely
secure
thing,
but
it
does
give
us
an
a
plus
on
web
page
test.
So
I'm
going
to
call
it
a
success,
but
the
very
first
thing
that
we
did
in
the
scope
of
this
was
we
made
upward
kind
of
modifiable
by
buildbus.
So
any
extensions
now
can
modify
an
upward
config.
You
can
actually
never
write
yaml
ever
again.
If
you
didn't
want
to,
you,
can
write
upward
configs
in
js.
H
It
allows
you
to
transform
those
upward
yamas
here
and
then
there's
some
example
here
on
what
you
may
want
to
do
so
an
example
that
one
provided.
I
just
cherry-picked
this.
He
did
all
this
work,
so
a
simple
thing
you
could
do
is
like.
If
your
back
end
is
down,
you
can
put
your
pwa
in
maintenance
mode
very
easily,
just
by
flipping
an
environment
variable,
and
then
your
your
pwa
could
throw
a
503
for
all
of
its
responses.
H
So
I
have
a
new
package
here
in
this
extensions
directory
called
upward
security.
Headers
and
all
it
does
is
inject.
Some
security
headers
from
an
upward
file
into
the
vinnia
ui
vinia
app
show
so
and
those
security
headers
are
as
follows,
and
we
just
did
the
ones
that
web
page
test
requires
it
overreaches
a
little
bit,
because
some
of
these
headers
are
really
only
required
for
like
ie
11,
which
we
don't
support
anyway,
but
just
for
just
to
get
us
an
a
plus.
We
included
them
anyway,
but
you'll
see
the
big
one.
H
H
So
I
could
have
easily
done
this
purely
in
javascript
because
of
that
awesome
build
bus
entry
point
now,
but
because
we
want
to
allow
this
to
be
extensible
as
well.
You
now
have
two
options
to
do
that.
You
can
just
write
an
upward
file
and
overwrite
this
security,
header
definition
or
you
could
tap
into
the
same
target
that
we're
tapping
into
and
add
your
own
additional
headers.
H
H
So
it's
not
a
lot
of
work,
but
I
think
it
really
opened
up
a
lot
of
opportunities
for
to
make
upwards
much
more
extensible
than
it
already
was
and
really
opens
it
up
kind
of.
In
doing
this
we
kind
of
realized
like
well.
Maybe
we
we
probably
need
to
inject
these
headers
in
every
request,
so
we
discovered
that
the
directory
resolver
that
serves
all
of
the
assets,
all
the
javascript
files-
anything
that's,
not
the
app
shell
basically
probably
wants
these
headers
as
well,
not
the
csp1,
but
all
the
other
ones.
H
H
H
You
can
merge
those
headers
into
your
response,
so
you
don't
really
have
to
do
any
of
this
extension
stuff,
but
we
we
think
this
is
still
a
huge
value.
Add
I
I
would
merge
this
pr
with
just
adding
this
target
honestly
without
security
headers,
because
it's
so
cool
on
writing.
Upward
definitions
in
javascript
is
a
lot
of
fun,
so
that
is
it
for
the
security
part
of
things.
I
don't
know
if
that
one
has
anything
to
add
or
if
there's
any
questions.
A
No,
you
nailed
it.
Man
yeah,
I
I
think
broadly,
the
yaml
part
of
upward
is
not
the
important
part.
It
was
just
a
format.
I
thought
was
readable
and
looks
a
lot
like
a
and
works
a
lot
like
a
make
file,
which
is
kind
of
the
idea
of
upwards.
So
the
the
main
thing
about
it
is
just
its
structure,
and
so
it
makes
perfect
sense
to
write
it
in
javascript.
A
The
only
downside
I
see
to
that
is
that
you
are
in
writing
it
that
way,
you're
injecting
the
the
security
headers
into
any
area
of
the
upward
definition
that
is
defining
headers.
So
that's
kind
of
that's
a
push,
and
if
a
given
upward
file
has
several
different
places
where
it
defines
and
returns
a
header's
object,
then
you
need
to
kind
of
know
that
beforehand
or
or
traverse
the
tree
to
detect
that,
and
I
was
thinking
it
might
be-
cool
to
define
a
context
value
of
the
security
headers.
A
That
is
like
a
known
new
top-level
definition.
You
know
like
venus
security,
headers
or
common
security
headers,
so
that
anything
that
so
that
like
say,
venia
could
have
you
the
upward
csp
module.
As
one
of
its
dependencies
and
then
it
would
know
that
venus
security
headers
is
one
of
the
context,
values
that
is
available
in
its
own
upward
file,
and
then
it
could
cite
it
in
several
places,
but
that
would
require
a
way
to
merge
objects,
which
is
what
we
were
talking
about.
A
So
that
would
that
would
let
you
kind
of
do
pull
instead
of
push.
I'm
not
saying
that's
better,
but
it's
just
another
way
to
think
about
it,
and
it's
one
of
it's
more
of
an
inversion
of
control
type
of
thing,
but
in
the
the
I
think
the
main
thrust,
like
you
said,
is
that
upward
is
supposed
to
be
something
that
you
manipulate
as
part
of
the
build.
I'm
really
glad
that
you
had
a
good
time
with
it
and
implemented
it
great.
H
H
A
Yeah,
I
just
you
know
it.
Version
of
control
is
always
a
good
idea.
It's
fine
to
write
upward
in
javascript.
That's
fine!
It's
just
overwriting,
like
you
know,
imperatively
modifying
code
that
already
exists
can
be
a
little
bit
more
brittle,
but
this
is
still
something
that
gives
vinnia
an
a
so
let's.
I
definitely
want
to
merge
it
and
we'll
revisit
it
later,
which,
when
we
update
the
spec.
A
Apparently,
not
all
right.
Well,
it's
time
for
amthula
to
talk
about
some
of
the
ux
primitives
that
we've
been
working
on.
This
is
really
exciting
stuff,
because
it's
the
building
blocks
for
you
to
build
features
more
quickly
that
look
right
and
have
the
right
style
and
things
so
anthology.
Please
take
the
wheel
if
you're
ready.
F
F
So
what
I
did
was,
I
am
a
logged
in
user,
I
have
a
bunch
of
stuff
in
my
checkout
went
on
a
shopping
spree
and
you
can
see
that
some
of
the
new
styles
have
been
applied
to
the
accordions
here
to
bring
it
up
to
spec,
along
with,
I
think,
we've
seen
some
of
the
input
work
before
so
you
can
kind
of
see
the
new
design.
I
think
it
makes
it
a
little
more
clear
for
users
you'll
see
that
in
the
cart
and
also
in
checkout,
mainly
here
some
new
stuff.
F
Here
we
also
worked
on
some
card
designs,
so
I
wanted
to
show
that
as
well.
So
you
can
see
here.
This
is
kind
of
a
new
component
that
uses
the
new
design
and
we
have
you
know
different
states,
hover
states
as
well
to
access
stuff
in
your
checkout
and
then
the
third
thing
that
we
updated
was
the
filters.
F
A
A
F
A
Sure,
okay,
we
got
to
the
the
end
quicker
than
I
thought,
but
I
think
for
the
last
couple
of
minutes,
we're
kind
of
competing
between
community
corner
and
me
I
can
talk
about
image,
optimization
and
some
bugs
we
ran
into
and
some
best
practices
we
should
talk
about.
I
can
talk
about
routing,
though
I
think
that's
a
larger
subject.
That's
it
would
help
more
for
me
to
go
into
it
more.
A
A
H
H
A
A
A
I'll
show
you
in
a
minute,
the
urls
for
them
are
automatically
generated
when
you
use
the
make
url
function
and
that
works
in
links
and
it
works
in
images.
But
you
end
up
with
these
url
parameters
that
set
say
the
width,
the
format
etc,
and
what
processes
those
is
in
production
is
the
fastly.
I
o
feature.
That's
part
of
the
magento
commerce
cloud
pro
tier
and
that
stuff
is
super
fast.
A
But
if
you
don't
have
that,
when
you're
working
on
pwa
studio
locally
or
if
you're,
deploying
to
some
architecture,
some
server
or
cloud
that
does
not
have
that
feature,
then
you're
not
going
to
be
able
to
compress
your
images
at
all,
especially
because
you
don't
have
access
to
magento's,
pre-compressed
and
cached
images,
and
it's
better
to
be
able
to
do
that
on
the
fly
anyway.
So
we
added
an
image,
optimization
feature
that
is
present
in
the
dev
server
automatically
added
and
in
the
little
staging
server
script
that
comes
with
vineya.
A
H
A
A
That
nginx
was
configured
to
gzip
images.
Now
you
shouldn't
do
that
hastily
has
to
process
images
on
the
fly,
so
it
needs
to
be
able
to
grab
the
jpeg
and
begin
it,
and
it
has
to
guess
all
of
that
from
the
headers.
Some
architectures,
I
guess
by
default,
have
their
nginx
instance
configured
to
compress
images.
Nginx
is
really
frequently
used
as
the
top
image
as
the
top
layer
to
serve
http
requests,
you
know
and
to
handle
ssl
and
stuff
and
then
node
or
something
else
runs
behind
it.
A
There
are
other
options,
but
nginx
is
frequently
used
and
I
think
some
instructions
tell
you
to
tell
it
to
g-zip
every
image.
There's
no
reason
to
do
that.
If
you
ever
tried
to
like
put
an
mp3
in
a
zip
file
or
a
jpeg
in
a
zip
file,
you
might
notice
that
that
does
not
work
very
well
and
sometimes
the
file
is
even
larger
because
those
formats
are
already
using
the
same
kind
of
compression.
A
So
a
few
gzip
images
you
are
wasting
cpu
and
you
are
surprising,
the
browser
and
any
other
middleware
that
wants
to
work
with
the
actual
image
data.
So
for
a
while,
I
tried
to
make
hastily
just
do
this,
but
instead
now
what
it
does
is
it
actually
will
log
a
particular
error
and
I
can
reproduce
the
issue
here.
Yeah
know
what
I
didn't
have
that
ready
to
go,
but
I
think
I
can
do
it
fast.
A
This
poll
request
will
now
add-
and
you
can
look
at
this
if
you'd
like
the
pull
request,
which
lists
some
sources
on,
why
you
shouldn't
gzip
images
and
then
it
will
actually
log
an
error
so
in
production,
if
you're,
using
this
middleware
it'll
log,
an
error
level
to
the
error
log
and
and
explain
that
the
image
that
came
in
was
was
gzipped
or
compressed
with
broadway
or
something,
and
that
that's
that's
the
wrong
thing
to
do.
The
image
will
be
passed
through
or
break.