►
From YouTube: UX Showcase: Introduction to the Static Site Editor
Description
Michael Le – This is the Static Site Editor
A
A
A
Traditionally,
this
is
done
with
a
content,
management
system
or
CMS.
Some
of
these
CMS's
you
may
be
familiar
with
such
as
wordpress
or
adobe
experience
manager,
and
if
we
dive
inside
the
content
management
system,
we
can
see
that
the
it's
usually
made
up
of
four
parts.
There
is
a
place
where
you
can
edit
and
publish
your
content.
The
content
is
then
stored
in
some
kind
of
relational
database,
usually
such
as
my
sequel
database.
Now
how
CMS's
work
is
that
when
you
get
a
request
for
a
new
page,
they
serve
the
HTML
pages
dynamically.
A
So
what
does
that
mean?
That
means
that
it
takes
the
content
that
is
in
storage
and
does
some
processing
to
determine
which
views
it
should
be
rendering
it
does,
is
processing
and
then
serves
those
HTML
pages
back
to
the
reader.
Essentially,
it
generates
HTML
pages
on
demand,
but
in
the
last
couple
of
years,
there's
been
a
new
way
of
approaching
this
problem.
A
Instead
of
serving
the
pages,
dynamically
there's
been
a
big
push
for
serving
static
pages
on
a
CDN.
The
CDN
is
a
content,
distribution
distribution
network
and
that
allows
us
to
spread
the
content
to
where
the
reader
is
so
that
they
can
request
files
faster.
But
these
pages
don't
just
appear
on
the
CDN.
A
Our
own
handbook
is
a
very
good
example
of
a
static
site.
It
uses
markdown
to
generate
content
and
it's
used
by
everyone
here,
a
good
lab
to
understand
the
way
we
work,
how
we
work
and
what's
going
on
in
the
company,
so
one
of
the
goals
of
our
team
is
to
make
the
creation
and
editing
of
content
in
the
git
lab
handbook
without
writing
a
single
line
of
code,
but
to
get
there
we're
going
to
improve
how
this
experience
works
right
now.
So
let
me
walk
you
through
this
right
now
currently
for
editing.
A
We
either
use
the
web
IDE
to
make
small
changes
or
large
changes.
Some
people
create
content
locally
so
that
they
can
preview
stuff
on
their
local
device
on
their
local
computer
before
pushing
it
up
into
storage,
which
we
use
git
here.
This
is
where
all
the
more
talent
files
lives
and
through
our
pipelines,
we
generate
the
HTML
pages
using
a
static
site
generation,
engine
generator
framework
called
middleman
at
the
end
of
the
pipeline.
A
So
that's
why
we're
building
a
static
site
editor,
because
when
we
go
back
to
our
values,
what
we're
looking
at
is
this
idea
of
everyone
can
contribute
if
our
handbook
is
such
an
integral
part
of
how
we
work
in
our
culture.
What
we
want
to
do
is
to
make
this
experience
a
lot
easier
so
that
everyone
can
contribute
easily.
A
So
enough
of
me,
just
talking
around
the
concepts,
I'm
not
gonna,
show
you
where
the
group
is
at
with
the
static
site
editor
and
then
that
will
segue
into
what
we
have
in
the
future.
So,
let's
jump
into
a
quick
example
that
I
have
right
here
here
is
my
jam
store
and
homage
to
the
jam.
Stack
and
if
I
jump
into
view
products
I'm
taking
to
a
second
page,
where
I'm
going
to
start
editing
some
content
so
on
this
page
here
is
about
strawberry
jam,
cool
I'm,
gonna,
go
and
start
editing.
A
This
page
right
now,
which
is
some
background
on
this
this
site
and
that
I
created,
was
based
off
a
template
that
you
can
create
and
right
now
in
gala,
when
you
start
a
new
project
and
that's
a
static
site,
editor
project
on
top
of
middleman.
So
if
you
look
in
some
of
the
templates,
you'll
find
them
right
there
and
then
you'll
be
able
to
experience
this
static
site
editor,
and
the
beauty
of
this
is
that
what
we're
trying
to
do
is
take
away
the
need
to
know
the
syntax
for
markdown.
A
For
example,
if
I
was
gonna,
add
a
new
section
here
called
new
flavors
and
some
new
ones
coming
soon
and
I
wanted
to
create
this
as
a
heading.
I
can
just
click
here:
click
heading
3
and
there
I
get
my
new
header.
If
I
look
down
in
the
markdown,
I
can
see
that
there's
three
hash
tags,
four
new
flavors
cool
next,
maybe
I-
want
to
create
a
table
to
insert
this
and
like
I
said
before,
tables
are
really
hard
for
me.
A
A
A
So,
what's
next
I
showed
you
where
we're
at
with
the
editing
experience
areas
that
we're
looking
at
improving
is
the
previewing
experience.
So
how
do
we
preview
the
text,
so
it
looks
more
realistic
how
we
preview
different
types
of
content
and
also
how
we
handle
non
text
content
such
as
diagrams
images,
embed
social
media
things
like
how
do
we
handle
that
experience?
Do
we
allow
people
to
edit
them
easily
inside
our
static
site
editor,
or
do
we
take
them
to
a
different
tool
to
edit
them
and
also
looking
at
in-place
editing?
A
So
how
might
we
use
shortcuts
and
other
keyboard
actions
to
make
editing
more
natural
and
seamless
for
people
and
over
to
pass
editing
is
taking
a
look
at
how
this
works
as
a
workflow
holistically.
So
traditionally,
with
CMS
systems,
you
have
buttons
to
like
publish,
save
content,
save
them
as
drafts,
so
we're
exploring
ideas
of
how
might
we
match
that
kind
of
mental
model
on
publishing
content
on
top
of
again
ecosystem?
A
We
also
know
that
people
don't
just
make
one
change
at
a
time,
so
looking
at
how
we
might
handle
multiple
commits
within
an
MRI
and
while
keeping
the
experience
simple
and
also
not
all
sections,
you
can
publish
live
by
yourself.
So
there's
approvers
and
reviewers
that's
already
in
place
in
our
amount
of
workflows,
but
we
want
to
see
how
we
might
automate
has
and
produce
some
suggestions
to
make
that
experience
easier
for
users.
A
What
all
of
this
means
nothing
if
we
can't
get
our
changes
that
live
fast,
so
Engineers
on
our
team
are
looking
at
the
build
speed
of
the
site,
how
the
pages
are
compiled
together
and
also
looking
at
how
the
architecture
might
work
of
fitting
the
static
site
editor
into
the
handbook
experience,
and
here
is
a
future
view
of
what
the
publishing
experience
could
be.
So
here
we
have
the
content
in
the
page
style,
more
aligned
to
what
you
might
see
on
in
our
handle
pages.
So
the
styling
the
headings
and
text
matches
that.
A
Then
you
would
see
from
the
page
and
live
page
themselves.
You
have
your
toolbar
of
actions
here,
but
also
leveraging
like
shortcuts
and
lookups
to
say,
hey.
This
looks
like
an
image.
Maybe
you
want
to
insert
this
as
image
so
keeping
that
experience
closer
to
the
content.
The
toolbar
will
be
there,
but
we're
gonna
see
how
we
might
leverage
more
in
context
and
interactions,
and
also
how
might
we
wrap
up
some
of
the
get
workflow
into
a
publishing
streamlined
publishing
flow.
So
these
are
some
of
the
challenges
that
the
team
are
gonna.
A
Look
at
over
the
next
few
iteration,
so
live
preview,
publishing
workflows.
How
might
we
handle
different
types
of
content
and
also,
how
might
we
handle
downstream
errors
such
as
merge
conflicts
and
pipeline,
fails?
I
know
our
engineering
manager
in
a
group
Jean
has
worked
and
given
a
lot
of
demos
on
how
to
debug
your
own
pipeline
fails.
A
But
we
still
have
a
bit
of
work
there
to
see
what
parts
of
those
that
experience
that
we
can
make
more
friendly
so
that
you
can
debug
your
own
issues
if
you
run
into
them,
hopefully
not,
but
we're
not
alone
in
this
idea
of
making
the
editing
of
markdown
files
easier
and
the
whole
industry
feels
like
it's
a
pain.
Then
there's
actually
two
kind
of
big
projects
going
on
with
stack,
bear
and
Tina's
EMS,
which
offer
in
place
editing
using
pop-ups
and
sidebars
as
to
fill
in
content.
A
So
what
truly
what-you-see-is-what-you-get
experience
part
of
some
of
the
research
that
we're
going
to
be
looking
at
is
seeing
how
far
we're
gonna
take
our
product
in
that
direction
versus
solving
our
own
needs.
It's
ourselves,
but
it's
great
to
see
that
the
product
that
we're
working
on
will
be
part
of
this
kind
of
young
industry
of
static
site
editing.
A
So
our
near-term
goal
is
to
get
to
a
viable
state
in
Category
maturity.
So
what
this
means
is
simplifying
the
editing
experience
with
the
rich
text
editor
that
we're
going
to
be
continually
making
changes
on
that,
allowing
people
to
make
multiple
edits
across
pages
through
a
single,
mr,
so
that's
kind
of
making
joining
the
git
and
publishing
workflows
how
we
might
handle
a
non
text
content
in
the
editor,
so
there's
a
huge
list
of
the
different
types
of
content.
A
That's
supported
in
good
lab
right
now
and
we're
handling
each
one
as
it
goes
and
eventually
dogfooding
it
all
by
integrating
it
into
the
handbook,
so
that
more
people
can
use
it
on
the
day-to-day
so
that
we
can
get
more
feedback
and
understand
how
we
might
improve
this
experience
even
better
as
we
move
on.
So
that's
it
for
today's
us
showcase
I
appreciate
you
listening
to
me
if
you
need
anything,
more
check
out
our
direction,
page
issues
or
hit
me
up
on
slat.
Thank
you
very
much.