►
From YouTube: BHTMS - React JS CSS
Description
Broadcasted live on Twitch -- Watch live at https://www.twitch.tv/rhyolight_
B
A
B
A
So,
let's
try
I'll
need
to
decide
what
the
stuff
is.
Gonna
be
so
I
have
an
hour
and
a
half
about
what
can
I
get
done
in
an
hour
and
a
half
I'm
gonna
leave
sorry
about
the
noise
slot
trucks.
I'm
gonna
leave
this
one
in
case
anybody
wants
a
challenge.
I
think
this
would
be
an
interesting
challenge
because
there's
a
little
bug
right
here.
A
The
start
of
an
S
I'm
not
ready
for
that
I'm,
so
so
far,
placeholders
in
text.
That's
so
we
can
map
it
out
a
little
bit.
While
we
do
that,
so
you
can
maybe
see
to
see
where
we're
gonna
go.
Then
so
I
want
a
section
for
the
encoders
I've
just
thrown
everything
together
here
for
the
time
being,
but
eventually
it
will
I
want
to
keep
this
structure
of
encoders
the
structure.
C
A
Section
SP
section
and
then
obviously
this
will
fill
out
as
we
get
there
and
then
the
anomaly
detection
prediction
section:
anomaly:
detection
of
prediction:
sections
those
are
going
to
be
the
non-biological
sections
along
with
the
encoders.
So
it's
really
the
spatial
pooling
temporal
memory
sections
will
be
will
be
implementing
biological
algorithms,
at
least
that's
the
idea.
A
A
What
I'm
trying
to
say
like
he's,
got
a
menu
that
pops
up
or
he'd
know
the
graphics
just
pop
to
the
side
yeah,
but
his
menus
are
is
on
the
top,
so
something
that
says
home,
encoders
spatial
pulling
temporal
memory
and
then
these
may
be
are
either
landing
pages.
Well,
that's
not
where
I
expected
it
to
go.
Oh
these.
A
Like
this
table
found
totally
lost,
I,
don't
know
what
kind
of
which
table
you're
talking
about
every
web
dev
should
rescale
the
page
to
see
how
it
flows
yeah
that
type
of
stuff
I'm,
not
very
good
at
that
type
of
stuff,
I'm
gonna
will
try.
I'm,
probably
gonna
need
some
help,
so
I'm
hoping
that
if
I
follow
some
standards
we
can
apply.
A
There
are
some
libraries
I
know
JavaScript
libraries
that
will
do
this
type
of
stuff
for
us,
there's
obviously
one
in
this,
and
it's
probably
not
even
Java.
So
it's
probably
CSS
at
this
point.
It's
just
been
a
while
since
I've
done
that
so
let's
move
some
content
and
I
can
maybe
the
only
one
that
can
do
this
easily,
because
actually,
let's
start
here
on
this
encoders
and
compare
with
this
encoders
encoder
is
what
is
an
encoder?
What
isn't
a
coder
the
encoding
process,
so
this
style
doesn't
look
too
bad.
A
So
maybe
we
should
decide
on
a
few
basic
styles
and
like
the
width
of
the
page,
it's
one
thing
that
I
I
struggle
with,
because
at
some
point
you
want
to
make
your
visualizations
a
certain
width.
They
just
don't
make
sense
if
they're
too
small
so
of
like
having
a
set
minimum
width
or
something
for
each
diagram
makes
makes
sense,
or
else
I,
just
don't
think
they'll
display.
Well,
some.
A
So
this
image
is
here
and
then
we've
got
some
styling
that
came
along
okay,
I,
don't
know,
maybe
I
don't
want
to
get
into
the
styling
I
just
want
to
make
sure
that,
like
this,
for
example,
I
do
want
to
break
that
out.
I
want
to
do
whatever
it
takes
to
make
sure
that
is
styled
differently.
It's
an
aside,
yeah,
it's
an
aside.
So
wherever
this
aside
is
defined,
I'm
just
going
to
steal
it
there's
some
more
sides:
I,
don't
know.
A
C
A
A
Is
that
maybe
that
still
what
I
want
to
do,
or
because
I've
seen
how
you
can
just
cast
in
a
style
as
well?
Where
did
we
do
that?
I
had
someplace
that
I
think
it
was
this
one
simple,
scalar,
encoder
yeah,
so
you
say
style
equals
style.
You
just
send
a
style
straight
in.
What's
what's
wrong
with
that,
that
seems
from
a
coding
standpoint:
I
don't
have
to
call
it
an
aside,
then
I
can
just
tell
it
here's
your
style,
because
the
only
reason
I'm
putting
it
aside
on
it.
A
C
A
Css
file,
yet
so
anybody
I'm
doing
react
out.
There
know
what
the
pattern
is
that
I
should
follow.
All
I
want
to
do
is
apply
this
CSS
to
a
div
here.
I
could
just
do
it
by
saying
class
name
equals
and
then
put
this
CSS
somewhere
that
it's
loaded
but
I'm,
not
sure.
If
that's
the
reactive
way
to
do
it
or
not,.
A
C
A
A
A
A
C
A
A
A
A
Let's
see
a
great
method
for
styling
it
with
components
of
a
live
background,
inline
CSS,
which
is
what
I'm
doing
that's
one.
That's
what
I
chose
yeah
just
because
it's
the
simplest
way
and
you
don't
have
to
create
another
file
for
it
and
that's
I
assume
that's
just
going
to
put
like
style
equals,
and
then
it's
going
to
just
parse
that
object
in
your
string.
A
A
Css
modules,
this
is
module
CSS
found,
which
all
class
names
and
animation
names
are
scoped
a
local
league
by
default
and
react.
Each
react
component
gets
its
own
CSS
file,
which
is
scoped
to
that
file
and
component
for
a
react
component
that
you'd
like
to
style
step.
The
greatest
C
is
this
is
what
I
want
that
will
contain
the
Styles
at
Build
time.
Local
class
names
are
mapped,
okay
hold
on
next
J
s,
CSS
modules.
C
A
A
Import
CSS
files
in
the
next
module.
This
may
be
what
I
want.
Okay,
the
stylesheet
is
compiled
to
next
static.
Css
automatically
add
the
CSS
file
to
the
HTML.
The
production
of
chunk
hash
so
create
a
next
config
in
the
root
next
to
packages,
so
that
I
have
to
require
it
and
then
export
it
create
a
CSS
file.
A
A
A
A
A
C
C
A
A
A
A
A
I'm
gonna
put
the
CSS
right
beside
the
page
or
the
component
that
it
styles:
okay,
because
I
don't
honestly
I.
This
is
the
wild
wild
west.
I,
don't
know
this,
isn't
the
Wild
West
people,
but
honestly,
this
is
all
this
stuff
is
so
new.
What
is
the
best
pattern
to
do
it
in?
It
takes
time
to
figure
that
out,
I.
C
A
So
this
is
like
the
the
main
style
and
let's
see
if
let's
make
sure
that
we
can
do
it
like
a
body
back
ground,
color
red.
So
we'll
know
if
this
style
applies
and
to
copy
the
page
that
you
were
drawing
inspiration
from
yeah
I'm
I.
Definitely
I'm
going
to
try
and
do
that.
But
I,
don't
know
that
you
mean
stylistically,
yes,
I
would
I
could
just
take
their
CSS
yeah,
although
I'm
not
crazy,
about
serif
fonts
for
technical
writing,
I
prefer
sand,
sir,
so
that
might
change
that.
A
A
A
A
A
Of
these
was
about
colors
and
I,
really
liked
it
a
lot.
He
basically
just
picked
primary
colors
and
our
I
don't
remember,
and-
and
he
picked
he
muted
them
and
picked
sort
of
the
past
Le
versions
of
them-
hue,
color
distance
anyway
I'm
getting
off
getting
way
off
in
left
field.
Now,
okay,
where
were
we
I'm
trying
to
set
up
the
CSS
and
I
want
to
use
these
modules
and
then
I
found
a
plug-in
to
use
the
module
and
now
I
want
to
import
some
CSS
from
the
module
and
I'm
gonna?
A
A
I,
don't
know.
I
know,
Java
I,
don't
know
cotton,
so
it
doesn't.
A
A
A
It
was,
it
was
a.
It
was
Q
basic.
It
was
Q
basic
on
a
computer
that
my
mom
bought
brought
home
and
had
a
green
screen,
I,
remember
finding
Hubei
second
and
read
no.
That
was
after
the
green
screen
that
went
actually,
but
it
was
a
das
system,
and
so
you
caught,
you
executed
Q
basic
from
the
command
line,
and
it
brought
you
into
like
this
weird
you
ice
cream.
A
That
was
all
blue
and
you
wrote
your
program
in
that
it
was
actually
a
little
IDE
is
hard
to
use
and
I
wrote
some
trig
in
it
for
homework
assignment
and
I
thought.
Oh
that's
neat
because
I
checked
my
answers
with
it.
It
was
like
the
Pythagorean
theorem
or
something
and
so
I
programmed
it
in
so
I
could
just
enter.
You
know
a
and
B
or
C
or
whatever
that
worked.
A
A
A
A
A
C
A
C
C
A
A
C
A
A
A
A
C
A
B
A
A
A
C
A
C
A
A
A
C
C
A
C
A
A
C
C
A
But
I
should
be
able
to
now
that
I
have
this
layout
here,
I
should
be
able
to
say,
CSS
stop
body
and
then
we've
got
the
head
and
then
this
is
where
the
content
goes,
and
so
this
is
also
wait
a
minute.
This
is
weird,
why
is
your
head
and
a
header
header,
Oh
Oh,
a
head
is
the
next,
that's
the
actual
head
matter
right
for
CSS
or
HTML
page.
This
header
is
our
contains.
A
C
A
A
C
A
A
A
A
A
C
A
Don't
like
this
any
more
than
you
so
now
we're
going
to
go
down
to
CSS
layout
I,
don't
think
it's
gonna
help
really
in
variant
violation.
That's
a
new
error
rendered
HTML
name,
and
it's
not
I,
don't
even
know
what
this
is.
Invariant
language,
the
Stein.
It's
the
same
thing,
the
style
prob
expects
over.
C
A
A
C
A
A
A
What's
that
example,
that
says
they're
putting
a
style
and
then
there's
in
pages
index.
It
goes
down
one,
so
in
that
case
the
style
would
be
somewhere
else
and
moving
somewhere
else,
but
I
should
be
able
to
refer
to
that
down
and
into
CSS
and
and
there
it
is
sees
the
layout
and
it's
upper
case
layout.
A
A
A
A
C
A
B
B
A
A
A
Sorry,
Falco
I,
look
when
you
when
you
watch
it
on
YouTube.
Let
me
know
because
if
it
streams
decent
on
YouTube,
that
means
it's
something
on
your
end
because
as
far
as
I
can
tell
I,
don't
I
don't
know,
but
thanks
for
watching
I'm
only
on
for
another
20
minutes
or
so
anyway,
and
try
and
get
this
working
styles
anyway.
So
we're
gonna
call
this
header
and
this
is
what's
got
all
the
links
in
it.
So
our
header
should
not
sure
if
that
background,
color
works,
probably
not
I've,
never
done
it
done.
C
A
C
A
C
A
A
B
A
Now,
with
that,
okay,
so
that
means-
hopefully
all
I
have
to
do-
is
remove
that
40
about
the
gutter.
But
this
one
does
this
40
come
from
how
about
now
this?
Well,
it
worked
on
the
bottom
one.
So
there's
another
place
that
there's
a
40
right,
so
I
can
remove
this
where's,
the
other
40.
There
is
the
other
40.
Oh
man,
that
makes
me
happy
find
stuff
like
that.
I
knew
I
knew
I
knew
it
was
bad
whatever
that
was
was
not
a
good
thing
now
the
40
is
accounted
for
awesome.
A
A
A
A
I
might
just
add
it
right
here
in
line
if
it's
not
much.
I'll
just
add
it
in
line
if
it
starts
becoming
a
hassle,
pull
it
out,
but
I
want
the
page
level
stuff.
You
know
the
header
and
the
layout
I
want
that
to
be
easy
to
get
in
there
and
mess
with
I.
Don't
want
it
to
be
hidden
inside
a
react
component
somewhere.
So
that's
sort
of
why
I
pulled
it
out.
A
Honestly,
I,
don't
really
want
it
in
components:
I
should
put
it
back
in
CSS,
but
I,
don't
know
it's
I'm
still
getting
used
to
react
and
the
the
framework
was
not
yeah.
This
was
I've,
never
found
CSS
to
be
very
easy
or
intuitive
at
all.
But
then
UI
is
hard.
You
guys
always
hard,
there's,
no,
there's
no
simple
way
to
do
it.
I
learned
swing
in
Java.
A
So
I'm
gonna
create
a
create
another
card.
Oh
simple,
page
styling
that
was
on
the
list,
UI
framework
and
it's
gonna
be
me
and
that's
what
I'm
working
on
and
now
I'm
gonna
commit
it.
Okay
first
thing
you
do
when
you
write
a
to-do
list.
This
is
right
finish
the
to-do
list.
That's
item
number
one,
then,
as
soon
as
you're
done
with
the
to-do
list,
you
cross
an
item
off
the
list.
A
A
A
Like
it
worked
in
my
environment,
but
it
appears
my
environment,
that's
what
seems
like
packers
auction
fee
I'm,
not
a
big
fan
of
committing
it
into
the
codebase
unless
there's
some
reason
for
it
to
have
it
like
as
a
to
deploy
to
production
or
something
I
don't
feel
like
it
should
be
in
the
codebase,
it's
just
too
much
craft.
Every
time
you
commit,
you
commit
this
big
blob
of
whatever.
C
A
B
A
B
B
A
A
A
This
is
sort
of
so
sort
of
obvious.
Isn't
it
I
mean
you
want
to
know?
There's
the
header
and
you
just
look
right
there
and
there
it
is
that's
pretty
obvious,
so
I,
don't
think
I
need
to
really
explain
this.
I
was
thinking
about
maybe
updating
the
readme
to
explain
how
the
CSS
is
working,
but
the
way
it's
set
up
now
is
pretty
clear
here.
You
just
import
your
CSS
with
your
react
component,
which
is
perfect.
C
A
Alright,
this
is
good
timing.
Cuz
I
gotta
go
yeah,
but
doesn't
matter
it'll
deploy
there
soon,
thanks
for
the
help
with
the
lookup
mark
and
then
others
next
pixel,
if
anybody's
still
watching,
we
only
got
a
few
people
on
line
so
I'm,
just
going
to
sign
off,
everything
is
committed.
I
will
be
back
streaming
again
tomorrow
and
I'm
gonna
be
working
with
the
nupoc
community
fork,
we're
going
to
start
work
on
a
hot
gym.
A
We're
gonna
do
let's
build
hot
gym,
basically
the
algorithms
API
and
do
a
hot
jet
example
using
the
pi
bindings
that
exist
for
new
big
dot
cpp.
So
this
is
going
to
be
python
on
top
of
the
c++
core
in
the
community,
Fork
of
nuclear
core,
so
thought
that
might
be
a
good
place
to
start
doing
some
Python
3.
That
seems
to
be
the
easiest
place
right
now
to
program
HTM
and
Python
3.
So
we're
gonna
take
a
stab
at
it
tomorrow
at
9
o'clock,
so
see
you
then
bye.