►
From YouTube: Privacy and Eleventy - Jozi.js September
Description
Art of War - Privacy by Design
Fadzayi Chiwandire (@fadzayic)
As Sun-Tzu highlighted, "If you know the enemy and if you know yourself, you need not fear the result of a hundred battles. If you know yourself but not the enemy, for every victory gained, you will also suffer a defeat. If you know neither the enemy nor yourself, you will succumb in every battle."
As an Organisation, Programmer, Designer, how well do you know yourself and the products you build? How well do you understand the threats your products face and how effective the security and protection measures you have put in place to safeguard your software are?
Privacy by Design ensures that good privacy practices are built into an organisation's decision-making, as well as the design and structure of products, processes, and services. The idea is to bake security and privacy measures into the code of any product from the early stages of development.
Today, organisations see cybersecurity as the responsibility of the IT department and privacy as the responsibility of the Legal Department. Applying Privacy by Design means, having a cross-functional team of Legal, Design, and IT experts working together to make sure the products the organisation is building meet all the security and privacy requirements. This helps companies shift from the fire-fighting approach to a more proactive approval, thus improving their digital resilience.
Build better websites with Eleventy
Mike Geyser (@mikegeyser)
We have lost the art of building websites. Don't get me wrong, we build for the World Wide Web all of the time. We build Apps and Components and Services and Content Management Systems, but we seldom just build websites. A surprisingly large amount of what we build can (and probably should) just be HTML, CSS and a (small) sprinkling of JavaScript. We have this stigma against building static pages, which is largely unfounded. Well, enter Eleventy, the static site generator that we deserve.
Join me as I show you how to build simple, easy, engaging websites using Eleventy. We'll look at the basic premise of the tool, as well how to customise it to suit your needs. By the end of this talk you will have a newfound respect for static websites, and be armed with everything you need to build better websites.
❓Q&A: slido.com - #18273
📢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/272821704/
A
You're
live
hello,
everyone
and
welcome
to
jersey,
chairs
september
stay
safe
tonight.
We've
got
some
amazing
amazing,
amazing
speakers,
but
before
we
get
into
that,
let's
take
a
look
at
some
house
rules
well
before
we
get
there.
We
know
that
it's
spring
now
and
if
you're
like
me,
you're,
probably
struggling
to
breathe
just
stay
safe,
stay
at
home,
there's
a
less
chance
of
you
catching
any
of
the
bad
stuff.
That's
all
out
there.
A
With
that
said,
we
miss
seeing
all
of
your
amazing
amazing
faces
just
a
quick
announcement.
Jersey
jazz
has
officially
over
2
000
members
now
on
meetup.com.
So
we're
really
really
super
excited
to
to
see
all
of
you
soon.
We
will
be
going
back
to
our
venue
once
it
is
safe
to
do
so
and
in
two
course.
At
this
point
we
don't
know
exactly
when
that
will
be,
but
we'll
be
sure
to
keep
all
of
you
up
to
date
once
we
know
ourselves,
so
our
code
of
conduct
is
pretty
simple,
can
be
summarized
into
four.
A
A
We're
all
learning
and
learning
is
an
amazing
journey,
be
there
for
people
around
you
and
help
them
grow.
That's
it
it's
important
for
everyone
here
to
work
together
as
we
do
in
putting
this
together.
We
would
also
expect
the
same
from
everyone
who
participates
with
us.
We
encourage
communication.
We
encourage
people
to
get
in
touch
with
us
and
with
each
other,
but
that
said,
do
not
be
spammy,
don't
be
spammy
and
let's
respect
each
other.
So
generally,
I
think
the
first
point
covers
our
entire
code
of
conduct
succinctly.
A
So
josie
just
is
put
together
and
organized
by
a
council
of
wizards.
We
even
have
the
hats
to
put
wizards,
and
these
are
incredible.
People
that
are
always
willing
to
to
connect
with
all
of
you.
Their
twitter
handles
are
there
on
your
screen
and
this
video,
since
it's
streaming
on
youtube,
will
be
made
available
immediately
after
this
live
broadcast.
So
more
than
welcome
to
come
back
and
take
a
look
at
these
people's
handles
connect
with
us
on
twitter.
A
Thank
you,
of
course,
to
microsoft,
for
being
our
meetup
sponsor
so
jose
chase
is
about
community.
It's
about
you,
speaking
to
other
web
developers
around
you.
We
would
like
to
hear
from
you
we're
very,
very,
very
beginner
friendly.
So
even
if
you've
never
spoken
before,
please
please,
please
submit
to
talk
in
order
to
start
being
a
speaker.
You
need
to
actually
start,
and
I
think
this
is
probably
one
of
the
best
places
that
you
can
start.
A
A
Should
you
need
to
so
please,
please,
please
submit
to
talk,
and
just
in
case
you
miss
one
of
these
live
broadcasts,
you're
more
than
welcome
to
go
to
our
youtube
channel
josiejs
to
watch
our
past
talks,
because
I
know
that
I've
just
said
a
lot.
You've
got
qr
codes
on
your
screen
that
you
can,
of
course,
pause
and
rewind,
so
that
you
can
get
a
direct
link
to
those
two
things
very,
very
important
things.
A
Now
for
the
remainder
of
this
session,
you
can
comment
and
ask
questions
on
slido
use
this
qr
code
to
get
access
to
slido
via
the
direct
link
and
our
event.
Id
is
18273
as
it
is
shown
on
your
screen.
Please
please,
please,
connect
with
us
once
you've
asked
your
questions
at
the
end
of
these
sessions.
I
will
ask
our
amazing
speakers,
your
questions,
so
that
they
can
actually
help
us
and
answer
your
questions.
A
So
with
that
said,
our
first
speaker
is
actually
going
to
be
a
almost.
I
won't
say
it
partially,
but
it's
fully
recorded,
but
in
a
way
that's
quite
interesting.
So
our
first
speaker
is
fazai,
who
will
be
talking
about
privacy
by
divide
by
design,
rather
so
the
art
of
all
privacy
by
design
by
fatsai.
B
C
Hi
guys,
my
name
is
fatzai
and
I'm
a
web
developer
at
1.4
consulting
and
I'm
also
studying
cyber
security
at
edith
cohen
university,
all
the
way
in
perth
australia,
which
is
one
of
the
reasons
why
we've
had
to
pre-record
the
session,
because
I
think
I'm
like
six
hours
ahead
of
you
guys
so
by
the
time
you
watch
this
it.
Probably
it's
probably
like
1am
right
now,
my
end
yeah.
C
So,
but
it
also
made
me
realize
that,
as
as
as
professionals,
I
think
we've
we've
all
experienced
clients
who
trust
us
way
too
much
with
the
information.
Personally,
I
can
say
that
I've
had
clients
who've.
Given
me
access
to
their
email
addresses
voluntarily,
they
just
say:
oh
my
email
just
get
into
my
email
and
get
what
you
need
and
they
give
me
their
past,
their
username
and
password
and
then
in
the
same
birth.
C
They
say,
oh
by
the
way,
that's
the
same
email
like
that's
the
same
password
that
I
use
for
everything
else,
and
I'm
thinking,
oh
wow,
so
including
your
bank
and
thank
goodness,
I've
been
raised
right.
I
can
just
imagine
a
cyber
criminal,
getting
a
hold
of
those
details
and,
being
you
know,
given
access
to
all
all
these
platforms.
C
Thank
you
have
a
field
day.
So,
given
that
our
clients
out
there
trusted
with
trust
us
so
much,
it
just
makes
us
realize
that
we've
got
an
ethical
and
a
moral
obligation
to
protect
our
users
from
cyber
attacks.
You
know
just
to
protect
their
dignity
and
to
protect
their
their
information
that
they
they
put
out
there
via
the
the
software
that
we
build,
and
so
the
privacy
by
design
framework
is
one
way
we
can
protect
our
users
because
we
need
to
to
anticipate.
C
C
I
think
one
of
the
one
of
my
favorite
books
that
I've
read
is
the
artifact
by
sansu.
So
was
a,
I
think
he
was.
He
was
a
chinese
general
and
he
wrote
a
book
and
he's
got
one
of
these
famous
quotes
where
it's
he
just
says.
If
you
know
the
enemy
and
if
you
know
yourself,
you
need
not
fear
the
result
of
a
hundred
battles
and
this
concept
has
been
used
in
cyber
security.
C
A
lot
because
what
it
means
is,
you
need
to
know
the
software,
the
systems,
the
products
that
you're
building,
you
need
to
know
them
inside
out
and
the
vulnerabilities
that
are
within
those
soft
those
systems,
and
you
also
need
to
know
the
kind
of
threats
that
are
out
there.
That
could
come
and
take
advantage
of.
The
vulnerabilities
are
within
your
system
and
if
you
know
both
your
system
and
the
threats
that
are
out
there,
you
know
how
to
protect
yourself.
C
So
what
is
privacy
by
design
by
design
is
an
approach
to
project
planning
that
integrates
principles
of
privacy,
protection
at
the
very
beginning
of
and
throughout
any
organizational
activity,
including
the
software
that
you're
building
any
product
that
you're
building.
You
embed
the
privacy
measures
from
the
beginning,
as
I
said
before,
it
ensures
that
good
privacy
practices
are
built
into
an
organization's
decision
making.
C
C
C
So
the
framework
has
been
around
for
quite
a
while.
It's
been
there
since
the
early
90s,
and
it
was
devised
by
dr
ann
coverkin
she's,
the
former
privacy
commissioner
of
ontario
in
in
canada,
and
her
aim
was
to
address
the
common
issue
of
developers
applying
privacy
fixes
after
the
project
is
completed,
because
if
you
really
think
about
it,
developers
are
only
developers
do
what
they're
told
to
do
right.
They
are
following
instructions.
C
They
have.
They
don't
have
a
problem
with
embedding
privacy
measures
into
any
product
as
long
as
it's
there
in
the
spec
doc.
As
long
as
it's
there
on
their
task
cards,
they
will
do
it.
The
problem
that
she
found
was
that
it
comes
from
the
top
for
as
long
as
the
powers
that
be
do
not
make
it
a
priority,
and
they
don't
make
it
a
mandatory
requirement
from
the
get-go.
It's
just
not
going
to
happen.
C
Privacy
by
design
is
proactive
and
not
reactive,
meaning
that
it
anticipates
and
prevents
privacy
breaches
before
they
happen,
and
this
is
achieved
by
having
methods
in
place
that
help
recognize
poor
privacy
designs,
the
possible
outcome
and
correcting
any
negative
impact
before
they're,
okay,
in
a
systematic
in
in
a
systematic
and
in
and
innovative
way,
it
should
also
be
a
default
setting.
So
that
means
that
your
user's
data
should
automatically
be
protected
in
any
given
system.
C
So,
just
a
few,
a
few
standards
that,
like
bare
minimum
standards
that
we
can
follow,
is,
for
instance,
informing
the
users
that
their
data
will
be
collected,
how
it
will
be
collected,
how
it's
going
to
be
stored
and
who
have
access
to
this
data,
especially
if
you're
going
to
be
giving
if
you're
going
to
be
granting
access
to
third-party
organizations,
because
the
users
could
be
okay
with
you
accessing
their
data.
But
are
they
really
okay
with
the
other
organization
that
you're
in
partnership
with
accessing
that
same
designers,
that
same
data?
C
C
We
also
need
to
embed
privacy
into
the
design,
so
it
needs
to
be
seen
as
a
co-function
of
any
given
system.
It
shouldn't
come
as
an
afterthought
and
say:
oh,
the
product
is
done,
but
we
need
to
add
this
one
privacy
measure
to
it.
It
should
that
should
have
been
thought
of
from
the
get-go,
as
mentioned
before
it.
It's
it
comes
before
the
fact
right.
It
needs
to
be
done
right
at
the
beginning.
C
C
We
always
need
to
incorporate
end-to-end
security
in
the
products
that
we
develop,
because
robust
security
measures
are
vital
to
privacy
from
beginning
to
to
the
end.
In
you
know,
ensuring
all
data
is
securely
retained
and
securely
destroyed
at
the
end
of
the
process,
when
we
no
longer
need
the
the
data
and
providing
what
is
known
as
a
cradle
to
grave
secure
life
cycle
management.
C
There's
also
this
great
need,
as
well
in
privacy,
by
design
to
be
visible
and
transparent
in
our
processes,
and
this
is
essential
to
establishing
accountability
and
trust
between
the
organization
and
the
stakeholders
and
and
the
users
as
well,
and
the
process
should
be
open.
It
should
be
well
documented,
independently,
verifiable
and
should
be
able
to
go
under
under
scrutiny
at
any
given
and
lastly,
privacy
by
design
is
user-centric
respect
for
users,
privacy,
because
the
best
approach
is
one
that
consciously
puts
the
interests
and
the
needs
of
the
individual
users.
C
First,
it's
really
important
that
we
empower
users
by
allowing
them
to
play
an
active
role
in
the
management
of
their
own
data,
and
this
means
that
the
user
needs
to
always
have
access
to
their
data
and
give
consent
wherever
their
data
is
concerned
and
the
greater
the
sensitivity
of
that
data.
The
clearer
and
more
specific
the
quality
of
that
consent
should
be,
and
also
keeping
in
mind
as
operators
that
that
concerns
can
be
withdrawn
at
any
point,
even
at
a
later
stage.
C
But
they
need
to
have
access
to
that
data
and
have
a
channel
to
be
able
to
correct
the
data
that
we
are
storing.
And
you
know,
respect
for
user
privacy
extends
to
the
need
for
interfaces
to
also
be
human-centered
and
user-friendly,
so
that
users
can
make
informed
and
privacy
decisions-
and
we
see
this-
we
see
this
with.
You
know
like
acceptance
and
conditions
with
tick
to
to
give
your
concerned
for
you
for
us
to
share
your
data.
Those
interfaces
that
we're
building
need
to
communicate
this
quite
thoroughly
and
clearly
to
the
users.
C
C
We
need
to
have
clear
privacy
and
data
sharing
notices
and
making
sure
that
those
notices
are
up
to
date,
especially
if
there's
a
change
in
law.
If
there's
a
change
in
policy
include
opt-ins
for
for
apps
and
and
websites
that
do
have
some
kind
of
subscription
avoid
social
media
registration
where
you
can,
especially,
if
you're,
actually
collecting
very
sensitive
data
for
very
sensitive
purposes
like
banking.
C
C
C
So,
in
addition
to
that,
there's
also
stuff
like
password
hashing
insulting,
and
this
is
at
a
database
level
data
send
boxing,
which
is
pretty
much
just
having
a
separate
environment
on
a
network
that
mimics
end
user
operating
environments,
and
this
this
just
allows
you,
as
an
operator
to
safely
execute
suspicious
code
without
risking
harm
to
the
host
device
or
network
pseudonymization
and
anonymization
of
data,
which
is,
as
mentioned
before,
removes
any
identifiable
data.
So
it
just
removes
information
in
a
data
set
that
identifies
a
specific
individual,
and
this.
C
Encryption
of
data
addressed
and
data
in
transit
data
data
address
is
just
information
that
is
inactive
and
is
stored
physically
in
any
digital
form,
and
data
in
transit
is
data
that
is
sent
over
a
network.
So,
for
instance,
when
you
are
performing
a
transaction
within
your
banking
app
that
is
very
much
data
in
transit
or
like
instant
messaging,
like
whatsapp,
that
is,
data
in
transit,
so
that
encryption
is
quite
vital,
which
is
also
why
we
use,
like
you,
know
the
https,
and
all
that
it's
just
all.
C
C
C
So
with
that,
and
in
conclusion
I
have
attached
here-
I've
included
rather
some
resources
that
I
found
really
helpful.
The
web
application
security
by
andrew
hoffman.
This
is
a
free
download
actually
on
the
ngnix
website,
and
this
is
really
good,
because
it
also
gives
you
some
code
snippets
that
you
can,
that
you
can
use
for
your
web
applications
and
all
that
and
also
the
south
africa's
poppy
act
and
the
seven
foundational
principles
I'll
be
sharing
this
on
my
twitter
handle
right
about.
C
Well,
I'm
going
to
upload
it
to
speaker
deck
and
share
the
link
to
the
slides
on
on
on
on
twitter
yeah.
So,
yes,
thank
you
so
much,
I'm
fatsai
and
I'm
a
developer
and
my
twitter
handle
is
advance
ic
and
you
can
follow
me
and
you
know
just
ask
questions
like
I
said:
I'm
really
not
an
expert
in
the
field
I'm
still
studying,
but
I
do
read
a
lot
about
it.
Thank
you.
B
A
So
if
your
application
is
going
to
ask
for
my
id
number
and
my
blood
type
and
my
location
and
my
dna,
it's
going
to
raise
some
suspicions,
if
all
I'm
doing
is
trying
to
take
a
picture
of
myself.
So
you
also
want
to
retain
your
user's
day
up
next,
we
have
the
incredible
my
crazer
who
often
says
to
me
when
I
speak
about
writing
a
blog,
and
I
keep
telling
him
about
all
these
amazing
platforms
that
I
found.
He
always
has
one
response
to
me:
you're
a
web
developer.
B
Thank
you
very
much
for
the
introduction.
Let
me
let
me
get
started
here
start
my
slides
and
yes,
I'm
going
to
hopefully
show
you
how
to
build
better
websites
using
something
that
I
find
personally
delightful,
which
is
11t
now
before
we
get
there.
Who
on
earth
am
I
well,
and
you
probably
know
that
I'm
a
organizer
of
josie
js.
B
B
I
work
at
a
company
called
tes
whose
mission
is
to
empower
teachers
globally
so
that
every
child
has
a
good
education
and
it's
a
it's
a
nice
site
to
work
on
the
nice
product,
but
my
primary
responsibility.
There
is
making
sure
that
late
on
a
sunday
night
when
teachers
don't
have
anything
to
teach
the
next
morning,
they
can
go
and
find
some
stuff
to
give
children
class
tests
or
something
so
that's
me
so
the
thing
that
I've
been
talking
about
that
I
enjoy
working
with
so
much
11t.
What
is
it?
B
B
Now
I
appreciate
that
I
filled
the
title
with
a
very
loaded
term,
which
is
better
and
what
is
better,
what
makes
a
better
website-
and
this
is
completely
subjective.
This
is
my
perspective
and
yours
will
be
very
different
and
just
keep
that
in
mind.
But
from
my
perspective,
a
website
is
better
when
it
is
simpler,
so
structurally,
simpler
in
terms
of
the
software
that
you
run
in
terms
of
how
it's
wired
up
and
how
it's
put
together
that
it's
easier.
B
So
it's
easy
to
build,
something
which
reduces
the
friction
to
writing
good
code
and
that
it's
faster,
and
this
is
an
also
an
ambiguous
phrase
like.
Is
it
faster
to
write
or
is
it
faster
to
run
and
in
the
context
of
11t?
I
really
think
most
both
it's
very
quick
to
give
you
a
solution
that
is
very
fast
for
your
users
and,
like
their
logo,
is
a
possum
being
lifted
by
a
balloon.
How
is
that
not
better?
B
Anyway,
there
are
a
bunch
of
people
who
trust
it.
There
are
a
whole
bunch
of
fancy
people
whose
pictures
and
profiles
you
may
notice
in
the
bottom
there
if
you
go
and
look
really
really
hard
while
pausing
this
on
video
and
there's
a
whole
bunch
of
really
big
companies
that
trust
110
for
their
domains
and
their
properties.
B
The
cern
chrome
has
several
properties,
css
tricks,
ff
khan
academy
netlify.
There
are
a
lot
of
people
who
build
really
really
big,
really
important
websites.
That
believe
that
this
is
the
way
that
one
should
build
big
and
important,
so
we're
going
to
take
a
a
little
bit
of
a
a
step
back
for
the
moment
and
we're
going
to
look
at
well
in
terms
of
rendering.
Oh,
I
see
there's
a
little
bit
of
a
slide
like
this
sorry,
but
in
terms
of
rendering
what
options
are
available
to
you.
Okay.
B
On
the
other
side
of
the
network
connection.
Now
we
often
see
the
performant
way
of
not
dealing
with
that
problem
as
being
server-side
rendering,
where
all
of
the
work
is
still
on
cpu,
so
we're
still
runtime
generating
a
whole
bunch
of
html
on
every
single
request
and
we're
sending
that
data
down
the
pipe
to
the
user.
B
And
this
gives
us
the
the
greatest
balance
from
a
performance
perspective.
It
gives
us
pretty
good
rendering
performance.
It
gives
us
pretty
good
dynamism
in
terms
of
being
able
to
tailor
the
the
html
we
send
back
on
a
request
by
request
basis,
but
it's
not
as
dynamic
as
client
side
and
then
on
the
other
side,
when
we
talk
about
static
and
static,
is
a
really
bad
name
in
terms
of
being
an
unchanging
website.
So
it's
very
clearly
the
least
dynamic,
because
we
have
to
change
code
for
things
to
change
the
difference
being
twofold.
B
First,
that
it's
stored
on
disk
and,
second,
that
it's
really
really
fast
because
we're
taking
the
cpu
out
of
it
entirely
now
anybody
that's
looked
at
any
kind
of
performance
or
scalability
stuff
would
know
that
from
a
cost
perspective,
so
a
ransom
sense.
Cpu
is
far
more
expensive
on
disk
or
what
far
more
expensive
than
disk.
So
if
we
can
get
away
with
putting
things
and
serving
things
off
of
disk
rather
than
having
to
dedicate
really
expensive
cpu
time
to
it,
it
gives
us
a
really
cheap
solution.
B
Moving
on
from
that,
when
we
look
at
how
things
are
built
well
for
client-side
code,
we
end
up
with
a
really
complex
architecture,
relatively
speaking,
and
the
reason
why
it's
complex
is
because
we
have
to
deal
with
things
like
consistency
when
we
change
data.
How
do
we
know
that
when
we
go
to
the
next
page,
that
data
is
changed
security
right,
because
we're
running
all
of
the
code
on
the
client
side
on
somebody,
somebody
untrusted
this
machine?
B
Now,
in
contrast
to
that,
the
server
side
simplifies
some
of
those
assumptions
at
the
cost
of
being
operationally
far
more
complex.
We
now
have
to
worry
about
deployment
and
like
how
many
machines
do
we
deploy
to,
and
how
do
we
go
about
getting
running
code
and
runtimes
and
executables
operating
on
a
server?
How
do
we
watch
that
server
and
make
sure
that
the
servers
that
we're
paying
for
are
actually
still
running
and
how
do
we
scale
on
demand?
B
So
how
do
we
make
sure
that
we've
got
enough
of
those
servers
and
you
know
make
sure
that
we've
got
enough
cpu
time
and
then
finally,
the
static
or
pre-rendered
stuff
typically
has
very
complicated,
tooling
to
deal
with
this
stuff?
How
do
you
build
a
website
and
change
your
website
dynamically
so
that
you're
just
getting
static
files
at
the
end
of
the
day?
B
Looking
urls
that
look
like
a
very
fancy
router
without
needing
the
complicated
piece
of
equipment,
that
is
a
router
in
your
your
stack
and
you
can
change
bits
and
pieces
around
and
still
provide
a
customizable
output
based
off
of
whatever
input.
It
is
that
you
want
the
next
part
that
makes
11t
11t
is
the
multiple
templating
languages
that
get
supported
because
it
supports
11
out
of
the
box.
B
Now,
I'm
pretty
sure
that
the
fact
that
it
supports
11
templating
language
languages
and
that
it's
called
11t,
probably
like
the
origin
of
the
name
or
something
along
those
lines,
but
like
it's
just
speculation,
the
default
that
it
it
uses.
If
you
don't
specify
anything,
is
liquid
syntax,
which
is
a
very
convenient
markdown
templating
language,
which
is
a
very
convenient
way
to
write
content
that
gets
generated
into
html,
and
it
makes
very
heavy
use
of
something
called
front
meta,
which
is
basically
yaml
structure
that
sits
at
the
top
of
a
markdown
file.
B
B
It's
just
a
utility
that
tries
to
do
as
little
as
possible
and
get
out
of
your
way
and
the
emitted
output
has
no
javascript
in
it
now.
I
know
that
might
not
seem
like
a
great
thing
in
terms
of
wanting
heavy
lifting
frameworks
that
do
a
lot
for
you
and
you
get
a
lot
for
free,
but
there's
also
no
surprises.
So
if
you
care
about
performance
and
you
care
about
functionality,
it's
never
going
to
trip
you
up
by.
B
So
with
that
said
and
done,
let's
go
to
a
demo
quickly
and
let
me
see
if
I
can
show
rather
than
tell
so,
let's
hide
this:
let's
hide
zoom.
We
don't
need
zoom,
wait.
I
do
need
zoom.
I
just
don't
need
this
window
of
zoom
cool.
Let's
put
that
back
and
let
me
get
my
code
up
all
right.
So
what
I've
got
here
is
a
very,
very
simple,
empty
application.
B
Content
talk
about
content,
you
save
that
and
then
we
run
11t
again
and
then
you
will
see
on
the
left
hand,
side
it
spat
out
an
underscore
site
directory
by
default
and
in
that
site
directory
we've
got
a
folder
called
hello
and
inside
that
folder
called
hello.
We've
got
an
index.html
okay
and
that
index.html
has
a
little
bit
of
html
fragment
that
gets
derived
from
the
marker,
markdown,
sorry,
and
if
I
then
go
npx
11t
serve.
B
I
will
get
a
url
that
I
can
go
to
and
if
I
drag
it
across
here,
I
get
nothing,
but
that's
because
we
don't
have
anything
at
the
root
of
the
site
right
where
we
have
stuff
is
under
the
hello
index.html
directory.
So
if
I
were
to
go
forward,
slash
hello,
you
would
see
the
website
and
we
get
a
nice
url.
We
get
some
content
and
it's
pretty
easy
right
now.
B
As
lucky
said,
like
blogs
are
cool
right.
All
the
cool
kids
are
building
blogs
nowadays
and
want
to
build
their
own
blog.
So
I
think
it's
a
very
accessible
example
for
us
to
start
with
to
look
at
how
to
do
stuff
in
11
team,
so
we're
going
to
create
a
simple
blog,
so
we're
going
to
have
a
posts
directory
and
instead
of
our
posts,
directory
we're
going
to
go
and
create
something.
B
That's
creatively
called
post
one
dot
md
and
we're
gonna
go
first
one
and
I'm
gonna
just
smash
some
content
in
here
using
lorem
gibson
right.
This
is
a
I
don't
know
some
sort
of
dystopian
fiction,
blog
of
some
kind.
Let's,
let's
pretend
it's
that
and
then
I'm
going
to
create
another
file,
that's
going
to
be
post,
2,
dot,
md
and
then
we're
gonna
go.
Writing
is
hard.
B
And
then
I'm
going
to
smash
some
more
content
in
there,
whatever
okay
and
you'll,
see
that
every
single
time
I
hit
save
it
keeps
reloading
and
generating
stuff
right.
So
I'm
going
to
move
this
out
of
the
way
a
little
bit
because
you
can
see
it
moving
there
and
in
our
sites
directory
there's
now
a
posts
directory,
and
there
is
a
post
one
and
a
post
two
and
for
post
one
we've
got
that
markup
and
for
post
two
we've
got
that
markup.
B
B
B
B
So
we're
going
to
do
that
and
now
importantly,
it
spats
out
some
stuff,
but
that
data
doesn't
exist
here.
Okay,
it
doesn't
render
marker
markdown
it
strips
it
out
and
it
uses
it
from
a
metadata
perspective
and
how
we
can
use
this
is
we
can
say:
well
we
want
to
have
a
route
that
shows
all
of
our
blog
posts,
so
I'm
going
to
in
the
root
of
the
application,
create
or
the
root
of
the
site,
create
a
new
file
and
that's
going
to
be
posts,
dot
njk
right.
B
B
Okay
and
I've
forgotten
something
I'm
going
to
reverse
it,
but
I'll
show
you
in
a
moment
what
I've
forgotten
and
then
we're
going
to
end
four
four
now
this
should
be
very,
very
familiar
to
people,
and
I
think
this
was
actually
based
off
of
ginger
right,
which
is
the
python
templating
language.
So
there
you
go
sheena,
there's
some
more
python
for
you.
B
If
anybody
wants
to
know
why
I've
got
the
emphasis
on
python,
it's
because
sheena's
got
the
keynote
at
pycon.
You
should
totally
go
okay,
so
we're
going
to
go
post.url
and
now
this
url
is
because
everything
is
a
page
in
this
collection
right.
So
url
is
something
that
11t
is
going
to
provide.
It
understands
where
this
thing
is
going
to
live.
Okay
and
in
terms
of
the
stuff
that
we
provide.
We
know
that
post
has
some
data,
which
is
in
the
front
matter
and
of
that
data.
B
We
want
the
title:
okay
and
then
we're
also
going
to
go
post
dot
date
now
date
doesn't
date
is
something
that
11t
understands
and
we
override
it
in
context
of
the
front
matter.
So
it's
not
dedicated
data
for
us.
Okay.
Now,
if
I
reload
this
and
I
go
to
posts,
nothing
will
appear.
Okay
and
nothing
will
appear
because
I
haven't
added
anything
to
this
posts
collection,
because
for
me
to
do
that,
I
would
need
to
go
and
tag
it.
B
So
I
would
have
to
say:
tags
is
posts
and
tags
posts
and
we
can
have
this
be
anything
that
can
be
as
many
as
we
want,
and
it
will
add
this
item
to
every
collection
that
it
matches.
So
it's
a
really
simple
scalable
thing,
and
now
we
will
see.
Writing
is
hard,
but
I
saved
the
other
one.
I
don't
think
I
did.
No,
let
me
save
it
reload
and
there
are
two
posts,
but
now
we've
got
something
here
where,
like
the
date,
looks
awful
and
that's
definitely
not
what
we
want.
B
So
this
is
not
magic.
This
stuff
is
just
javascript.
So
in
terms
of
the
date
I
can
just
go
well.
I
want
to
local
local
date
string
like
that
right,
which
is
just
a
javascript
function
that
exists
on
date,
and
it
does
exactly
what
we
expect.
You
can
do
whatever
date
format
you
want
and
you
can
write
your
own
functions
and
you
can
go
wild
and
you
can
even
register
some
like
this
reverse.
B
That
is
a
check
specific
one,
okay,
but
it
still
looks
awful
and
if
we
were
to
look
at
the
output,
this
is
not
even
that
index.html,
that's
not
valid
html.
We
need
a
head
section,
we
need
body,
we
need
tags
around
that
stuff.
The
browser
is
just
making
it
look
like
it's
a
proper
html
page,
so
for
this
by
default,
levante
expects
something
called
include
includes,
directory
and
inside
that
includes
directory.
We
can
create
a
layout.njk
right
and
that
layout.njk
is
just
going
to
be
a
like
our
html.
B
The
only
difference
being
that
inside
here
we've
got
a
special
variable
called
content
which
we're
going
to
render
and
we're
going
to
say
well,
this
is
safe,
don't
html
escape
that
content
and
if
you've
worked
with
server-side
templating
languages,
this
is
relatively
familiar.
Okay
and
we
can
access
the
title
which
we
put
in
those
other
posts
and
we
can
do
a
bunch
of
other
stuff,
but
that's
enough
for
the
moment
and
now
to
use
this
we
can
inside.
B
B
Oh
no!
I
saved
did
I
save
I
didn't
save.
I
didn't
save
this
one,
but
it
does
have
the
html
content
around
it.
I
just
haven't
styled
anything
yet,
but
it
has
created
it
now.
This
also
applies
to
the
nunchuck
stuff
right,
so
we
can
create
front
meta
in
our
nunchucks
template,
which
is
really
really
useful.
B
B
Random
awesome
awesome
random.
I
know
there's
a
specific
sequence
that
you're
supposed
to
put
adjectives,
but
I
I
don't
know
I
can't
remember
it:
okay
and
then
inside
here
we're
going
to
go
well
forward.
Slash
is
going
to
be
home
right
then
we're
going
to
have
forward
slash
posts,
be
posts,
damn
it
and
then
forward
slash
ships
is
going
to
cryptically,
be
ships,
okay
and
how
we
would
use.
This
is,
let's
say
in
our
layout
at
njk.
We
want
to
include
this
on
every
single
site,
so
we're
going
to
go.
B
B
B
There
it
is
one
plus
two
now
must
have
been
a
caching
issue:
okay,
hey
that's
gonna,
make
a
point
for
me
later
on.
Okay,
so
let's
just
put
a
pin
in
that
one.
Jerry
you'll
remind
me
when
I
get
to
the
caching
point:
okay,
but
now
we've
just
sort
of
slapped
shots
thrown
a
whole
bunch
of
data
all
over
the
show
right
because,
like
we,
don't
really
want
to
at
every
single
thing,
go
and
specify.
Well,
this
is
this
is
how
what
our
layout
should
look
like.
B
B
Save
that,
let's
remove
it,
okay,
it's
removed
from
there
and
it'll
still
still
work
right.
We've
still
got
the
exact
same
layout,
there's
still
posts,
everything's
cool
and
there's
more
stuff
that
we
can
do
about
it.
So
let's
say
we
want
all
of
our
posts
to,
even
if
I
say
well,
post
2.
I've
decided
that
my
naming
structure
is
awful
and
I'm
going
to
go
2020-07-01
dash.
B
That's
the
directory
structure
or
the
file
structure.
I
want
to
follow,
but
now
the
directories
have
changed
right,
so
my
url
would
have
changed
and
I'm
putting
information
in
that.
I
don't
really
care
about
in
terms
of
my
user's
experience,
so
I
can
create
something
called
a
permalink
for
that
and
I
can
just
say
well:
everything
in
this
directory
is
going
to
permalink
and
that
permalink
is
going
to
be
forward,
slash
posts
using
the
title
that
comes
from
its
own
data
and
then
put
a
trailing
slash
so
that
it
creates
an
index.html.
B
Now
this
title
needs
to
be
safely
escaped,
so
I'm
going
to
just
say:
well,
slug,
I
think
it's
like
it's
like
sluggo
sluggify,
slug,
all
right,
so,
let's
just
space
that
properly.
So
we're
not
sloppy,
and
I'm
just
going
to
trash
this
again
so
that
you
can
see
the
change
in
contents
on
the
left
hand,
side.
B
B
B
Layout.Njk
now
what
this
has
done
is
it
said
well
for
every
layout
there,
for
every
site,
there's
going
to
be
or
every
page
in
the
site,
there's
going
to
be
a
layout
variable,
a
layout
data
item
and
it's
going
to
be
set
to
layout.njk,
and
that
means
I
can
go
and
remove
the
layout
from
here
and
everything
across
the
site
will
by
default,
use
the
exact
same
item.
Okay,
it's
not
there,
it's
not
there,
it's
not
there
and
it
was
never
on
hello.md
right.
We
never
change
that.
B
B
B
B
B
B
This
is
really
really
important,
tooling
feedback,
because,
as
your
site
grows
bigger
and
it
becomes
more
data
oriented,
it
tells
you
where
your
time
is
being
spent
in
build
okay,
which
we'll
also
get
to
a
little
bit
later
and
I've
I've
linked
a
bunch
of
ships
here,
but
that
could
just
as
easily
be
a
headless
content
management
system.
It
could
be
the
wordpress
api,
that's
giving
you
blog
post
data,
for
example,
sake
that
you're
building
a
bespoke
front
end
on
top
of
anyway.
B
B
B
B
Unfortunately,
what
we
will
have
to
do
to
get
the
ship
name
is:
we'd
have
to
go
ship,
dot,
data,
dot,
ship
dot
name
because
we
caught
we
aliased
that
to
ship,
which
is
a
data
item
and
I've
just
added
ship.
Two
naming
things
is
hard.
Okay,
so
like.
If
you
judge
me,
for
my
variable
names,
that's
fine,
but
now,
hopefully
what
happens
is
if
I've
forgotten
or
if
I've
remembered
to
save
everything.
B
We
can
use
our
ship's
url
and
get
a
collection
of
ships,
and
then
we
can
go
to
like
a
millennium
falcon
or
an
x-wing
there.
We
go
12
and
a
half
meters
crew,
one
that
makes
sense
okay.
So,
let's
move
on
now,
we've
fallen
completely
into
the
defaults
of
11
t,
and
I
think
you
can
get
pretty
far
with
it.
If
you
just
want
to
be
told
how
to
do
things,
but
it's
not
the
only
way
it's
really
really
flexible
and
we
can
just
by
creating
a
dot.
B
B
That
means
that
when
we
start
up
our
browser
over
our
cli
over
here,
it's
going
to
pass
in
the
defaults
into
the
11t
config
and
then
we
can
override
everything.
So
if
we,
for
example,
say
had
a
css
directory,
so
let's
go
sorry
not
file
new
folder
css
and
in
fact,
let's
do
that.
The
opposite
way
around.
Sorry,
let's
comment
that
out,
let's
add
a
css
directory.
B
Let's
call
this
main.css
main.css,
okay
and
let's
just
go
like
body
is
going
to
be
what
with
800
pixels
margin
auto
or
something
like
that,
and
then
we
will
see
that
when
we
save
it,
it
doesn't
copy
our
css
through
to
our
site
by
default.
It
only
recognizes
its
own
templates,
so
we
can
then
use
the
elevate.js
stuff
to
say.
Well,
I
also
want
you
to
copy
the
css
directory
or
some
wild
card
that
matches
stuff
and
then
the
css
get
copies.
B
It
gets
copied
across
using
a
reliable
url,
and
we
can
now
in
our
layout
over
here,
go
well
like,
let's
go
and
link
to
css
and
that's
going
to
be
css
main.css
and
I
don't
even
know
see,
that's
not
the
one.
I
don't
even
know.
If
it's
going
to
apply.
I
think
my
css
is
wrong,
but
it's
there
right,
so
it's
linked
through
and
the
style
isn't
applying
onto
the
body.
B
But
that's
because
of
my
css
problem,
not
because
the
thing
doesn't
exist:
okay
and
there's
other
stuff
that
we
can
do
here
right.
So
we
can
change
the
defaults,
that's
fine.
We
can
add
filters
for
like
nunchucks
and
the
like.
We
can
create
short
codes
which
is
relevant
for
some
of
the
other
templating
languages,
our
own
tags.
We
can
write
custom
javascript
functions
that
we
can
then
use
inside
every
single
tele
element
and
register.
B
B
So
what
you
can
do
to
to
trigger
that
is
on
significant
changes
and
either
in
your
data
or
in
your
application.
You
can
just
trigger
an
immediate
redeploy
straight
to
production,
and
this
gives
you
super
super
reliable
performance
and
that's
because
the
stuff
is
completely
static
anyway,
and
it
being
completely
static
means
that
you
get
this
really
nice
blast
radius,
because
if
your
data
source
breaks
so
your
api,
let's
say
the
star
wars.
Api
goes
down.
B
We
may
not
be
able
to
generate
a
new
site
with
new
data,
but
the
site
keeps
working
because
it's
just
static.
So
if
you
care
about
sites
being
like
a
hundred
percent
up,
then
this
is
a
really
really
good
example.
Whereas
if
the
star
was
api
went
down
and
we
were
server
side
rendered,
that
would
start
500
erroring
on
every
single
user
visit
and
then,
finally,
because
everything
is
super
static,
we
can
make
the
maximum
use
of
caching
and
then
not
only
use
like
the
browser
cache.
B
We
can
use
content,
delivery
networks
and
every
single
edge
device
in
between
so
every
networking
switch
or
routing
device.
That's
prepared
to
cache.
We
can
give
it
http
headers.
That
say
well
cache
this
thing
so
that
you
never
have
to
ask
me
again
and
it
gives
that
user
and
other
users
foster
experiences.
B
So,
let's
work
through
an
example
of
what
I
mean,
let's
say,
for
example,
say
you
had
a
github
repository
and
in
that
github
repository
on
every
single
commit,
there
was
a
build
using
like
github
actions
or
something
that
triggered
a
deployment
to
wherever
your
website
was
hosted
like
other
github
pages
or
something
else
you
could
use
something
called
well.
Let's
say
how
you
would
before
I
get
into
what
you
could
use
people
link
to
whatever
your
blog.
B
But
if
you
use
something
called
web
mention,
which
is
an
indieweb
product
which
says
it's
go,
it
understands
how
to
crawl
these
various
sites.
It
can
go
and
find
mentions
of
the
thing
that
you've
registered
beforehand,
and
it
will
tell
you
about
it
that
somebody
has
spoken
about
you
or
somebody
has
linked
to
a
particular
article
and
that
can,
for
example,
say
call
a
webhook
that
gets
exposed
via
your
build
process,
in
this
case
github
actions.
B
And
that
means
that
when
somebody
mentions
your
website,
it's
going
to
rebuild
your
website
and
immediately
deploy
to
live
and
include
that
mention
in
the
the
bottom,
either
as
a
comment
or
as
a
something-
and
this
wasn't.
This
is
not
my
idea.
It's
a
paradigm
that
exists
and
there's
a
really
really
good
article
by
a
fellow
gde
that
has
a
very
detailed
walkthrough
of
how
you
can
use
web
mentions
and
11t
in
conjunction
now.
B
The
stuff
is
not
a
nirvana
and
it's
not
without
its
own
problems,
and
I
think
the
first
problem
is:
we've
just
discussed
static,
markup
right
and
at
some
point
in
time,
you're
going
to
want
some
sort
of
javascript
and
you're
going
to
want
to
share
javascript
across
your
site,
and
that
means
that
you
need
to
set
up
a
very
smart,
webpack
config.
For
example,
sake:
that's
going
to
bundle
appropriately
across
all
of
your
various
endpoints
or
entry
points.
B
Sorry,
because
every
single
html
file
is
a
new
entry
point
to
your
site,
you're
going
to
need
to
figure
out
how
to
create
suitable,
common
bundles
and
the
the
bold
to
production
or
bull
to
deploy
approach.
Really.
It
works
really
well
with
data
so
like
when
your
data
changes.
If
you
can
trigger
a
re-index
and
rebuild
your
site,
it
doesn't
work
really
well
with
combinatorial
effects.
So
when
every
one
data
item-
let's
say
a
star
wars,
ship
had
10
languages
associated
to
that
data
item
that
it
could
be
translated
into.
B
That
means
that,
as
your
data
set
increases,
your
build
times
have
this
exponentially
large
increase
time,
which
is
not
great
and
then
cycling
back
to
the
caching
problem
that
we
had
earlier
with
the
page
reloading
you
have
to
deal
with
caching
appropriately,
because
you
are
responsible
for
sending
those
headers
and
making
sure
that
your
site
is
appropriately
cached.
Otherwise
your
users
are
going
to
see
stale
data
and
there's
a
reason.
Why
there's
a
joke
about
caching
being
the
hardest
problem
in
computer
science?
A
A
B
B
Now
the
magic
part
is
using
a
web
hook
or
something
else
to
on
data
change
or
on
a
schedule,
rebuild
the
site
and
then
fetch
fresh
data.
So
if
you've
got
a
content
site
for
example,
sake,
why
don't?
If
it
takes
you
a
couple
seconds
to
regenerate
the
the
current
day's
news
right?
So
if
the
build
takes
you
seconds,
then
why
don't
you
every
15
minutes
go
and
fetch
the
data
and
then
rebuild
the
site.
That's
sort
of
what
I
was
getting
at
and
in
the
web
mentions
example
that
I
had
that
was
it.
B
It's
web
mentions
itself
that
can
call
a
webhook,
so
it
tells
you
when
some
things
change
and
then
you
just
trigger
a
bull,
but
that
could
be
a
pub
submission
message
for
people
that
live
in
a
distributed
systems
world.
It
could
be
a
trigger
on
a
database
right
that
somebody
in
the
backend
system
has
changed
a
record
and
the
trigger
fires
and
says
cool
well
now
go
and
call
the
thing
and
do
a
thing.
A
Absolutely
great
answer,
I
think,
you've
you've
you've
changed
my
understanding
of
what
static
sites
are
and-
and
the
next
question
speaks
a
bit
to
that.
So
the
next
question
reads
what
happens
with
11t
when
you
want
to
save
data,
let's
say:
take
an
e-commerce
store
as
an
example.
How
would
I
save
my
product
orders.
B
Awesome
two
separate
concerns
right
how
you
present
your
product
and
how
you
then
consume
the
request
for
orders
are
different,
so
you
would
still
need
to
put
an
api
behind
this
that
dealt
with
that
or
you
would
need
to
have
something
that
you
would
form
post
to
and
then
redirect
away
from.
So
it's
not
a
great
fit
for
just
out
of
the
box
being
a
full
end
to
end
experience.
The
same
way
that
server
side
rendered
applications
are
pretending
to
be.
B
A
B
So
I
would
use
that
as
a
guiding
principle,
and
the
thing
is
that
angular
and
angular
and
react
are
not
a
replacement
for
for
any
kind
of
server-side
stuff
right.
They
don't
exist
by
themselves.
Anybody
who's
had
to
deploy
an
angular
application
to
some
production
site
and
actually
have
at
work
when
the
user.
Refreshes
knows
that
you
need
other
stuff
as
well,
and
this
just
gives
you
really
bare
bone
skeleton
to
hang
that
off
of.
A
B
That's
a
great
question
and
I
forgot
to
mention
it
because
I
was
hurrying
you
totally
shouldn't.
You
should
use
one
of
the
incredible
11t
blog
starters
that
have
all
of
the
things
set
up
out
of
the
box
that
you
can
just
clone
that
and
start
plugging
into
wherever
you
care
about
right
there.
By
and
large,
really
high
quality
you
can
pick
which
one
you
want
and
they've
got
various
levels
of
plumbing
and
just
don't
pick
one.
That's
got
all
of
the
bells
and
whistles
because
you
don't
need
it.
A
A
That's
where
we
will
keep
you
updated
on
the
upcoming
chosen
js
meetups,
big
apologies
for
not
having
one
last
month,
but
you
will
be
very
very
happy
to
know
that
we've
actually
got
speakers
for
almost
the
rest
of
the
year.
Think
we
still
need
one
or
two
speakers.
So
please,
please,
please
submit
to
talk
and
let's
get
you
speaking
into
this
community
that
we
all
love
so
much
with.
That
said,
if
there's
nothing
else
from
the
rest
of
the
council
of
wizards,
I
think
we'll
say
good
night
on
that
note.