►
From YouTube: FE Pairing - 20210514 - Working on startup CSS generator
Description
In this pairing session we push this MR forward a bit:
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/61635
A
Git
lab
has
a
humongous
application,
css
file,
which
is
the
results
of
lots
of
little
additions
over
a
long
time
and
not
a
lot
of
oversight,
and
now
it's
just
tightly
coupled
and
it's
hard
to
manage
so
some
months
ago,
tim
had
a
really
clever
idea
to
improve
our
performance
so
that
we
can
asynchronously
load
this
large
file,
but
synchronously
inline
only
the
styles
we
absolutely
need
which
brings
up
the
problem.
How
do
we
get
those
styles?
A
We
absolutely
need,
and
so
tim
had
made
a
handy-dandy
puppeteer
script,
which
hooked
into
your
running
gitlab
to
hit
the
page.
Get
the
html
run,
purge
css
on
it
with
and
get
the
result
of,
do
some
html
manipulation
and
get
the
result
of
this
is
only
the
css
that's
being
needed
for
this,
for
mainly
just
our
navbar
and
sidebar.
A
The
problem
is
for
a
while
that
script
only
worked
on
tim's
machine
and
startup
css
technically
contains
some
duplication,
because
it's
generated
from
our
main
css,
so
we've
run
into
even
some
user
facing
issues,
because
the
startup
css
has
not
been
updated
or
easy
to
maintain.
So
we
have
a
cool,
mr,
that
we
are
working
on
to
oh
gosh.
Where
is
it
to
change
this
from
a
manual
process
to
a
much
more
automated
process?
That's
all
baked
into
the
git
lab
project.
A
A
What
was
wisely
observed
that
there's
a
trade-off
here
when
we
hit
it
with
puppets
here,
it'll
run
the
javascript
and
it'll.
You
know
we'll
we'll
get
more
things
on
the
page
than
just
hitting
it
from
here,
but
startup
css
is
supposed
to
be
executed
and
run
before
the
javascript
anyways,
like
the
nature
of
this,
is
before
the
javascript
build
loads.
We
want
this
to
show
up
so
that
we
might
actually
be
able
to
take
advantage
of
that.
So
so
this
is
where
we're
at
with
this.
A
A
We
are
getting
the
fixture
that
would
have
been
generated
previously
and
we
are
writing
to
this
startup
css
and
this
is
the
result
of
it.
So
there's
a
couple
to
do's
now:
does
someone
want
to
drive
and
I
can
navigate
or
I
can
drive
and
talk
to
myself,
but
I
wouldn't
that
always
makes
you
feel
a
little
lonely.
A
C
C
A
We're
going
to
do
it
all
in
this
mmr
yeah
and
then
I'm
going
to
we'll
split
it
up.
I
think
yes,
that's
how
I
want
to
want
to
do
it.
So
it's
going
to
work,
though
chad
also
brought
some
really
good
points.
I
really
appreciate
you
hopping
in
one
one
point
which
was
critical:
was
this
job
or
this
rake
task,
which
is
used
to
build
the
the
production
css
that
we
use
with
purge
css
it?
A
I
and
I
actually
got
burned
by
this
like
after
I
was
working
on
this,
and
I
was
doing
something
else.
I
was
like
what
none
of
these
styles
are
loading
and
I
was
and
then
because
I
just
done
this-
I
thought
oh,
this
might
be
it,
but
yeah
we
want
to
now
somehow
make
sure
peppered
into
this
code
is
a
recommendation
to
the
user
to
run.
A
C
C
F
A
C
I'm
sure
that
would
break
a
lot
of
things,
but
it
does
have
the
benefit
of
making
it
really
obvious
that
there's
a
bunch
of
junk
there
that
may
be
causing
your
problems
and
you
need
to
get
clean
it.
That's
really
interesting,
so
that's
an
easy
solution.
If
it
doesn't
break
everything
about
the
pipelines
about
how
we
build
and
package,
I.
C
A
I
think
it's
possible
that
we,
the
end
developer,
doesn't
need
to
run
this,
but
I
would
like
to
be
as
helpful
as
possible
with
it.
Let's
try
to
get
to
the
ci
job,
let's
see
if
we
can
get
to
there
and
there's
a
number
of
things
we
could
do,
but
I
see
you're
also
just
going
through
the
the
through
the
mr
comments,
so.
A
G
A
Yep
so
well,
some
of
this
would
already
be
done
for
us,
because
we've
generated
fixtures
and
like
some
of
the
other,
the
compiled
assets
at
like
the
very
beginning,
but
if
we
want
to
run
this
locally,
the
two
things
is:
we
need
to
run
fixtures
and
we
can
just
run
that
specific
file
so
run
the
fixtures.
I
think
it's
been
rake
front-end
fixtures,
oh
no,
we
can
actually
just
run
r
spec
on
that
file.
Can't
we,
I
think
it's
just
as
much
as
a
thin
horsepower.
A
A
C
A
C
No,
I
I
didn't
the
answer
didn't
make
sense
to
me.
Okay,
that's
what-
and
it
probably
doesn't
like
the
current
process.
Is
it
like
downloads,
some
stuff
from
gitlab.com,
and
then
it
downloads
some
stuff
from
the
local
dev
server
and
what
I've
never
understood.
I
just
accepted
that's
the
way
it
was,
but
what
is
on
gitlab.com
that
we
couldn't
have
just
gotten
from
the
local
dev
server
running.
E
A
D
A
A
A
A
E
A
You
should,
but
I
don't
know
I
really
don't
know-
maybe
maybe
that
is
where
that
path
error
was
coming
from.
I
know
nathan
was
running
into
that
and
had
nothing
to
do
with
this,
mr,
so
I
he
maybe
but
but
maybe
he
had
done
a
production
assets
build,
and
so
I'm
not
entirely
sure
we'll
we'll
soon
find
out.
Oh
we're
gonna
find
out,
there's
been
some
weird
stuff
happening.
C
A
B
Where's,
the
actual
jason
for
the
startup
there.
It
is
all
right
so
node
script,
startup
css
main
that's
the
file.
I
was
looking
for
one
of
these
yeah,
so
we'll
run
this
first.
This
is
going
to
render
the
view
the
production
view
of
project
home.
It's
going
to
generate
this
fixture
first
with
our
html
and
then
once
we
have
that
we
can
run
main
which
is
going
to
go
through
and
do
our
tasks.
So
I
see
paul,
you
went,
you
went
way
ahead
and
you
did
all
the
removal
and
everything
nice.
A
Yeah
yeah
this
is,
and
I
compared
the
output
to
the
files
you
share,
chat
and
there's
like
very
small
differences.
Most
of
me
thinks
it's
because
I'm
running
on
a
more
recent
commit
which
is
really
interesting.
So
I
I
think
this
is
gonna
work,
but
we
can.
We
can
compare
the
the
outputs,
I
think,
let's
that's
not
as
interesting
and
something
we
could
do
later.
A
But
what
is
interesting
is
there's
three
pages
that
we
need
to
run
this,
for
we
need
to
run
it
for
general
general
with
dark
mode
and
then
sign
in
so
right
now.
I
just
have
it
all
hard
coded
just
to
do
run
it
with
general.
Let's
see
if
we
can
do
that
locally
first
and
then,
let's
see
if
we
can
figure
out
a
way
to
to
handle
multiple
pages.
A
B
To
run
this,
for
the
first
time
now
we're
going
to
see
how
bad
the
error
messages
are
in
the
docs
all
right
we're
just
going
to
run
it
in
the
docs.
So
oh
you're
going
to
follow
the
docs
you're,
not
getting
the
error
messages,
so
I'm
going
to
snap
jig
all
right.
Let's
run
this
and
see
what
happens.
Fingers
crossed.
B
H
A
C
A
C
Would
I
see
we
do
get
ignored
public
assets?
I
would
yeah
just
maybe
trying
to
remove
that.
I
don't
know
what
nobody
should
be
running
this
locally
right
and
like,
in
my
opinion,
it's
only
like
if
a
ci
job
does
this
and
then
like
accidentally
causes
a
problem
somewhere
which
we
can
work
around,
but
as
far
as
impacts
on
like
devs
or
community
contributors.
C
A
Yeah,
that's
a
this
is
a
good
idea.
I
kind
of
wonder
if
maybe
we
can
maybe
there's
a
way.
We
can
warn
that
the
local
dev
environment
is
loading
like
maybe
maybe
at
runtime.
We
can
warn
the
user
about
their
environment
that
it
might
not
be
what
they
expect.
It
is,
I
kind
of
think
it
would
be
interesting
to
remove
the
get
ignore
and
to
lock
the
folder
so
like
just
in
case
like
nothing
can
get
committed
or
pushed
into
there,
because
we
support
locks
right.
A
Right
but
but
I
but
it's
interesting
how
keeping
it
unignored
would
be
like
a
warning
signal
to
like
you
did
things
I've
had
to
do
this.
There
are
some
weird
you
there
were
some
weird
user-facing
bugs
I've
had
to
debug
with
a
production
css
like
and
there's
some
there's
some
things
like
that,
and
this
is
a
tricky
one,
because
it
seems
I
don't
know.
I
don't
know
what
we'd
want
to
do.
B
A
A
B
Like
I'm,
I
I'm
relatively
fine
with
warning
people
that
you
know,
but
I
just
think
it
would
need
to
be
really
explicit
and
to
kind
of
stress
that
if,
if
this
is
something
you're
going
to
do,
you
need
to
be
at
the
very
least
comfortable
with
starting
from
scratch.
If
you
really
can't
salvage
your
jdk
afterwards,.
C
C
A
A
A
G
A
C
So
there's
no
need
for
this
to
actually
live
under
public
assets.
Correct
like
it
could
be
anywhere.
You
would
just
have
to
point
purge
to
the
right
place.
So
another
option
is
to
like
just
monkey
patch
or
whatever.
We
need
to
do
to
like
the
rail,
the
assets,
compile
and
just
tell
it
to
stick
it
under
temp
in
a
place
and
that's
where
we
point
to
and
then
that
solves
the
whole
problem
of
it
living
in
the
canonical
place
that
gets
loaded.
A
A
Yeah,
that's
a
good
idea.
That's
another!
Really
good
idea.
I
think
I
think
that's
something
that
we
can
also
iterate
on,
but
I
do
think
it'll
be
helpful
to
be
to
solve
yeah,
okay,
how's
those
how's,
those
sweet
rake
tasks.
Looking
oh
my
gosh,
this
one
is
running
and
then
once
that's
done,
I
will
kick
off.
B
A
E
A
A
C
A
C
A
C
B
A
B
A
It's
it's
it's
the
second
to
the
yes
and
so
just
to
show
you
know
what
this
is
doing,
how
it
works.
We
can
specify
html
to
remove
before
we
send
it
to
perch
css
and
we
can
specify
css
to
remove
and
the
css
accepts
either
a
string,
which
means
it's
going
to
do
an
exact
match
or
regex,
which
means
it's
going
to
do
the
regex
test.
So
if
we
do,
if
we
add
one
to
the
bottom
here,
the
css
to
remove,
if
we
add
a
slash,
nav.
A
A
A
We
need
to
have
different
fixtures
for
these,
so
we're
gonna
have
we're
gonna
one
need
to
somehow
declare
the
pages.
We're
gonna
run
what
html
and
css
we're
going
to
use
for
them,
and
then
we
need
to
build
the
fixtures
for
it
for
these
missing
ones.
So
maybe,
let's
hop
to
fixtures.
Let's
do
that
part.
First.
B
A
B
A
So
for
dark
mode
we
want.
We
need
to
set
the
dark
mode
theme
yeah
before
we
hit
this,
so
we
need
to
navigate
to
the
profile.
Well,
no,
we're
in
we're
in
our
spec
land.
We
just
set
our
user
profile
preference
data
thing.
We
don't
have
to
navigate
to
anything,
we're
not
even
trying
to
do
like
a
feature
spec,
so
I
don't
know
how
to
change
the
user's
dark
mode
near.
Do
I
it's
a
lot,
let's
find
theirs
yeah.
Let
me
see
if
I
can
find
something
about
that.
A
F
F
D
A
A
F
E
A
E
B
A
E
A
A
A
E
B
A
E
B
I
thought
it
did.
I
thought
it
did.
I
I
had
to
give
up
using
spring
on
my
person,
because
the
rails
task
would
lock
up
and
I
couldn't
cancel
it
in
the
terminal
anymore,
and
the
only
thing
that
would
fix
it
was
a
reboot
and
postgres
would
die,
and
so
I
was
like
okay,
I
won't
be
running
spring
manually
through
the
terminal.
C
B
A
A
A
A
C
B
B
C
C
C
A
B
A
B
B
A
A
B
Okay,
but
what
it
looks
like
it
did,
because
the
the
variables
for
the
colors
are
different
and
there
is
gl
there
present
in
here
and
there's
no
geo
there
presents
in
the
original
one.
Okay,
that's
it
sounds
good
to
me
like
you
can
see
here
that
the
colors
are
distinctly
different,
oh
really
yeah!
So
it's
highlighting
differences
in
the
actual
hash
codes.
Here:
okay,
cool.
A
A
So
I
have
hard-coded
here
we
are
looking
for
path,
general
html
and
we
throw
it
the
general
css
into
it
online
21-22,
but
we're
going
to
run
this
for
three
different
pages
run
it
for
the
general
with
the
general
css,
we're
going
to
run
it
for
dark
with
the
dark.
Css
we'll
run
it
for
sign
in
with
the
general
css.
A
A
E
A
It
was
like
it's
okay,
that's
just
what
you
said.
I'm
just
listening
to
you
about
like
paige
yeah.
Can
we
do
like
just
pages?
Maybe
our
pages
yeah
or
out,
maybe
even
outputs,
because
it's
just
defined
by
our
outputs
of
where
this
is
we're.
Gonna
run
yeah.
Maybe
we
can
do
outputs
and
make
it
an
array.
A
B
A
A
A
A
Well,
what
I
would
actually
do
so
I
I
try
not
to
do
like
nested
constants,
because
those
can
technically
change.
I
try
I
try
to
have
for
javascript.
I
try
to
do
just
constant
strings,
so
I
would
do
yeah
yeah
yeah
like
if
we
were
being
really
verbose
and
then
the
other
one
is
going
to
be
dark.
Is
the
other
constant
we'd
have.
A
A
A
Now,
let's
go
to
line
17
where
we're
hard
coding,
general
yeah,
17
yeah.
At
the
very
beginning,
the
key
is
actually
going
to
be
square
bracket,
css
key
general
square
bracket,
so
we
get
the
actual
value
of
it
yeah
and
then
for
dark.
The
same
thing:
yep,
yep,
yep,
okay!
So
now
we're
going
to
do
a
loop
from
line
20
above
line
21.
Let's
do
an
outputs
for
each
outputs
for
each
yes,
but
above
above
line,
21.
A
B
A
B
A
A
A
B
A
A
B
B
B
G
B
B
A
B
C
B
C
B
B
A
Yeah,
no,
I
I
have
a
slightly
funny
story,
so
I,
when
I
was
a
when
I
was
a
young
whippersnapper.
I
guess
I'm
still
kind
of
there,
but
I
was
like
hey.
You
need
a
website.
I
could
do
web
development
and
it
was
this
really
old
website.
You
know
all
of
the
the
tags
were
all
capitalized
because,
like
back
in
that
day,
and
they
wanted
to
just
add
this
one
change-
I
was
like
oh
gosh.
A
A
B
A
A
B
Oh
yeah,
I
know
what
natalie
was
teaching
me
as
well,
but
my
current
side
project
at
the
moment
is
a
rails
application
from
the
ground
up
to
actually
learn
this
stuff
properly
because
I'm
like.
I
just
need
this
knowledge.
Now.
How
am
I
writing
so
much
ruby
god?
Oh
amigo,
I
don't
envy
you
but
have
fun
it's
it's
a
wild
time.
It's
a
long
time.
Okay
hold
on.
Let's
just
go
to
the
roots
file,
I'm
just
gonna,
be
I'm
gonna,
be
that
person
there
we
go
roots.
B
Is
there
a
signup
room
here?
Aha
users
got
signed
up
rock
there,
we
go
module
registrations,
module
registrations
and
then
the
resource
is
the
resource
is
welcome,
oh
interesting,
but
we
can
call
the
wealth.
We
can
call
the
welcome
controller
out
of
the
show
page
by
the
looks
of
it.
What
is
the
welcome
controller
wow.
G
B
B
A
A
A
A
E
B
A
B
A
B
A
A
That
seems
totally
fair,
because
are
we
exporting
these?
Well,
we
don't
import
them
anymore.
We
just
import
outputs.
General
html,
like
you
notice,
we're
not
doing
that
for
dark
html.
We
don't
need
to
export
them,
but
it's
fine
how
it
is,
let's
keep
it
how
it
is
right
now.
I
may
move
it
later,
but
outputs
we're
gonna
need
to
add
a
new
one.
B
B
B
B
G
A
E
E
B
Device,
oh
yeah,
sorry
this
is
this
yeah
I've
seen
this
before.
That's
why
I
was
actually
looking
just
last
weekend
there
I
started
learning
user
roles
through
rails
and
it's
using
device,
but
what
I
was
looking
for
then
was
an
auth
controller,
because
auth
was
what
was
dictating
registration
and
sign
up
at
the
same
time,
so
I
just
assumed
it
would
be
the
same
here.
I
that's.
A
B
B
H
A
A
E
A
A
B
E
E
B
B
E
B
A
A
B
B
Oh
look!
Look
at
it!
There
look!
That's
right!
There's
a
bunch
of
them
there
right
there
yeah
look
there.
It
is
wow!
Oh
no!
Sorry
hold
on.
That's
that's
invites
no.
There
just
should
be
slash.
Sign,
let's
find
something
there.
It
is
users
yep
yep
there.
It
is
look
at
it.
Look
at
there,
look
at
it
all
right,
brilliant,
that's
great!
We
just
figured
out
the
hard
way
or
the
the
common
way.
I
don't
know
the
way
where
you
click
through
files
until
stuff
starts
to
make
sense.
B
B
A
A
A
A
F
B
A
B
A
B
A
B
B
B
B
B
B
A
B
B
B
A
B
A
A
A
But
dude
this
is
so
helpful.
I
really
appreciate
it:
let's
just
commit
what
we
got:
push
it
up
there
and
and
we'll
keep
we'll
keep
working
on
it.
So
the
goal
is
that
one,
mr
I'm
gonna
do
the
ci
config
and
we're
just
gonna
do
this
is
what
it
all
is.
Gonna
look
like,
but
now
I'm
gonna
spin
off
smaller,
mrs
off
of
it.
A
Go
ahead:
yeah:
okay,
let's
go
ahead:
we
don't
want
that
and
be
sure
to
clear
your
assets.
I
think
you
have
to
run
the
club
or
file
business
yeah.
It
looks
like
it's
been
rake,
get
lab
assets,
clobber
or
something
I
don't
know.
You
can
also
just
remove
the
folder
all
right.
Thanks
david,
really
appreciate
it.
Yeah.