►
From YouTube: Workshop: Make Your First AMP Site - Ben Morss, Google
Description
No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).
A
So
I
can't
tell
who's
out
there
we're
good
we're
going
I'll.
Take
that
as
a
yes,
if
you
can
drop
in
the
chat,
sometimes
things
like
yeah,
it's
good,
so
my
name
is
Ben
Morse.
My
job
is
to
be
a
developer
advocate
at
Google,
where
we
work
to
make
the
web
faster
and
more
beautiful,
easier
for
developers
to
use
easier
for
users
to
use.
That's
the
idea
and
it
was
before
a
full-time
musician.
You
can
see
actually,
in
the
backdrop
over
here,
this
was
holding
guitar
there's
a
keyboard
down
there.
A
A
So
this
is
a
workshop
version
of
the
beginning
web
development
with
app
course.
We
have
three
of
these
courses
showing
how
to
make
sites
using
amp
and
I
can
do
the
first
course
by
taking
out
all
the
stuff
about
what
amp
is
and
the
web
and
the
philosophy
behind
amp-
and
you
can
do
this
course
in
about
an
hour
and
a
half
and
bit
of
the
next
course
as
well.
A
A
If
you're
feeling
shy,
I
will
just
go
on
here
with
the
presentation
and
we'll
get
into
the
workshop
and
we'll
take
it
from
there.
So
it's
really
about
the
web.
I
mean
the
web
is
a
wonderful
place
full
of
fantastic
things,
but
indeed
behind
the
amp
is
to
make
it
easier.
When
you
haven't
got
a
great
connection,
which
happens
a
fair
amount
of
the
time.
If
you're
in,
like
a
really
really
nice
area
with
nice
Wi-Fi,
you
know
and
a
really
nice
phone,
it
may
not
be
a
problem.
A
Web
sites
may
all
load
quickly
for
you
with
some
exceptions,
but
for
a
lot
of
people
a
lot
of
the
time.
It's
not
the
case.
If
you're
in
a
more
developing
country
where
our
connections
are
a
little
slower,
then
something
is
a
problem.
In
fact,
the
last
that
I
saw
said
that
actually
40%
of
all
connections
made
by
mobile
phones
worldwide
are
2g.
A
So
if
you
have
a
lot
of
site
over
2g,
it's
pretty
slow,
even
if
you're
in
like
an
area
with
nice
Wi-Fi,
then
you
will
often
find
yourself
getting
slow
connections
if
you're
traveling,
somewhere
in
a
more
rural
area,
we'd
downgrade
from
4G
to
3G,
or
something
else
like
that,
and
also
a
lot
of
phones
are
not
that
high-powered
out
there
you've
got
the
latest
iPhone
or
a
galaxy
or
pixel
or
whatever.
That's
all
wonderful,
but
a
lot
of
phones
being
sold.
A
A
If
you
have
too
much
code
too
much
stuff
on
your
site,
you
may
get
pages
that
are
unresponsive
because
trying
to
scroll
around
the
Chava
script,
just
executing
at
the
same
time
or
the
event
listeners
for
a
button
haven't
actually
loaded
up
yet
and
also
a
problem
with
the
web
on
phones
that
tries
to
make
better.
Is
that
you'll
be
looking
at
a
site?
You
know
sitting
there
looking
at
some
text.
A
A
Basically,
how
does
it
do
that
and
is
simply
mostly
what's
a
few
different
things,
but
really
it's
mostly
about
web
components,
so
web
components
you
use
these
before
are
a
way
of
adding
new
functionality
that
gets
used
to
HTML.
You
have
JavaScript
that
runs
these
new
things.
Html
was
pretty
old,
it's
been
around
for
a
long
time.
It
was
designed
to
describe
documents.
It
wasn't
designed
to
do
like
live
functionality
and
websites.
It
was
there
to
say
you
know
this
is
a
boldface
bit
of
text.
This
is
a
paragraph.
This
should
be
read.
A
It
wasn't
there
to
say
this
is
an
interactive
menu.
This
is
the
Twitter
embed.
This
is
the
mortgage
calculator.
Those
things
are
not
part
of
HTML
and
they're,
still
not
part
of
HTML.
Even
today,
people
add
JavaScript
to
do
all
these
things,
which
is
fine.
It
works
great,
but
if
you
had
a
lot
of
JavaScript
mixed
things
slow,
so
the
goal
web
component
just
make
these
things
simpler
by
providing
you
these
widgets
that
do
the
functionality
for
you
that
you
have
to
write
yourself
before
amp.
A
Does
this
by
adding
new
tags,
HTML
power
bytes
own
JavaScript,
conversely,
amp
restricts
the
way.
Javascript
was
written
to
certain
kinds
of
places,
so
you
can't
have
too
much
of
it,
and
so
your
page
is
more
guaranteed
to
be
quick,
I
should've,
given
a
talk
tomorrow
on
how
to
write.
Javascript
and
amp,
please
stop
by
it's
called
workers.
Je
s
made
easy
drop
by
and
see
it
anyway.
So
if
your
page
follows
the
rules,
amp
sets
out
for
speed
and
accessibility.
Then
there
are
web
crawlers
out
there.
Web
spiders
like
googles
and
Microsoft's.
A
That
will
find
pages.
That
are
what
we
call
valid
amp
and
stick
those
into
an
amp
cache
like
Google's
amp
cache,
and
this
means
that
when
you
find
these
pages
from
search
like
Google
search,
they
get
served
from
Google's
servers
very
quickly.
I
can
even
show
you
this,
because
we
have
this
ability
to
do
this.
You
seen
this
before.
A
If
you
have-
and
let
me
know
in
the
chat
here-
we're
gonna
simulate
a
mobile
device
over
here
and
go
to
google.com,
but
you
have
probably
gotten
to
before
at
some
point:
I
look
for
something
kind
of
newsy.
What
was
this?
This
could
be
an
Uzi,
a
class-action
suit
against
Google
all
right.
This
is
a
great
topic.
Let's
see
if
we
can
find
class-action
Google
here
and
find
news
results.
Look
at
this!
This
is
a
good
results,
because
it's
not
about
current
politics
or
about
viruses.
A
It's
about
Google,
so
notice
on
this
carousel
here
of
stories.
All
of
these
little
guys
here
have
little
lightning
bolts.
Can
you
see
that,
in
the
right
hand,
corner-
and
those
mean
these-
are
all
amp
pages-
see
these
things
over
here
you
just
scroll
down
the
page.
There
are
more
results
like
this,
so
amp
lunch
first
for
news,
publishers
there's
way
for
publishers
to
get
their
content
from
users
more
quickly
and
more
easily.
A
This
is
a
great
example.
I
think
they
love
use
of
all
time.
Oh
my
god,
look
at
that
got
a
pixel,
it's
pretty
good,
but
well
anyway.
So
all
these
things
here
are
amp
articles.
Now
this
is
gonna
change
in
the
near
future.
You
may
have
seen
a
Google
search
announced
that
this
was
before
reserved
for
amp
pages.
That's
importantly,
next
year,
when
things
calm
down
in
the
world,
cagoule
lunch
a
thing
that
allows
non
amp
pages
that
are
as
fast
and
have
stable
layout
like
eptas
the
same
chance
to
get
in
this
top
stories.
A
A
These
things
load
pretty
fast,
that's
because
their
amp
pages
and
they
load
quickly
and
also
because
in
some
cases
Google
search
has
P
loaded
these
pages
in
an
iframe,
so
they
appear
immediately
they're
an
invisible
iframe
if
you're
right
away,
Microsoft
Bing
does
the
same
kind
of
thing
and
that's
kind
of
some
reasons
to
use
amp
it's
mostly
about
speed
and
having
a
stable
layout.
It
also
can
be
convenient
because,
as
a
developer,
you're
using
these
web
goodness
hour
exists.
A
You're,
not
spending
all
your
time,
finding
third-party
libraries
to
do
image,
sliders
or
other
kinds
of
things.
It's
all
there
with
amp.
So
we
said
these
things
already,
I
didn't
say
all
these
things,
there's
amp,
validator
and
also
the
Google
cache,
for
example,
will
optimize
your
pages
in
various
ways.
It
would
compress
images.
Does
various
things
make
the
pages
load
more
quickly,
yeah,
but
cache
beer
into
this
before
you've
said
this.
This
also
does
things
make
things
faster:
I'd
source
sets
sometimes,
which
is
nice.
So
how
does
it
actually
look
in
person?
A
A
That
is
not
a
standard
HTML
attribute,
but
am
has
its
own
layout
system,
which
we'll
try
out
in
a
few
minutes
that
allows
you
to
specify
how
things
work
when
the
page
changes
size,
the
container
changes
size,
if
you
say,
lay
it
equals
responsive
and
pull
automatically
right
for
you
with
no
extra
work
on
your
part.
It
will
shrink
and
grow.
They
can
the
actual
component,
as
is
container
trinken
grows.
So
it's
kind
of
nice
width
and
height
are
there.
These
are
standard,
HTML
attributes.
A
These
are
there
because
remember
the
amp
wants
to
have
everything
have
its
size
declared
in
advance
that
way
things
to
pop
around
when
they
load
up,
they
have
a
space
reserved
for
them
on
the
screen.
They
pop
into
their
spot,
and
there
you
are
so
they
want
you
to
specify
width
and
height
in
most
cases
and
then
finally,
the
part.
That's
the
setting
over
here
data
video
ID.
This
is
the
ID
of
the
YouTube
video,
as
you
might
see,
somewhere
in
URL,
plug
that
in
there
and
then
amp
will
pop
in
a
YouTube
video.
A
That's
what
happens
about
all
this
so
far.
My
very
very
brief
intro
to
amp,
there's
more
there's
a
web
stories
thing
based
on
amp
there's
an
amp,
an
email,
there's
amp
Brad's
there's
a
lot
to
it,
but
this
is
the
basis,
the
basics.
Okay,
let
us
go
on,
so
you
can
mix
I'ts
various
different
kinds
of.
If
you
have
this
conference
today,
you
might
be
into
doing
all
yourself.
Writing
your
own
JavaScript,
your
own
CSS
or
an
HTML
of
everything.
That's
totally
fine
you're
using
a
CMS,
it's
kind
of
opposite
approach.
A
If
you're
using
like
WordPress,
for
example,
or
even
more
so
something
like
Wix,
you
don't
program
anything
you
might
use
plugins
or
drag-and-drop
interfaces
to
move
things
around.
Amp
is
somewhere
in
between
all
those
things.
Amp
you
do
your
own
CSS
in
HTML,
but
much
less
JavaScript
again.
We
love
javascript
in
the
Emerald
episode
in
JavaScript,
but
your
burden
of
JavaScript
is
much
lower.
A
Joey
YouTube
thing
is
a
module.
Basically,
it's
like
a
module
yeah,
it's
a
web
component,
that's
kind
of
the
same
idea,
it's
just
run
by
JavaScript
and
it
works
across
browsers
by
the
way
it's
all
using
current
web
standards.
So
for
this
course
over
here
today
always
be
using
HTML,
not
much
CSS
and
probably
for
today.
You
know
JavaScript
go
figure.
So,
let's
get
started.
Let's
get
our
hands
dirty
over
here.
We're
gonna
use
glitch
for
this.
You
don't
have
to
use
glitch,
but
it's
pretty
convenient
because
you
can
do
online
coding.
A
You
can
also
use
your
own
web
server
on
your
own
computer
and
your
own
IDE
or
an
editor,
though
with
glitch,
you
can
do
it
all
in
a
web
interface.
Also,
you
can
share
your
results
of
people
here.
So,
as
you
complete
the
exercises
you
can
pop
the
URL
into
the
chat.
I
can
show
it
over
here.
We
can
all
look
at
your
work
and
admire
your
handiwork.
A
If
you
have
problems
you
need
to
help
debugging,
we
can
also
have
you
pop
your
URL
into
the
chat
and
we
compute
a
bug
as
well,
so
to
start
out
over
here.
Go
to
this
link
over
here,
glitch
comm,
slash,
tilde,
Shoei
way.
In
fact,
you
can
copy
this
into
the
chat.
I'm
gonna
type
it
in
over
here
that'll
help
people
get
started.
A
So
if
you
can
transfer
this
over
Shannon
go
there
glitch
comm,
slash,
tilde,
Zoe
way,
which
is
probably
now
by
Shannon's
magic
appearing
in
the
chat
and
here's
how
it
will
look
kind
of
like
this
I
think
the
guy
from
which
was
talking
today.
I
think
I
Neal
was
here,
and
you
can
see
that
every
project
in
glitch
has
a
clever
cute
name
with
a
few
different
words
or
type
in
zip.
Like
showy
way,
you
will
see
somewhere
on
the
screen,
a
button
that
says
remix,
something,
you
might
say,
click
the
remix
remix.
A
This
project
is
for
me
because
I
own
the
project.
For
me,
it
says
remix.
This
I
think
we
got
something
different
if
you
click
that
button
over
there
and
make
your
own
copy
of
this
project,
it's
they're,
clever,
DJ,
way
of
saying
copy
this
project
and
now
modify
it.
However,
you
want
to
so
again
good
a
glitch
comm,
slash,
tilde,
Shoei
way
and
then
remix
this
and
like
magic,
you'll,
see
a
new
project
popping
up
over
here
my
appears
to
be
call:
it
absorbed
magnetic
haze.
A
A
So,
if
you
get
in
there,
if
this
works
for
you,
you'll
see
a
few
things
on
your
left.
These
are
the
files
you
can
use
in
folders.
You
can
use
for
your
project,
we're
going
to
be
using
only
one
of
these
files
today
we're
not
using
the
server
or
the
node
stuff.
If
you
just
go
into
the
public
folder
over
here
open
this
up,
you'll
see
some
more
things
inside
of
there.
These
are
all
for
the
more
advanced
course,
except
for
index.html
click
on
that
and
we'll
use
this
file
and
just
this
file
for
today.
A
Are
you
guys
in
there?
Hopefully,
at
this
point,
you'll
see
a
bunch
of
HTML,
a
bunch
of
starter
code,
a
bunch
of
CSS
at
the
bottom,
a
very
small
amount
of
actual
stuff
that
actually
matters
which
is
the
actual
body
of
the
document.
So
using
glitch
you
can
type
in
your
code
there
you
can
also
very
handily
hit,
show
and
show
the
actual
result
of
your
code.
If
you
go
next
to
the
code,
that's
fine
in
a
new
window,
a
certain
advantages
which
I'll
discuss
in
a
minute
I'll
choose
in
a
new
window.
A
A
Assuming
that
you
are
all
good
and
you're
here,
then
we
will
go
back
over
here
and
I'll.
Show
you
how
to
find
images
in
the
assets
area
over
here
are
some
static
things
which
are
all
images
to
use
images
here
in
your
project.
You
just
click
on
one
of
these
things
it
pops
up
into
this
lightbox
experience.
You
see
this
long
long,
CDN
thing
over
here.
This
is
a
unique
link
to
this
image
you
hit
copy.
A
You
can
then
use
that
URL
and
project,
so
I
can
any
image
over
here
zoom
in
over
here
like
clicking
on
it
copy
the
URL
and
there
you
are
that's
kind
of
how
glitch
works.
Good
question
the
lightning
bolts.
Let's
talk
about
that,
that's
a
really
good
question
and
has
a
few
things
that
does
it
wants
you
to
do,
for
valid
amp
page
isn't
required
if
valid
amp
isn't
important
to
you
felt.
A
Amp
is
only
useful
if
you
want
to
follow
amps
kind
of
guidelines
and
rules
for
accessibility
and
speed,
and
also
to
be
in
the
app
cache
which
actually
is
a
pretty
big
advantage
and
can't
just
speed
things
up
so
making
a
valid
amp
has
certain
advantages,
and
one
of
the
things
wants
you
to
do
is
that
lightning
bolt
over
there
after
HTML?
This
is
valid,
HTML,
lightning
bolt
or
the
word
amp
also
works,
and
this
just
tells
amp
that
this
is
an
amp
page.
A
Some
of
the
things
you'll
notice
over
here.
This
meta
tag
cars
at
utf-8
and
wants
that
to
have
a
standard
character
set.
More
importantly,
over
here,
this
first
JavaScript
was
loaded
asynchronously.
This
is
amps
runtime
that
runs
amp
itself,
that's
required
for
all
amp
pages,
and
what
else
is
over
here?
Some
more
things:
a
standard,
a
viewport
tag
over
here,
I'm
gonna,
skip
discussing
this
link
cuz,
it's
kind
of
complicated
and
notice.
Also
there's
this
boilerplate
over
here
and
/
choirs.
A
This
actually
will
hide
the
page
until
amp
loads
up,
so
you
can
lay
out
the
page
for
you
and
make
things,
look
all
nice
and
then
notice.
Also,
all
the
CSS
here
in
the
style,
amp
custom
tag
for
valid
amp.
It
requires
that
all
your
CSS
be
here
in
line
the
idea
being
that
a
single
load
from
the
browser
of
this
page
is
all
amp
needs
to
display
your
entire
page.
So
there's
no
delays
that
could
be
caused
by
another
request
for
your
CSS
in
a
bigger
project.
A
Before
we
get
started
one
more
thing
we
could
be
useful,
for
you
is
the
amp
validator.
Let's
see
if
I
have
skipped
some
slides
over
here
did
this.
We
did
this
this
over
here.
This
isn't
required
for
the
budget,
but
it's
kind
of
useful
there's
a
Chrome
extension.
You
can
use
that
the
text,
whether
the
pages
are
valid,
amp
or
not.
If
you
can
see
up
in
my
screen
over
here
at
the
top,
where
all
the
little
extensions
are
a
lot
of
them
here,
there's
little
lightning
bolt
as
in
gray.
A
This
is
young
validator,
lightning
bolts.
It
will
turn
green
once
on
a
valid
amp
page.
So
to
get
this
I
just
tend
to
Google
using
Chrome.
You
know,
chrome,
amp,
validator
and
then
there
it
is
again
not
required
for
this,
but
it's
kind
of
useful
I'm
gonna
copy
the
link
over
here
and
do
the
chat
this
very,
very
long,
long
link
here
it
is
so
let
me
show
you
how
this
looks
in
real
life:
let's
go
to
amp
dev,
which
is
our
documentation
site,
which
my
team
and
I
work
on
this
is
made
with
amp.
A
Everything
here
is
amp.
It's
all
valid,
amp
and
I
can
show
you
by
looking
in
the
console
over
here.
Actually,
we
can
look
in
the
developer
tools.
We
can
look
at
the
elements
here.
Let's
make
that
a
little
bigger
you
see
over
here,
HTML
amp,
you
see
some
things
over
here,
like
user
notification,
about
your
MP
things
in
your
amp
state,
which
is
the
state
variable.
It's
an
HTML
yeah
black
box.
These
don't
have
things
notice.
Also,
this
is
the
responsive.
It
works
on
a
desktop
or
mobile,
equally
well
notice.
A
Also,
the
lightning
bolt
over
there
is
green,
which
means
it's
valid
amp
now
to
show
this
actually
not
using
the
extension.
I
can
also
do
it
in
the
console
if
I,
instead
of
just
saying
about
EV,
if
I
append
to
the
end
of
my
URL,
a
hash
del
min,
equals
1
and
refresh
the
page,
it
will
then
give
me
debug
information
in
the
console.
A
This
actually
is
valid
amp.
It
turns
out,
let's
go
to
a
non
valid
amp
page
one
of
my
pages.
This
is
a
tutorial
I
made
which
is
not
valid
amp.
It's
got
some
errors
in
it
and
you
can
see
this
little
one
here
and
lightning
bolts,
I.
Think
zoom
will
show
you
this
pop-up
over
here,
too
I
think
you
see
in
this
error
over
here.
A
This
is
because
I
use
relative
URL,
which
throws
an
error
because
aunt
wants
you
to
use
absolute
URLs,
because
if
yours
paid
to
serve
from
app
cache,
it
may
change
the
domain,
and
relative
URL
could
fail
join
a
different
domain.
If
I
then
go
to
this
over
here
and
append
developing
equals
one
refresh
the
page,
we
will
see
in
the
console
same
error
message
anyway.
It's
a
lot
of
setup
over
there,
but
that's
all
except
we
have
to
do
any
questions
and
all
those
things.
A
I'm
gonna
keep
on
a
foraging
along
here,
so
we
said
this
before
about
amp
and,
let's
start
actually
doing
something
over
here.
So
our
first
component,
we're
going
to
use
is
amp
image,
we're
gonna
start
very,
very
small
amp
replaces
of
one
or
two
HTML
tags
with
its
own
tags,
not
very
many
for
valid
amp
you're
required
to
use
image
instead
of
image.
This
way,
amp
can
control
when
your
image
actually
loads
and
how
it
loads.
So
two
things
that
are
important
about
this
there's
more.
A
When
is
that
again,
it
will
reserve
space
for
this
on
the
screen,
so
it
doesn't
move
things
around
when
the
image
pops
in
it
will
just
pop
into
its
spot
and
not
move
anything
else
around
also
amp
automatically
lazy
loads.
So
if
your
image
is
somewhere
down
on
the
screen
and
the
user
hasn't
scrolled
up
there,
yet
it
won't
load
up
until
it's
actually
time
to
be
seen
by
the
user.
So
these
things
all
come
with
an
automatically
for
this.
In
various
other
reasons,
amp
wants
you
to
use
app
image
instead
of
using
image.
A
So
let's
try
this
out
for
a
minute.
Oh,
it's
more,
it's
more
components:
yep
Twitter
looks
like
other
kinds
of
things.
This
we
saw
before
and
also
notice
this
that
some
components
require
you
to
add
your
own
JavaScript,
a
very
small
amount
of
JavaScript
like
8k
or
10k
during
the
actual
component.
That
is
so.
It
is
not
a
literal
once
for
performance
reasons
anyway,
amp
imaged,
so
our
first
goal
is
to
replace
the
image
tag
in
our
project
with
amp
image.
A
A
So
you
now
must
do
this.
The
idea
is
to
replace
it
with
amp
image,
to
give
it
a
width
and
a
height
keep
it
source
as
it
is.
If
you
make
it
640
about
480,
it
will
still
look
nice
width
of
640
height
of
480
if
they
don't
close
your
an
image
tag
and
you're
done.
That
is
our
force
exercise.
If
you
can
confuse
at
any
point
which
you
might
then
you
should
look
at
documentation
site
because
it's
full
of
documentation.
So,
let's
say
you're
forgetting
a
hep
image.
Actually
it
works.
A
You
can
look
at
the
documentation
site
over
here.
You
can
search
for
amp
image
and
there's
a
component
up
there,
and
there
is
attributes
you
can
use
to
customize
it
like
the
source,
the
source
set,
for
example,
and
there's
also
an
example
up
here.
If
image
in
action
there,
it
is
with
height
source,
and
you
close.
The
tag
actually
example
here
is
kind
of
better.
That
was
more
complicated
example.
The
fallback
image.
This
is
a
good
example.
A
So,
anyway,
the
first
exercise
you
have
of
is
to
add
or
sorry
change
your
image
tag
to
amp
image.
So
let
you
do
that
I
would
do
with
myself
also
while
you're
doing
it.
My
own
copy
of
this
animal
will
kind
of
reconnect
in
about
two
minutes
and
see
how
we've
done.
If
you
have
questions
about
this,
then
please
just
stick
him
in
the
chat.
A
A
A
A
A
A
All
right
Shannon's
got
something
there.
This
is
the
most
complex
word
I've
ever
seen
over
here
and
no
sorry,
Shannon's.
Actually
posting.
Okay,
it's
a
very
complex
words.
Over
here
Shannon
emerald,
say
bird
die
Asha
nice.
This
is
good.
This
is
valid.
Amp
I,
see
if
you're
coming
in
also
valid
amp
I
go
to
your
source
over
here,
I,
see
that
looks
good
and
image
and
it's
closed
all
right.
A
Let's
see
one
more
over
here.
You've
chosen
cheese
and
you've
got
two
images
here:
you've
gone
to
a
more
advanced,
clearly
advanced
thing
earlier,
very
good,
all
right,
so
this
is
successful.
Now
notice,
my
good
one
of
these
things
over
here.
Let's
go
to
my
instead
of
yours
for
a
moment.
Actually,
let
me
show
the
solution.
First
of
all,
before
I
go
somewhere
and
show
you
something
else,
because
you
didn't
get
it,
it
simply
looks
like
this
amp
image
and
the
source
height
and
the
width
and
close
it
and
you're
done.
A
Here's
that
analytics
slide
and
image
source
width
and
height
and
close
then
you're
done
so
notice,
though,
if
you
look
at
this
here
in
a
mobile
simulator
like
I,
will
now
has
a
bit
of
a
problem
image
because
off
the
side
of
the
screen,
the
image
actually
is
not
responsive.
We
didn't
say,
responsive
it's
just
whatever
it
image
usually
would
be,
and
it
goes
off
the
side.
If
I
go
to
the
responsive
mode
here
and
dev
tools,
I
can
see
here
it
is,
but
as
this
screen
is
smaller,
it
does
nothing.
A
I
will
show
you
mine
over
here
here.
It
is
look
at
that.
It's
responsive
to
a
certain
extent
on
screens
very,
very
small
I
think
our
CSS
makes
it
not
actually
responsive
anymore,
but
for
any
device
you
could
have
in
the
world
that
exists.
Currently
it
is
responsive.
It
is
just
amp
adding
things
in
there
to
make
it
responsive
automatically
any
questions
so
far.
A
Let
us
come
on
here
to
the
next
stuff.
There
are
more
ways
you
can
use
layout,
there's
a
fixed
one,
there's
an
intrinsically
responsive.
We
just
discussed
there's
a
variety
of
layouts
that
come
with
amp.
You
actually
could
look
at
this
over
here,
the
nice
nice
graphic
somewhere
every
one
of
these
pages.
A
It's
at
the
one.
There
should
be
an
example
somewhere
there.
It
is
so
you
can
see
some
things
over
here,
keep
the
height
fixed,
but
the
width
will
go
automatically.
It's
a
flexbox
one
fixed
where
nothing
changes
fill
where
the
consoled
Rijn
Philips
eyes.
If
the
container
we
just
did
responsive
over
there
there's
various
eye
all
kinds
here
for
various
different
kinds
of
needs.
Oh
that's
just
part
of
amp,
so
let's
go
on
from
there.
You
saw
you
tube
before
now.
Let's
do
it
ourselves.
So
YouTube
is
a
bit
different
because
it
evolves.
A
I,
see
a
question
over
here
to
give
the
entire
screen
width,
they're,
responsive,
I'm,
curious
to
see
your
example
over
there
and
see
what's
happening.
That
was
we
wanted
to
happen
or
not
what
it
happen.
A
It
could
be
that
you
have
the
CSS
at
a
certain
way.
The
responsive
thing
might
be
unable
to
make
things
responsive
up
to
a
certain
point,
because
CSS
will
then
hit
your
CSS
in
some
way.
That's
perhaps
unpredictable
some
of
your
length,
oh,
if
you
can
I,
can
take
a
look
at
that
to
amp
you
tube
is
not
much
more
complicated.
A
These
things
are
all
fall.
It
certain
similar
formula,
but
at
first
they're,
easy
to
find
here
in
M,
dev
Ambu
to
the
script
over
here
is
required
to
make
it
run.
Add
this
somewhere
in
the
head.
You
should
be
good.
You
see
also
examples
over
here
in
case
you
get
confused
by
how
this
is
supposed
to
work.
So
the
idea
over
here
is
to
add
this
at
the
bottom
of
your
site.
A
The
size
will
look
good
on
your
screen
there
480
by
270,
this
video
ID
will
look
nice,
but
any
video
you
want
to
use
is
fine
to
find
a
video
ID
on
youtube,
go
to
youtube,
look
up
some
sort
of
talk
or
video
or
whatever
you
want
to.
Oh,
it's
Joe,
Biden
and
you'll,
see
over
here.
This
V
equals
something.
A
A
A
A
Flexin
holy
howler
sounds
like
it's
sort
of
influenced
by
Harry
Potter.
Oh
there's
never
happened
before
every
workshop.
This
is
my
first
time,
rickrolled
I'm,
very
embarrassed
by
this
experience.
Actually,
my
my
son
now
loves
this
song.
He
plays
it
you're
your
cloud
rating
year.
He
plays
it
actually
for
fun,
thanks
for
a
different
one.
Here
at
least
that's
interesting
I'm.
Looking
to
nice
tasting
videos,
people
alright
so
well
done.
Youtube.
A
It's
just
that
over
here
again,
not
so
complicated.
If
you
chose
responsive
layout,
then
you'll
get
it
again
shrinking
and
growing
with
your
container
there,
which
is
kind
of
handy.
Let
me
show
that
over
here,
real
quick,
my
own
project
there
it
is,
and
it
please
will
be
responsive
yeah.
Look
at
that.
Video
is
responsive.
A
A
But
it
may
not
change
because
it
already
is
loaded
up.
I've
noticed
you,
images
are
taking
up
the
entire
width
of
the
screen.
I
think
I
might
actually
do
that
as
part
of
the
responsiveness
and
we
think
up
there
a
whole
container
size.
So,
even
if
the
image
is
very
small,
y'all
showed
this
over
here.
My
impression
of
the
responsive
images
is
that
it
take
up
the
whole
container
a
lot
of
to
them.
A
So
here's
your
images
here,
here's
the
div
that
they're
in
notice
it's
the
entire
screen,
so
the
images
here
I
get
resize
to
fill
the
entire
container
I
think
this
is
working
as
planned,
so
actually
width
and
height
don't
go
get
kept.
If
you
had
lady
calls
I
think
fixed
would
then
just
use
the
size
you
provided,
if
is
responsive,
that
I
will
try
to
size
it
along
with
a
container.
So
I
think
this
is
working
as
expected.
A
Let
me
go
in
here
a
little
bit
with
the
next
exercise.
There's,
of
course,
your
script
you
need
to
have
so
finding
components
is
also
important.
Documentation.
We've
seen
before
you
can
use
this
to
find
components
you
want
to
use
and
figure
out
how
to
actually
use
them.
This
is
a
bit
more
elaborate,
we're
gonna,
add
now
an
image
carousel,
which
is
also
called
an
image
slider.
A
Sometimes
that
thing
where
you
can
show
various
images
in
a
single
area
and
the
screen
and
swipe
between
images
with
your
fingers
or
click
on
button
is
to
change
the
images
also
call
it
a
carousel,
sometimes
and
amp
has
one
called
amp
carousel
that
allows
this
to
happen
automatically.
So
you
look
at
the
documentation
and
you
say:
okay,
what
does
this
thing?
Do?
How
do
I
use
it?
How
do
I
customize
it
various
questions
like
that?
How
do
I
style
it?
A
Let's
go
back
to
em
again
and
look
up
carousel
or
AB
carousel
you'll,
see
here
the
documentation
page
for
that
there
it
is,
there's
actually
two
versions
of
this
motor
over
here
you
see
this
looks
like
most
things,
an
amp.
It's
got
a
script
to
use
to
make
it
work,
here's
an
example,
width
and
height,
as
always
layout
if
desired.
If
you
want
some
extra
things
are
there
you
can
choose,
a
type
of
it
tip
can
be
either
slides,
which
means
you
show
one
slide
at
the
time
or
carousel.
A
Where
you
see
all
the
slides
you
because
well,
you
can
have
scroll
between
them.
There
is
also
an
autoplay
attribute,
there's
possible
delay.
You
can
loop,
there's
various
things
like
that,
so
customizing
this
you
can
do
with
JavaScript
v12,
but
it's
simple
as
to
use
HTML
instead,
which
we'll
do
just
now
to
customize
our
carousel,
so
the
carousel
can
contain
anything.
It
wants
to.
You
know:
text
videos,
images
are
pretty
commonly
used
so
we'll
do
this
example
over
here
we're
gonna
kind
of
do
this
sort
of
thing,
with
a
carousel
full
of
images.
A
Let's
go
ahead
over
here.
We
just
discuss
all
of
these
things.
Here's
an
example,
as
we
just
saw,
em
carousel
if
usual
attributes,
but
its
height
and
so
on,
contains
different
kinds
of
things
which
are
things
in
the
carousel,
and
let's
try
that
over
here.
So
the
goal
is
to
use
documentation
to
see
how
a
carousel
works
and
add
our
own
carousel
images
to
our
site.
A
Remember
to
find
images
and
Glitch
you
go
to
your
project
and
go
to
assets
and
click
on
something
over
here
and
there
it
is
and
there's
the
URL
you
can
use
so,
given
all
that
your
assignment
is
add
a
carousel
wherever
you
want
to
above.
The
video
looks
kind
of
nice,
make
it
responsive
if
you
want
to
choose
type
slides,
so
one
side
appears
at
a
time
because
it
loops
back
so
that
never
stops
the
size
of
412
by
3
or
9
will
look
good.
A
These
images
here
are
already
kind
of
good
for
that
size
it
listed
over
here,
but
any
images
can
work.
Anything
in
your
glitch
project
or
on
the
internet.
You
want
to
use
will
be
fine.
Does
that
make
sense
so
go
ahead
and
try
this
out?
If
you
have
questions,
try
the
documentation
or
just
ask
the
questions
in
the
chat.
A
A
A
A
See
these
major
mice
now
all
fit
in
the
same
area:
yeah
yeah,
it
is
easy.
Isn't
it
that's
kind
of
the
idea
is
that
those
things
that
would
seem
complicated
are
now
easy
and
if
he
was
like
next
is
there's
also
a
nice
amp
integration
with
next
is
it
makes
this
even
easier.
You
make
reacts,
Lao
amp
components
make
it
even
simpler.
A
A
We
got
some
pretty
quick,
we're
we're
going
pretty
fast.
We
can
maybe
go
even
further
here.
I
think
I
have
two
more
things
to
do.
One
is
simple
and
one
is
more
elaborate
and
gets
into
actually
event
handlers
and
those
kinds
of
things.
The
loop
attribute,
yeah,
here's
the
solution.
By
the
way
you
didn't
get
it
there
is
amp
carousel.
The
key
is
the
choose
type
equal
slides
to
have
that
one
slide
at
a
time.
Look
just
put
the
word
loop
in
there
and
it
loops.
A
There's
your
images
and
you're
all
done
and,
of
course,
adding
the
script
there
will
make
it
actually
work
so
to
find
new
components.
You
can
also
search
for
these
things
in
the
amp
reference
on
EPP
dev.
So
those
how
that
looks.
Let's
look
at
that
together
for
a
minute
and
components
you
see
over
here.
All
these
things.
On
the
left
hand
side.
These
are
all
the
components
camp
offers
by
the
way,
because
we're
open,
Jas,
you
can
make
more
of
these
things.
You
have
to
actually
it's
an
open
source
project.
A
If
that
you
know
get
permission
to
make
these
things
and
make
a
proposal
and
go
through
a
design
process,
but
adding
components
is
not
so
hard
really.
The
thing
is
that
everyone
can
use
them
out
there
in
the
world.
They
can't
just
be.
My
companies
can
put
it
customize
for
just
me,
that's
the
thing
everyone
can
use
everywhere,
but
notice
that
various
companies
have
made
their
own
components.
There's
a
bunch
of
Facebook
things
over
here,
there's
amp
just
for
github
or
gifts.
A
If
you
want
for
github,
there's
a
hulu
player,
all
kinds
of
things,
but
those
things
for
forms
for
fonts,
there's
animation
things
that
are
quite
nice.
All
kinds
of
options
exists.
So
I've
seen
the
chat
over
here
to
know
if
you're
getting
through
images
or
not,
you
can
use
analytics
and
amp.
If
that
was
your
question,
you
can
use
analytics
and
you
can
certainly
send
pixel
out
whenever
a
person
clicks
on
a
button
or
ever
they
change.
A
Images,
for
example,
analytics
are
a
whole
other
complex
topic
of
their
own,
but
lies
with
all
things
in
amp,
they're
done
through
a
components
called
amp
analytics
and
there's
various
vendors
that
support
native
analytics
and
you
can
figure
out
with
JSON.
If
that
isn't
enough,
you
can
again
add
your
own
JavaScript.
You
just
won't
be
valid
amp
anymore,
but
you're
go.
Let's
take
a
faster
page.
You
can
still
add
some
more
JavaScript
in
there
and
do
that
you'll
just
miss
out
on
the
advantages
of
the
cash
anyway.
A
Finding
components
look
in
the
reference,
so
we've
seen
this
before.
There
also
are
nice.
If
imagine
this
two
examples
in
here
with
code,
there's
a
little
playground
in
here.
Let's
say
they're
back
on
the
app
carousel
and
want
to
try
out
some
possible
different
things.
There's
a
link
over
here
to
the
playground
or
you
can
then
modify
the
code
over
here.
However,
you
like
and
see
the
result
over
here
so
I
think
this
isn't
a
supposed
to
be
a
responsive
type
equals
slides.
I
chose
loop
over
here
should
then
loop
forever.
A
All
the
play
was
a
thing
too
right.
Let's
try
autoplay
oops,
spelling
it
right,
also
matters
autoplay
and
because
the
arrows
appear
or
not
there,
you
go.
It's
not
a
plane
question
is
there
an
open
component
repository
is
moderated
by
your
team.
That's
a
good
question.
The
app
team
wants
to
be
involved
in
making
new
components.
So
again
you
can
make
an
issue
on
github.
People
will
comment
on
it
in
various
ways.
They
might
not
like
the
idea.
If
it's
gonna
be
I,
think
maybe
breaks
amps
performance
guarantees.
A
They
might
like
it
a
lot
that
one
of
our
big
goals
is
to
get
new
contributors
to
amp,
not
always
from
Google,
and
we
actually
have
a
collaborators
event
happening
with
open
Jas
on
Thursday
and
Friday.
You
should
say
you
should
stop
by
and
go
to
them
talk
to
me
some
people
and
see
if
you
want
to
contribute
the
amp
I
can
show
you
that
real
quick
on
our
friend
github,
the
otter
project,
has
its
own
account
HTML.
This
is
the
repository
over
here
there.
A
It
is,
has
full
pictures,
as
you
can
see,
about
all
kinds
of
things.
People
want
to
fix
something
about
web
stories,
something
about
amp
ads
and
not
amp
pages,
which
is
also
allowed
I.
Don't
know
why
it's
there,
some
things
you're
done
for
performance,
a
question
get
through
two
versions
of
your
site,
desktop
version
and
an
amp
version
that
is
commonly
done,
because
my
amp
first
came
out
that
was
required,
but
not
recommended.
A
If
you
can
avoid
it
because
it
means
you
have
two
versions
of
your
site:
that's
kind
of
a
hassle,
so
the
goal
of
amp
when
I
first
came
out
was
it
was
called
accelerated
mobile
pages
and
if
you're
a
publisher,
you
had
a
desktop
version
of
your
page
and
an
amp
mobile
version
of
your
page
and
they're
linked
together
by
this
tag,
let
me
show
you
how
this
actually
looks.
In
fact,
it's
still
part
of
amp
today,
install
amp
is
most
commonly
used.
Let
me
get
my
project
back
over
here,
so
notice.
A
I
didn't
mention
this
before
this
link
rel
equals
canonical
over
here.
The
way
this
was
done
was
you
had
two
different
pages
and
use
a
link
tag
so
that
search
engines
know
they
were
the
same
thing.
The
HTML,
the
app
page
that
link
equals
canonical
that
linked
to
the
mana
page
and
non
amp,
page
electrolytic,
z2m
HTML,
linking
back
to
your
amp
page.
So
you
had
this
desktop
and
mobile
version
together.
This
is
still
commonly
done,
but
it's
kind
of
a
hassle.
A
Here's
an
example
of
that.
Let's
see
if
I
can
find
this.
This
is
we
can
find
this.
This
is
Aliexpress.
You
know,
Alibaba
the
very,
very
large
Chinese
company,
the
big
EU
commerce
company.
Let's
go
to
their
mobile
site
over
here,
so
this
was
once
actually
an
EPS
aiight
before
let's
stay
here,
it's
no
longer
app
that
changed
non
AMP
you
can
see
over
here
is
normal-looking,
HTML
and
so
on.
But
if
you
go
to
click
on
one
of
these
categories
over
here,
you
get
an
app
page.
A
So
for
them
they
wanted
certain
features
on
the
home.
Page
amp
didn't
seem
to
provide.
They
left.
The
amp
behind
the
category
pages
are
still
amp
and
that's
fine
Delta's
web
pages
over
here.
So
if
I
go
to
a
product
page,
maybe
up
or
not,
amp
I,
don't
even
remember
what
it
is.
Now
we
are
still
amp
over
your
other
product
pitches.
A
So
amp
is
often
used
for
different
kinds
of
things:
different
kinds
of
ways:
it's
usually
easier
again,
just
to
make
it
so
there's
amp
all
the
time.
If
I
go
to
this
example
over
here,
let's
see
if
I
can
find
one
more
spontaneously
here.
This
might
just
saw
recently.
This
is
a
French
site
called
red
and
it's
amp-
you
can
see
over
here
all
the
app
stuff,
lightning
bolt
and
so
on,
and
it's
desktop
and
it's
mobile.
It's
all
amped
other
pages
frequently
are
not
that
way.
A
Let's
go
to,
for
example,
Google
search
again
and
look
for
news
articles
again
about
maybe
whatever
the
soup
was
about
pixels.
That
was
a
good
example
class
action.
Google!
Alright,
let's
go
over
there
to
the
side
if
I've
googled
page
this
here
is
an
app
page,
it
spring
actually
in
the
app
viewer.
So
let's
take
it
out
of
the
up
viewer.
Let's
just
look
at
the
amp
version
taking
out
of
the
Google's
amp
viewer,
here's
the
app
page.
You
can
see
again
and
dev
tools.
If
I
zoom
here
it
is
an
amp
page.
A
If
I
go
to
the
desktop
version,
it
probably
won't
be
up
anymore
at
all.
If
I
take
out
this
word
amp
at
the
end
of
the
URL
I'm
betting
I'll
just
get
ya
none
at
page,
so
it
looks
similar.
It
probably
has
more
features.
It
probably
has
more
honestly
we're
tracking
things
on
it,
because
those
are
what
people
often
have
more
trouble
with
amp
as
getting
other
tracking
pixels
and
things
on
there,
but
yeah.
A
So
this
is
a
page
which
is
the
amp
on
mobile
and
not
amp
on
desktop
anyway
angularjs
you
can
use
angularjs,
but
you
probably
wouldn't
want
to
because
well,
you
can
do
angular
on
the
server
side.
If
you
want
to
thank,
you
is
on
the
client
side,
it's
gonna
be
a
lot
of
JavaScript
and
things
angular
does
amp
will
do
anyway,
although
if
you
have
a
lot
of
complicated
interactions
on
your
screen
and
it
gets
a
little
more
cumbersome
in
a
certain
point,
it's
a
good
question.
A
You
come
to
the
talk
tomorrow,
I'll
be
talking
about
JavaScript
and
amp.
How
that
works?
We
can
discuss
it
today.
If
you
want
it's
called
amp
script
lets
you
actually
do
have
JavaScript
and
amp
within
a
web
worker,
but
usually,
if
you
have
a
complicated
front-end
framework,
it's
not
I
think
you
use
with
that.
Most
of
the
time
I
do
recommend
for
more
complicated
interactions
with
an
amp
is
to
use
and
make
small
like
pre-act.
It
uses
very
little
JavaScript.
That's
very
small,
bundles,
that's
a
whole
other
topic
we
can
discuss.
A
If
you
want
to
limitations
like
animations
and
complex
Styles.
Amp
has
limitation
that
use
valid
amp
that
you're
a
CSS
kicked
over
75k,
so
it
isn't
too
slow.
So
there's
a
CSS
limit
for
amp
for
valid
amp.
If
doesn't
matter
to
you,
it
doesn't
matter.
Animation
is
actually
a
really
good
or
not
some
components
like
amp
animation.
The
support
really
advanced,
animations,
actually
I'll
show
you
an
example
of
that
I
go
to
Epcot
dev
over
here.
I
can
see
a
couple
of
articles
that
people
have
made
that
have
nice
animations.
A
A
A
Imported
in
all
browsers,
very
much
so
the
app
team
makes
sure
that
every
browser
with
so
a
market
share
of
1%
or
more
that
amp
works
in
the
last
two
versions
of
the
browser
and
flawlessly.
It
also
works
in
other
browsers
too,
but
they
don't
guarantee
perfection
so
it'll
work
on.
You
know
ie
like
9,
for
example,
but
maybe
not
as
nicely
as
on
edge.
For
example,
I.
You
live
in
a
supported,
ya,
Firefox,
Safari,
all
the
major
browsers
to
the
support.
It
is
not
by
any
means
a
thing
for
Chrome
for
Google
products.
A
A
Let's
go
back
and
do
one
more
exercise
and
then
talk
about
am
script
a
little
bit
and
for
those
who
are
curious
about
that
and
then
we'll
go
if
you
have
time
the
final
exercise,
which
involves
making
interactive
menu
using
amp
events
and
actions.
So
let's
go
back
over
here:
let's
go
away
from
github.
If
you
want
to
get
involved,
then
please
message
me:
you
know
privately
and
say
hello
and
I'll.
Tell
you
how
to
come
by
on
Thursday
and
Friday
so
back
over
here
and
by
example,
this
one's
pretty
easy.
A
Actually
this
is
about
how
to
find
a
component,
so
another
you're,
more
advanced
at
your
amp
usage
I,
want
you
to
find
this
by
yourself.
So
this
is
a
component
that
just
lets
you
add
social
sharing
links
simply
so
I
want
you
to
add
to
the
bottom
of
your
page
over
here.
Some
social
sharing
links,
look
at
the
docs
find
the
right
component
to
do
it.
If
you
use
this
div
with
a
class
social
bar
make
the
size
of
each
button
44
by
44.
A
A
A
A
A
If
you
didn't
get
this
yet
it's
pretty
straightforward,
once
you
get
the
right
component,
I
use
this
div
class
equals
social
bar
and
then
for
amp,
social
share
components
and
the
height
and
the
width
and
there
they
were
there's
a
quest.
Various
ways
to
do
this.
You
can
also
use
a
link,
you
know
an
SVG
image
or
whatever,
but
this
works
nicely
here.
It
is
on
the
screen,
any
questions
about
that.
A
We'll
ignore
the
video
over
there.
It
isn't
that
bad,
a
song
really
just
way
he
danced.
This
is
really
disturbing
I.
Really
they
got
there
and
nothing
was
what
your
planned.
He
just
got
there
and
kind
of
did
this
little
dance
spontaneously
and
they
shot
this
in
a
day
and
there
it
was
there's
the
buttons,
maybe
even
changes
the
SS
time
to
make
it
so
they're
further
apart.
A
So
back
the
questions
over
here,
how
much
control
to
Sam
provide
over
at
the
developers
like
debugging
and
testing,
and
so
on
its
provides
you
the
same
control
as
any
other.
You
know
JavaScript
framework
that
exists
out
there.
It's
mostly
up
to
you.
You
have
to
debug
in
the
usual
way
that
you
would
do
testing
I
mean
the
backend
belongs
to
you.
The
front
end
is
what
you
use
amp
for
so
any
kind
of
usual
message.
You
have
to
get
Salemba
Shion
users,
you
know,
do
you
staging
in
production
environments?
A
Let's
see
one
more
exercise,
but
first,
let's
talk
about
am
script
for
a
few
minutes.
Amp
script
I
had
this
talk
on
it
tomorrow,
I,
which
I
can
summarize
for
you
pretty
quickly.
It's
basically
is
in
JavaScript
in
workers.
So
the
idea
is
that
if
you
know
about
web
workers,
they've
been
around
for
a
long
time,
but
aren't
used
very
much
because
web
workers
lack
access
to
the
Dom
web
workers
can
only
talk
to
the
main
thread
by
passing
messages
back
and
forth.
A
It's
actually
it's
good
for
amp,
because
the
amp
wants
to
control
the
main
thread.
Just
once
you
have
JavaScript,
you
run
yourself
that
will
dad
and
take
over
the
main
thread
and
make
things
very
slow.
So
for
amp
workers
are
a
wonderful
solution.
Unless
you
take
JavaScript
lets,
you
run
this
in
a
worker
and
then
end
can
always
disallow
mutations.
That
would
block
the
screen
in
some
way
or
make
things
change
too
much.
It
can't
do
the
things
that
all
of
JavaScript
does,
because
it's
essentially
simulating
JavaScript's
Dom
API
within
its
own
JavaScript.
A
A
A
Okay,
here
it
comes:
what
is
the
release
cycle
of
these
components?
I
forget
they
changed
it
recently.
It
was
every
week
or
two
and
they
then
made
it
a
little
bit
quicker,
so
they
could
turn
out
new
versions
more
quickly.
They
have
a
whole
series
of
different
releases
and
ways
they
work
and
it's
a
whole
page
on
github
that
describes
all
these
things.
A
Alright,
so
yeah
webworkers.
So
this
is
my
luck
for
tomorrow
summarized
in
about
two
minutes
where
workers
are
this
thing,
isn't
that
nice,
but
they
only
pass
messages
back
and
forth
from
the
main
thread.
All
code
runs
in
its
own
thread.
Workers
lacks
access
to
the
Dom,
so
am
scrip
makes
this
possible
this
ant
script
component.
By
giving
you
this
thing
called
worker
Dom,
which
is
an
open
source
library
wrapped
in
Apps
Script.
A
A
Use
a
component
called
Apps
Script
and
the
Dom
inside
the
EM
script
over
there
like
this
hello
over
here
it
gets
passed
to
the
worker.
The
worker
then
has
the
stuff
that
simulates
the
parts
of
the
Dom
API.
So
you
can
then,
in
your
own
script
over
here.
Do
normal
Dom,
API
things
and
modify
the
API,
add
event
listeners
and
do
things
like
that,
as
you
will
so
there's
an
example
over
there.
A
A
Actually
I've
got
over
here
looks
like
I've
got
a
breakpoint
set
in
this
one.
You
can
see
how
there
it
is
magically
all
the
stuff
over
here
about
worker
Dom.
Actually
this
probably
too
small
to
see.
Let's
make
this
bigger,
so
hold
this
worker
Dom
stuffs
in
here
and
then
there's
actually,
your
age
you're
dropping
up
at
the
bottom
and
there
this
document
here
actually
is
it's
not
the
real
document,
but
a
simulation
done
by
app
scripts.
A
A
A
Let's
do
this
again,
so
a
basic
example
over
there
there's
am
script
and
then
finally
join
use
a
framework,
because
I'm
sort
of
you
can
they're
often
a
little
bit
too
big
to
fit
within
limitations.
That
amp
provides
most
to
use.
Things
like
pre-act
pre-act
makes
things
very
small,
so
I
have
an
example
over
here
using
pre-act
doing
the
same
kind
of
thing
with
hello
world
and
people
that
make
work
or
DOM
and
am
script
also
contribute
to
pre-act
and
know
very
well
the
API
that
the
pre-act
uses
to
make
its
changes
to
the
Dom.
A
So
it's
very
well
supported,
actually
use
the
framework.
Practice
is
a
great
choice.
You
can
also
use
react
or
view
or
something
else,
just
the
bundles,
getting
sort
of
big,
sometimes,
which
may
be
contrary
to
the
spirit
of
amp,
okay
that
scripts
in
a
very
small
nutshell:
if
you
wanted
a
triumph
script
out,
I've
got
an
awesome
new
tutorial
on
it
that
you
could
try,
which
I
will
now
look
for
you
for
look
for,
for
you
an
app
that
does
everything
seems
to
have
a
script
if
you're
curious
about
these
things.
A
A
Try
this
over
here
or
if
you
want,
try
this
out
it's
kind
of
neat.
It
isn't
as
Covina's
writing.
Java
scripts.
You
know
just
can't
open
the
rest
of
the
world,
but
it
does
this
an
interesting
way.
That
makes
it
very,
very,
very
performant,
back
to
the
questions
here.
What
is
the
adoption
rate
of
amp
amp
is
adopted
pretty
widely
used
to
count
the
number
of
pages
out
there.
They
stopped
counting
at
a
certain
point,
because
counting
is
kind
of
hard
like
what
is
a
page.
You
know
what
is
a
unique
page.
A
A
couple
years
ago
there
were
about
55
million
domains
using
it
and
they
had
like
6
billion
pages.
That's
increased
since
then
I'm
pretty
sure,
because
or
companies
are
using
it
and
because
also
the
WordPress
plug-in
has
got
more
more
used
and
WordPress
is
a
very
big
part
of
the
web.
But
a
lot
of
major
publishers
use
it
in
many
countries.
A
It
depends
where
you
are
like
in
US
Western
Europe,
most
major
publishers
use
amp
another
countries,
some
places
it's
more
used
for
e-commerce,
like
we
have
examples
from
Brazil
and
India
it
South
Africa
are
ecommerce
sites
that
use
amp,
there's
various
places
that
use
it
out.
There
sure
curious,
see
more
examples
of
amp
in
the
world.
I've
got
some
here.
A
A
A
A
A
My
valid
amp
is
useful
and
now
let
us
build
a
menu,
so
a
menu.
Sorry
about
these
boxes
that
have
appeared
here
somehow.
So
it's
not
like
things
were
them
before
and
use
event
handlers,
and
you
use
actions
that
result
from
events
and
if,
for
example,
let's
say
you
were
using
good
old-fashioned,
jQuery
I
wanted
to
have
a
button.
You
clicked
on
that
took
this
div
and
hit
it.
A
You
want
to
hide
a
div,
you
go
by
the
divs
ID
and
you
would
say
button
on
all
an
attribute
equals
tap,
:
warning
dot
hide.
How
this
looks
over
here
is
again.
Onna
tribute
is
used.
The
first
thing
there
in
quotes
is
tap,
which
is
the
name
of
the
event.
Amp
takes
the
click
event,
and
you
know
other
kinds
of
events
that
involve
touch
and
combines
us
free
you
into
a
tap
event
and
then
an
ID
of
an
element
like
warning
and
a
dot
and
an
action
like
hide.
That's
how
it
works.
A
Oh
there,
it
is
so
we'll
try
this
ourselves
now,
we're
gonna
add
a
menu
to
our
site,
what
they
have
the
events
and
actions.
It's
gonna
involve
a
component
that
makes
this
menu
appear
and
disappear,
and
then
we'll
use
actions
and
events
to
make
two
buttons
work.
When
is
the
hamburger
menu
itself
and
two
is
the
clothes
I
have
to
call
for
a
minute
I'm
gonna,
you
walk
off.
Pardon
me.
A
A
We
use
a
component
called
a
sidebar
who's
whose
content
is
hidden
until
it's
opened
up.
You
can
use
various
actions
to
open
up
a
sidebar
with
the
given
ID
like
open
or
toggle.
You
can
close
it
with
the
action
called
clothes.
That
makes
sense.
Let's
look
at
this
in
the
documentation
for
a
minute
here.
Let's
look
up
sidebar,
because
that
would
give
us
what
we're
looking
for
here.
A
I
am
script,
the
NAP
sidebar
and,
of
course
you
can
use
the
am
script
to
do
this
instead
by
adding
JavaScript
to
add
advant,
Handler
and
so
on,
and
so
forth
am
sidebar
has
a
script
you
use
over
there,
and
then
it's
got
things
you
can
use
to
customize
it
like
the
side.
It
comes
from
left
or
right
side
attributes
like
this
and
there's
an
example
here,
probably
somewhere,
there's
an
example,
for
example,
with
the
app
you
want.
Sidebar
you
gotta
have
layout.
A
He
goes
no
display
because
at
first,
when
you
first
load
it
up,
it
should
be
invisible.
You
can
choose
what
side
you
want
to
go
from
and
it
just
contains
whatever
it
contains.
It's
just
basically
a
component
that
contains
HTML,
which
will
that
appear
or
vanish
as
sidebar
appears
or
vanishes,
and
then
for
the
events
and
actions
themselves.
A
Here's
some
examples
over
here,
so
here
they
have
a
button
that
actually
shows
a
sidebar
button
on
equal,
stop,
sidebar,
that's
actually
the
default,
actually
sidebar
dot
open
would
also
work
resided
bar,
not
toggle,
and
then
to
close
it
you
use
a
closed
event.
So
if
you're
stuck
look,
there's
a
documentation
of
a
sidebar,
you
can
also
look
up
actions
and
events
which
discusses
this
in
more
detail.
I'm
sure
I
can
find
it
by
this
kind
of
search
actions
and
events.
A
A
The
upside
for
component
works
best
if
it's
the
direct
child
of
the
body,
because
the
amp
sidebar
will
add
this
opaque
thing
over
the
whole
screen
and
it
looks
good
if
it's
just
there
for
the
parent,
so
I
recommend
adding
a
right
below
the
body
tag
use
id
sidebar
one
in
class
sidebar,
it
look
nice
that
way,
then
this
hybrid
has
a
nav
element
like
any
kind
of
menu
might
have
in
the
world.
It's
gonna
unordered
list
with
some
things.
A
A
So
here,
gonna
put
in
the
chat
the
head
with
your
menu
button.
This
is
more
complicated
than
we
did
before.
So,
if
you
get
stuck,
please
feel
free
to
say
this
in
the
chat,
because
I
didn't
tell
you
how
to
actually
do
it.
I
just
told
you
kind
of
a
lot
about
how
to
do
it
and
I
find
the
rest
of
the
things
you
need:
where's,
the
X
here's
next.
A
A
I
would
soon,
as
myself
I
see
here
a
question:
where
do
you
paste
the
buttons
put
the
two
buttons
in
the
chat?
Hopefully
you
got
those
two
things
from
Shan
and
I
pasted
a
little
hamburger,
menu,
extended
character
and
a
big
X.
If
that
was
the
question,
if
that
wasn't
the
question,
then
let
me
know:
oh
I,
all
paste
that
here
again.
A
A
A
What
else
could
I
have
missed
here
back
in
my
link
paste
thing
now,
as
you
I
couldn't
ever
communicate
with
you?
Okay,
I'm
gonna
paste,
some
more
things
in
the
chat.
Now
that,
if
you
have
our
questions,
then
please
let
me
know.
A
A
A
The
list
over
there
is
available
at
the
actions
and
events
site
over
here
actions
and
events,
page
I,
guess
it
lists
various
events.
You
can
use
and
actions
you
can
take
in
those
events,
so
also
various
components
throw
their
own
events
like,
for
example,
for
inputs
if
there
was
a
change
event
carousels
through
a
slide
change
events.
There's
things
like
that.
A
A
As
with
various
things
in
the
world,
F
isn't
really
hard.
It
just
requires
getting
used
to
how
you
do
things
once
you
do.
You
can
make
sites
really
quickly
that's
kind
of
the
power
of
amp.
Although
your
customization
is
limited
without
using
M
script,
you
can
do
pretty
standard
interactions
pretty
fast
after
a
while.
A
A
A
A
A
A
A
You've
got
some
errors
here,
but
yeah
I
guess
the
amp
sidebar
wants
to
be
wants
to
have
this
no
display
layout,
because
that
guarantee
they
won't
get
shown.
I
guess
container
seems
to
work.
Just
throws
an
error
message
and
these
rule
tab
index
things
here
for
accessibility,
okay,
you're
saying
it's
updated
now:
yeah
you're
a
star
there.
It
is
alright,
congratulations!
A
One
more
has
come
in
also,
oh,
look
at
this.
It's
in
the
right
spot
events
and
left
of
the
Chico
shoes
bicycles,
there
was
an
X
yeah.
This
is
all
good.
Doing.
Difference
from
mine
I
think
is
that
I
have
a
probably
a
different
area
which
you
get
to
CSS
activated,
so
my
sidebars
underbody,
exactly
because
that's
where
it
likes
to
be
I
think
yours
we're
all.
A
In
the
same
places,
then
I
have
my
classical
sidebar
the
day
of
class
nutbar
trigger
for
the
button
over
here
and
then
the
header
is
right
below
that
the
class
header
bar
class
navbar
trigger
all
those
things
there
and
what
else
I'm
missing
over
here
there's
the
X
right.
There
was
the
X
button
here
and
there's
the
other
button
over
here
and
I
see
emerald
stay
BER
Basha!
A
A
A
There's
again
the
header
inside
there,
the
div
with
hamburger
menu
and
then
the
magical
thing
on
equals
tap
sidebar
one
toggle
has
seemed
to
have
gotten
there.
The
amp
sidebar
is
there.
I
use
I
equals
left,
I
use
a
classical
sidebar
for
I
CSS
to
activate,
and
then
the
div
with
the
X
in
it.
With
this
tap
sidebar
one
toggle,
it
could
have
been
closed
just
as
well
and
of
my
new
content.
That's
really
about
it
and
then,
of
course,
having
the
JavaScript
snippet
there
in
the
head
to
make
it
all
work.