um so good Monday morning good morning
morning I am mpj and this is David we
have do we have a delay here no what I
was just expecting you to say something
else today we’re going to pair program a
reddit place clone using firebase and
react because we did one episode the
previously where we didn’t actually
succeed in building much so why not just
try to build it and actually fine finish
it finish it or irritability I don’t
know I think we should do it from
scratch yeah me too I think we will just
get stuck if we try to rebuild it and
yeah plus I don’t even know like then we
have to read the old code and one key
thing with these episodes should be that
you should not have to watch any other
yeah episode so we’re going to try to
build a reddit place clone reddit place
was this project where people could come
to site and add one pixel to a big
canvas and they had one pixel and then
eventually the community would just
build something out of that we have this
one thing that we should only do this
for one hour and see if we make it we’re
gonna do this we’re gonna try to pair
program for real we got some pretty good
suggestions that we weren’t actually
pair programming the last time we tried
pair programming kitchen software
quality without impacting time to
deliver it is counterintuitive but two
people working at a simple computer will
add as much functionality as two people
working separately except that it will
be much higher equality we actually had
demonstrated that quite well in the last
episode I like the last episode when we
tried to do pair programming but really
didn’t try do pair programming working
on two separate parts of the project
that’s something that we learned doesn’t
really work you mean that we didn’t
actually get good quality because we
failed yeah we didn’t get anywhere where
we we figure that we would both succeed
to do our respective tasks so we just
divided it up but one of us got stuck
and which you probably wouldn’t have if
we have both swarmed on it actually did
don’t mention anything about the driver
navigator
thing okay so which we just pair program
and see whatever rights first part you
can just mention what the driver and
navigate your concepts are when when
I’ve done pair programming where people
that are like read the book on it one
person is a driver which is the person
that is actually holds the keyboard and
is focusing on syntax and the
nitty-gritty of the algorithm making the
thing compile
well the Navigator is the person with
that holds a notepad so to speak like
okay where are we going in their grand
scheme of things ok enough talking I
think all right let’s create a project
create a react up yeah why not actually
let’s just delete the old code or
incorrect wow that takes a surprising a
lot of s npm is like we pulled in
everything create react app fun fun
filled and it’s installing I’m setting a
timer and we are go I mean I think you
shared the wrong project with me I don’t
know how this works
Oh I mean font on bottom okay my god
it’s open up code session after two
minutes
brilliant MPM start okay so let’s start
with the thing that you started with the
last time a coordinate system with some
kind of pixels almond we can click the
pixel and change the color of the pixel
so coordinate system and pixels let’s
actually you start with by declaring the
coordinate system maybe yeah good idea
suppose that this state is object and we
called it pixels perhaps and as a
process that could be an array where the
next icon for some reason this is like
the only hex code I’d know from heart it
was the background color of my first
websites or this is the coordinate
system call it pixels
all right pixels the others better just
was very consistent y’all right and then
for each this dot as this don’t state
the pixels map like I really hate the
these overlays of mistress dealio I
don’t really know why people are so
excited about intelligence the point of
this is to give me good suggestion for
the things but my code over here is
actually good suggestions like I and it
covers that and that happens to me all
the time with these links for each pixel
and it’s gonna have like left pixel the
x times something
except width and height let’s just yeah
exactly because we don’t want to use
otherwise the it’s gonna be a pain in
the ass on mobile I suppose con just
where you can hold it like picture size
is great that’s great that’s a weird
then highs to pick suffice background
color we have a failure this is not
allowed before super let me just add
super up here is not correct I know it
doesn’t its position to the top perhaps
that the wrapping div is not oh yeah
you’re right in its position absolute no
position relative and then the ones
underneath or oh yeah you all right
absolutely does that look right yes you
eight yes yes I’m gonna add a few more
and then we had a color picker I don’t
know if this correct not but we did the
way you started last time was that you
built the client-side part first so
let’s just do the color picker and then
we sort of done and then we can do like
the logic afterwards what should we have
here yeah well the one above doesn’t
matter the one above oh I’m just gonna
copy paste this install react color
progress bars are always amazing
we’re twelve minutes in alright so this
is going pretty well
requires a peer dependent screw you peer
dependencies is so incredibly incredibly
evil okay duplicate declaration react
yeah that’s sexually true yeah all right
gets a picker is defined but never use
how do we position this thing well if
you click somewhere in the coordinate
system you want to have it next to it
yeah I get that I get that but my
question is like how how do we place the
guitar picker can you just do this if I
do like left here yeah and go 100 is
gonna go left no it’s not gonna move
directions going there we could just
position it but then it’s gonna be a bit
tricky with it because it has a little
arrow up here mm-hmm purpose you can
actually just circumvent that problem by
speaking one that doesn’t have an arrow
now it’s circle this looks good this
this is playful circle picker is not
defined as in the render you call it
get a picker oh there go okay sweet so
should we like wrap it in something or
do can we just use that component and
move it around I think we’re gonna wrap
it in something I wish I liked I’m sure
there’s a way to do this but in the
interest of the heart time I figured
then in order to avoid a problem then
more power to us so out the style to the
div above there we go why didn’t that
move
oh yeah it needs to be a position sweet
yeah it works okay what next I think
that we should add like when you click
somewhere you will get the position in
the coordinate system and that way we
can update the array of pixels the
states all right so where do we add the
onclick handler I have no idea on click
here you are now in the style whoops
hair programming already paying off I’m
just like I’m just like a nanny that
just keeps you away from the from doing
bad things like no no no no don’t touch
that class no no no no that’s a knife
this dot handle pixels clicked we don’t
have much place for this console oh my
god shooting a bellman
doesn’t seem like the click is
registering or perhaps it is and it
actually does handle getting it on
defined as an onclick handler on it
anyway
let’s do a handle if it’s a clip-on sort
of lord nope still look nothing is
happening actually if that this is
called on click maybe it isn’t
[Music]
on click with C no it’s it it is you
have to have the BAM no wait a minute
wait a minute I think I fell into this
trap last time we look at this pixel
thing do you see that it’s just it
doesn’t have any height okay so five
hundred percent and with hundred percent
should that solve it
yeah let’s destroy it
okay technically it is still I think it
needs to be position:absolute in order
to work okay
because width and height doesn’t really
make sense in the context of
we might be running into problems later
because when we want to over scroll from
the grid but whatever yeah
so now that handle pixels kick should
take an event hey you know I kinda know
how like we just gotta do it ten
thousand pixels oh oh yeah oh so what
were you saying so the handle pixels
clicked function should take an event or
fall like video I stopped I keep
forgetting that like we really like I
really need a streaming camera because
it becomes way too many things to keep
in your head so add an event we will get
the coordinates from the event somehow
between acquisition of element client
why we return the position relative to
the window not the parent I think that
this looks sensible yeah and then we
we’re in our coordinate system it’s fine
Y divided by whatever it’s what’s called
pixel size oh we sure do a math door
should we see console.log the coordinate
then we can just see if it makes sense
when we tick around oh that’s true
that’s true
I think these slopes sensible so if you
click the red one the red pixel and just
make sure that when you click outside of
it it should generate the next corner
5:3 yeah yeah and above and below yeah
cool OOP things to work yeah okay so
there we have it then we should draw the
circle picker where you clicked so we
need to have a way of positioning the
circle picker using state then the style
should you have the style above it its
wrapper oh yeah yeah so the left
position should be something like this
dot select that
selected for ornette times pixel size
yes the coordinate of X this one’s a dy
boom cannot read properly X of a define
know that is because we haven’t said
victory yeah exactly so we need to
handle that case so I’m just gonna do is
selected coordinate no or no shouldn’t
you have the double ampersand that you
should only draw if you have a selected
coordinate no yeah you’re right
but it should be this stop selected
coordinate yeah it’s the thing is each
should be and also I should close my
tags correctly Oh closing it there I
think this has this state selected
coordinate so the arrows of this stop
States
oh yeah yeah I get it let’s just test
that X is 4 y is 5 9 then it appears
does that look like for a 90-year yeah
so then we need to actually set that is
not set state selected coordinate and
then your score not I suppose yeah
whoops cannot read property set state of
undefined oh yeah a constant standard
crap of JavaScript done this for many
many years and still fall into it so
that means that when you do like this
that means that this is not gonna handle
pics expect it’s gonna lose its this
context so the way that you tend to do
this is just create a new function on
every every render that is bound to this
[Music]
Thank You working okay now when we click
can we just ripple in for a little while
that this is going really really well
we just want to get the color from when
we’re choosing from the the so how does
this work then react color bomb on
change you get a color that has a hex
property we go on change this dot handle
color picked I do an absurd if there is
one X Y which would overwrite it
otherwise we should just insert it
yups so let’s just grab the coordinates
this got state don’t pixels dot Kong cat
and we’re gonna add a new pixel with X
you can actually just select append it
with the this but they don’t selected
coordinates and give it a color that we
have here which is gonna be colored on X
Jesus Christ this is a lot easier now
that you’ve done it one time I feel
almost like superhuman compared to last
time oh I lost David mm-hmm
do I have connection know what’s
happening where is my connection I’m
back I love my mother-in-law but she has
the worst Wi-Fi that’s why I’m getting a
cable yeah we are constantly improving
our streaming setup for this like we’re
not used to the format and it’s gonna
have kinks but I mean I’m I’m actually
enjoying that a little bit it feels like
I can I’m sorry like it it feels like
when I started youtubing like when
you’re learning so much like every
learning it’s like I have extremely high
impact do you just realize like oh we
did with sync pepper or gonna all we
should get this thing and like I really
like that when it’s like moving so fast
do you get it to set a color when you
click the color picker no let’s see I’m
I need to actually do the sets
it’s yes also and this that state don’t
pixels oh pixel ah if you’re sitting the
state and cept only the pixels do its
overwrite the selected Cornett part of
the state who does it just set the
pixels feed it just over it’s this part
of the site okay whoops this not state
not set state it’s not function no
that’s correct it’s only this that’s at
stake I expected this to do something
it’s working it does yes for me it’s
working for you yes
what is that that’s so weird it’s not
working for me just refresh your browser
why what I need to refresh your browser
I don’t know it just started working for
me today we have a little a very little
time don’t talk so much
now we have to hide the color picture
once we have clicked and set a color we
just set the selected coordinate to no
doesn’t work no it doesn’t know because
I what I think is happening because that
was happening last time was that it
generates like it generates a new clique
which just sets it again mm-hmm so I
think that that the way I did it last
time was that I ignore pixaflux if
selected coordinate is there is a
selected Cornette it’s a little bit off
though why is that I think it’s because
your browser is so so small so it moves
inside the picture is wide is that why
because the thing is that when I do it
locally it works for me
Oh like I have I have changed the size a
lot yeah which I said but you didn’t
listen to me okay sorry sorry I didn’t I
didn’t understand what you were saying
yeah I thought that you meant the size
of the window yes is this about that we
should be fixing no because we only have
20 minutes okay fair enough
bye so it’s time to add firebase so I
think let’s just skip environment
variables let’s just paste it into the
project we have little time in space
this in and then I buy race
[Music]
how are we on time 16 and a half minutes
in the blue bar there’s guides oh here
it is
alright so how the color pitched it’s
going to instead of setting the state
here it’s going to write to the
collection so it’s gonna be like it
sounds yeah stay dot pixels I think you
need to do something like this how do i
do I need to create a database and we
ready the test mode and brilla
pixels I don’t quite get her to do this
to it great or override a single
document use this set this documentation
assumes that I want to insert with a
specific doc ID but I don’t want to do
that I just wanted to add like an
arbitrary child choose it okay it’s
always set the data add a new document
in collection can you do it without the
ID and it will just work hang on Harris
added okay
oh that’s very simple it’s just add Oh
exactly a very sleek API and then it’s
gonna be this thing I suppose and then
we just this comment this out for now we
don’t have DPM what is it firebase don’t
is the word of collection is it I think
so right so I’m gonna click here and see
we get something at the firestorm Jesus
Christ this thing goes slowly
it should not be reloading I’m gonna
check for errors in the meantime Oh God
the guy is ramping this yeah we
need to fix this error this this is not
an error it’s just a warning but it’s
like it just fills up your console so
right there just add it by default if
they like you I don’t I don’t know I
think it’s just backwards compatibility
I suppose but why don’t think version it
instead like instead of hassling
everyone with this 9 minutes 9
minutes okay okay okay
it doesn’t fail oh it actually does that
I don’t I’m adding stuff now
does it add I think does it does it does
so then how do we subscribe to this
collection you make a query and then you
can own snapshot yeah do that on a
collection I think so yeah because
that’s like wearing everything it’s like
a query without invitations one thing
with pair programming is that I tend to
get stuck in like focus mode now it’s
several times where you have actually
said the solution but I was just not
open to it because I was so focused on
on problem solving yeah I think that’s
that probably a common mistake when you
start the pair programming maybe that
one in the snapshot
I liked snap I without without
exception when I write the word snapshot
I write snap first doc the data is
not a function this looks very similar
okay it’s a query snapshot object oh
yeah yeah yeah I know why this doesn’t
work it’s because this example is
observing a document while we are
observing a collection oh so it makes
sense for us to have this is a
collection and a collection doesn’t have
data it has Docs all right call dorks
it’s not a function it’s a query
snapshot just assumed should have doors
oh it’s because it’s it is not a
function and now we get query document
snapshots so does that have data dogs
[Music]
don’t don’t data yeah have them do you
want to draw them now or what are you
trying to do I’m trying to set them in
the stage the output of the map is what
you want to do set in the state
yeah so now you should get things if I
add stuff right yes this is it we’re
done boom what is the time Oh about one
minute and five seconds to go amazing
okay that’s it has parts yeah yeah of
course but like we can you can’t build a
complete software package in one hour
like getting a pug free software with
all the features you need that’s
hundreds of hours yeah I love how when
you refresh it doesn’t can we just fix
that that so when you refresh it just
draws the initial pixels oh yeah that’s
true let’s try to yes no no no no no
let’s not jump into that we did that
mistake before like oh we’re just gonna
fix one left okay and then that took
what did we learn okay of course it
helps that we did this before sort of
and failed and now we just holy you
knew how to do it but I think that now
in the end we sort of like drop the
whole Navigator driver it was like you
were the driver and I tried to like tag
along what you were thinking rather than
you listening to me but it’s true until
that point I think it went really well I
think that a way to break that is to
like stop and just constantly ask what
are we doing yeah
which I did eventually but it took me a
long time to realize that yeah but I
mean that should be my responsibility a
responsibility because it’s so easy to
when you okay now I know what we’re
doing and now I I think I have a grasp
of things to just run ahead yeah but
then you lose the Navigator and then you
lose the support of your navigator yeah
yeah this was fun I think I have to say
one thing about live share I think the
most valuable part is the whole like
marking lines yes – just show here I am
go here do this like you didn’t really
have to type anything yeah that’s not
necessarily all that useful also the
fact that you can probably you can
scroll around in the file and look at
the parts that I’m looking at one thing
that is a bit sad with when we it feels
like this time we felt like oh we can
actually do this in one hour that means
that we become a lot more task oriented
and you don’t have time for chitchat and
like idle banter if it comes very you
know like that do this
yeah it doesn’t become as cuddly and fun
as yeah I also like to take a lot of
time think of think think about the time
we have to do this yeah
I think that maybe we should like have
coffee breaks in it oh yeah like feet
Swedish Vika so like every 20 minutes we
just we don’t pull my Doros yeah a
forest break in the middle west where we
stop the timer’ and have a cup cup of
coffee and eat at least 10 cookies each
to get yes i sugar rush and maybe just
talk about something different than the
code that would all get interest yeah
that’s probably pretty doubtful
so because we are basically compressing
an entire workday into one hour so it
would make a ton of sense
so should we wrap this thing please
suggest what you would like us to do and
the next episode in the comments or on
the fun fun forum if you are a patron
you have just watched an episode of fun
fun function we release these every
Monday morning away 200 GMT but you will
forget that so you can subscribe or
watch another episode right now by
clicking here I am mpj and I’m David until next Monday morning stay curious
morning I am mpj and this is David we
have do we have a delay here no what I
was just expecting you to say something
else today we’re going to pair program a
reddit place clone using firebase and
react because we did one episode the
previously where we didn’t actually
succeed in building much so why not just
try to build it and actually fine finish
it finish it or irritability I don’t
know I think we should do it from
scratch yeah me too I think we will just
get stuck if we try to rebuild it and
yeah plus I don’t even know like then we
have to read the old code and one key
thing with these episodes should be that
you should not have to watch any other
yeah episode so we’re going to try to
build a reddit place clone reddit place
was this project where people could come
to site and add one pixel to a big
canvas and they had one pixel and then
eventually the community would just
build something out of that we have this
one thing that we should only do this
for one hour and see if we make it we’re
gonna do this we’re gonna try to pair
program for real we got some pretty good
suggestions that we weren’t actually
pair programming the last time we tried
pair programming kitchen software
quality without impacting time to
deliver it is counterintuitive but two
people working at a simple computer will
add as much functionality as two people
working separately except that it will
be much higher equality we actually had
demonstrated that quite well in the last
episode I like the last episode when we
tried to do pair programming but really
didn’t try do pair programming working
on two separate parts of the project
that’s something that we learned doesn’t
really work you mean that we didn’t
actually get good quality because we
failed yeah we didn’t get anywhere where
we we figure that we would both succeed
to do our respective tasks so we just
divided it up but one of us got stuck
and which you probably wouldn’t have if
we have both swarmed on it actually did
don’t mention anything about the driver
navigator
thing okay so which we just pair program
and see whatever rights first part you
can just mention what the driver and
navigate your concepts are when when
I’ve done pair programming where people
that are like read the book on it one
person is a driver which is the person
that is actually holds the keyboard and
is focusing on syntax and the
nitty-gritty of the algorithm making the
thing compile
well the Navigator is the person with
that holds a notepad so to speak like
okay where are we going in their grand
scheme of things ok enough talking I
think all right let’s create a project
create a react up yeah why not actually
let’s just delete the old code or
incorrect wow that takes a surprising a
lot of s npm is like we pulled in
everything create react app fun fun
filled and it’s installing I’m setting a
timer and we are go I mean I think you
shared the wrong project with me I don’t
know how this works
Oh I mean font on bottom okay my god
it’s open up code session after two
minutes
brilliant MPM start okay so let’s start
with the thing that you started with the
last time a coordinate system with some
kind of pixels almond we can click the
pixel and change the color of the pixel
so coordinate system and pixels let’s
actually you start with by declaring the
coordinate system maybe yeah good idea
suppose that this state is object and we
called it pixels perhaps and as a
process that could be an array where the
next icon for some reason this is like
the only hex code I’d know from heart it
was the background color of my first
websites or this is the coordinate
system call it pixels
all right pixels the others better just
was very consistent y’all right and then
for each this dot as this don’t state
the pixels map like I really hate the
these overlays of mistress dealio I
don’t really know why people are so
excited about intelligence the point of
this is to give me good suggestion for
the things but my code over here is
actually good suggestions like I and it
covers that and that happens to me all
the time with these links for each pixel
and it’s gonna have like left pixel the
x times something
except width and height let’s just yeah
exactly because we don’t want to use
otherwise the it’s gonna be a pain in
the ass on mobile I suppose con just
where you can hold it like picture size
is great that’s great that’s a weird
then highs to pick suffice background
color we have a failure this is not
allowed before super let me just add
super up here is not correct I know it
doesn’t its position to the top perhaps
that the wrapping div is not oh yeah
you’re right in its position absolute no
position relative and then the ones
underneath or oh yeah you all right
absolutely does that look right yes you
eight yes yes I’m gonna add a few more
and then we had a color picker I don’t
know if this correct not but we did the
way you started last time was that you
built the client-side part first so
let’s just do the color picker and then
we sort of done and then we can do like
the logic afterwards what should we have
here yeah well the one above doesn’t
matter the one above oh I’m just gonna
copy paste this install react color
progress bars are always amazing
we’re twelve minutes in alright so this
is going pretty well
requires a peer dependent screw you peer
dependencies is so incredibly incredibly
evil okay duplicate declaration react
yeah that’s sexually true yeah all right
gets a picker is defined but never use
how do we position this thing well if
you click somewhere in the coordinate
system you want to have it next to it
yeah I get that I get that but my
question is like how how do we place the
guitar picker can you just do this if I
do like left here yeah and go 100 is
gonna go left no it’s not gonna move
directions going there we could just
position it but then it’s gonna be a bit
tricky with it because it has a little
arrow up here mm-hmm purpose you can
actually just circumvent that problem by
speaking one that doesn’t have an arrow
now it’s circle this looks good this
this is playful circle picker is not
defined as in the render you call it
get a picker oh there go okay sweet so
should we like wrap it in something or
do can we just use that component and
move it around I think we’re gonna wrap
it in something I wish I liked I’m sure
there’s a way to do this but in the
interest of the heart time I figured
then in order to avoid a problem then
more power to us so out the style to the
div above there we go why didn’t that
move
oh yeah it needs to be a position sweet
yeah it works okay what next I think
that we should add like when you click
somewhere you will get the position in
the coordinate system and that way we
can update the array of pixels the
states all right so where do we add the
onclick handler I have no idea on click
here you are now in the style whoops
hair programming already paying off I’m
just like I’m just like a nanny that
just keeps you away from the from doing
bad things like no no no no don’t touch
that class no no no no that’s a knife
this dot handle pixels clicked we don’t
have much place for this console oh my
god shooting a bellman
doesn’t seem like the click is
registering or perhaps it is and it
actually does handle getting it on
defined as an onclick handler on it
anyway
let’s do a handle if it’s a clip-on sort
of lord nope still look nothing is
happening actually if that this is
called on click maybe it isn’t
[Music]
on click with C no it’s it it is you
have to have the BAM no wait a minute
wait a minute I think I fell into this
trap last time we look at this pixel
thing do you see that it’s just it
doesn’t have any height okay so five
hundred percent and with hundred percent
should that solve it
yeah let’s destroy it
okay technically it is still I think it
needs to be position:absolute in order
to work okay
because width and height doesn’t really
make sense in the context of
we might be running into problems later
because when we want to over scroll from
the grid but whatever yeah
so now that handle pixels kick should
take an event hey you know I kinda know
how like we just gotta do it ten
thousand pixels oh oh yeah oh so what
were you saying so the handle pixels
clicked function should take an event or
fall like video I stopped I keep
forgetting that like we really like I
really need a streaming camera because
it becomes way too many things to keep
in your head so add an event we will get
the coordinates from the event somehow
between acquisition of element client
why we return the position relative to
the window not the parent I think that
this looks sensible yeah and then we
we’re in our coordinate system it’s fine
Y divided by whatever it’s what’s called
pixel size oh we sure do a math door
should we see console.log the coordinate
then we can just see if it makes sense
when we tick around oh that’s true
that’s true
I think these slopes sensible so if you
click the red one the red pixel and just
make sure that when you click outside of
it it should generate the next corner
5:3 yeah yeah and above and below yeah
cool OOP things to work yeah okay so
there we have it then we should draw the
circle picker where you clicked so we
need to have a way of positioning the
circle picker using state then the style
should you have the style above it its
wrapper oh yeah yeah so the left
position should be something like this
dot select that
selected for ornette times pixel size
yes the coordinate of X this one’s a dy
boom cannot read properly X of a define
know that is because we haven’t said
victory yeah exactly so we need to
handle that case so I’m just gonna do is
selected coordinate no or no shouldn’t
you have the double ampersand that you
should only draw if you have a selected
coordinate no yeah you’re right
but it should be this stop selected
coordinate yeah it’s the thing is each
should be and also I should close my
tags correctly Oh closing it there I
think this has this state selected
coordinate so the arrows of this stop
States
oh yeah yeah I get it let’s just test
that X is 4 y is 5 9 then it appears
does that look like for a 90-year yeah
so then we need to actually set that is
not set state selected coordinate and
then your score not I suppose yeah
whoops cannot read property set state of
undefined oh yeah a constant standard
crap of JavaScript done this for many
many years and still fall into it so
that means that when you do like this
that means that this is not gonna handle
pics expect it’s gonna lose its this
context so the way that you tend to do
this is just create a new function on
every every render that is bound to this
[Music]
Thank You working okay now when we click
can we just ripple in for a little while
that this is going really really well
we just want to get the color from when
we’re choosing from the the so how does
this work then react color bomb on
change you get a color that has a hex
property we go on change this dot handle
color picked I do an absurd if there is
one X Y which would overwrite it
otherwise we should just insert it
yups so let’s just grab the coordinates
this got state don’t pixels dot Kong cat
and we’re gonna add a new pixel with X
you can actually just select append it
with the this but they don’t selected
coordinates and give it a color that we
have here which is gonna be colored on X
Jesus Christ this is a lot easier now
that you’ve done it one time I feel
almost like superhuman compared to last
time oh I lost David mm-hmm
do I have connection know what’s
happening where is my connection I’m
back I love my mother-in-law but she has
the worst Wi-Fi that’s why I’m getting a
cable yeah we are constantly improving
our streaming setup for this like we’re
not used to the format and it’s gonna
have kinks but I mean I’m I’m actually
enjoying that a little bit it feels like
I can I’m sorry like it it feels like
when I started youtubing like when
you’re learning so much like every
learning it’s like I have extremely high
impact do you just realize like oh we
did with sync pepper or gonna all we
should get this thing and like I really
like that when it’s like moving so fast
do you get it to set a color when you
click the color picker no let’s see I’m
I need to actually do the sets
it’s yes also and this that state don’t
pixels oh pixel ah if you’re sitting the
state and cept only the pixels do its
overwrite the selected Cornett part of
the state who does it just set the
pixels feed it just over it’s this part
of the site okay whoops this not state
not set state it’s not function no
that’s correct it’s only this that’s at
stake I expected this to do something
it’s working it does yes for me it’s
working for you yes
what is that that’s so weird it’s not
working for me just refresh your browser
why what I need to refresh your browser
I don’t know it just started working for
me today we have a little a very little
time don’t talk so much
now we have to hide the color picture
once we have clicked and set a color we
just set the selected coordinate to no
doesn’t work no it doesn’t know because
I what I think is happening because that
was happening last time was that it
generates like it generates a new clique
which just sets it again mm-hmm so I
think that that the way I did it last
time was that I ignore pixaflux if
selected coordinate is there is a
selected Cornette it’s a little bit off
though why is that I think it’s because
your browser is so so small so it moves
inside the picture is wide is that why
because the thing is that when I do it
locally it works for me
Oh like I have I have changed the size a
lot yeah which I said but you didn’t
listen to me okay sorry sorry I didn’t I
didn’t understand what you were saying
yeah I thought that you meant the size
of the window yes is this about that we
should be fixing no because we only have
20 minutes okay fair enough
bye so it’s time to add firebase so I
think let’s just skip environment
variables let’s just paste it into the
project we have little time in space
this in and then I buy race
[Music]
how are we on time 16 and a half minutes
in the blue bar there’s guides oh here
it is
alright so how the color pitched it’s
going to instead of setting the state
here it’s going to write to the
collection so it’s gonna be like it
sounds yeah stay dot pixels I think you
need to do something like this how do i
do I need to create a database and we
ready the test mode and brilla
pixels I don’t quite get her to do this
to it great or override a single
document use this set this documentation
assumes that I want to insert with a
specific doc ID but I don’t want to do
that I just wanted to add like an
arbitrary child choose it okay it’s
always set the data add a new document
in collection can you do it without the
ID and it will just work hang on Harris
added okay
oh that’s very simple it’s just add Oh
exactly a very sleek API and then it’s
gonna be this thing I suppose and then
we just this comment this out for now we
don’t have DPM what is it firebase don’t
is the word of collection is it I think
so right so I’m gonna click here and see
we get something at the firestorm Jesus
Christ this thing goes slowly
it should not be reloading I’m gonna
check for errors in the meantime Oh God
the guy is ramping this yeah we
need to fix this error this this is not
an error it’s just a warning but it’s
like it just fills up your console so
right there just add it by default if
they like you I don’t I don’t know I
think it’s just backwards compatibility
I suppose but why don’t think version it
instead like instead of hassling
everyone with this 9 minutes 9
minutes okay okay okay
it doesn’t fail oh it actually does that
I don’t I’m adding stuff now
does it add I think does it does it does
so then how do we subscribe to this
collection you make a query and then you
can own snapshot yeah do that on a
collection I think so yeah because
that’s like wearing everything it’s like
a query without invitations one thing
with pair programming is that I tend to
get stuck in like focus mode now it’s
several times where you have actually
said the solution but I was just not
open to it because I was so focused on
on problem solving yeah I think that’s
that probably a common mistake when you
start the pair programming maybe that
one in the snapshot
I liked snap I without without
exception when I write the word snapshot
I write snap first doc the data is
not a function this looks very similar
okay it’s a query snapshot object oh
yeah yeah yeah I know why this doesn’t
work it’s because this example is
observing a document while we are
observing a collection oh so it makes
sense for us to have this is a
collection and a collection doesn’t have
data it has Docs all right call dorks
it’s not a function it’s a query
snapshot just assumed should have doors
oh it’s because it’s it is not a
function and now we get query document
snapshots so does that have data dogs
[Music]
don’t don’t data yeah have them do you
want to draw them now or what are you
trying to do I’m trying to set them in
the stage the output of the map is what
you want to do set in the state
yeah so now you should get things if I
add stuff right yes this is it we’re
done boom what is the time Oh about one
minute and five seconds to go amazing
okay that’s it has parts yeah yeah of
course but like we can you can’t build a
complete software package in one hour
like getting a pug free software with
all the features you need that’s
hundreds of hours yeah I love how when
you refresh it doesn’t can we just fix
that that so when you refresh it just
draws the initial pixels oh yeah that’s
true let’s try to yes no no no no no
let’s not jump into that we did that
mistake before like oh we’re just gonna
fix one left okay and then that took
what did we learn okay of course it
helps that we did this before sort of
and failed and now we just holy you
knew how to do it but I think that now
in the end we sort of like drop the
whole Navigator driver it was like you
were the driver and I tried to like tag
along what you were thinking rather than
you listening to me but it’s true until
that point I think it went really well I
think that a way to break that is to
like stop and just constantly ask what
are we doing yeah
which I did eventually but it took me a
long time to realize that yeah but I
mean that should be my responsibility a
responsibility because it’s so easy to
when you okay now I know what we’re
doing and now I I think I have a grasp
of things to just run ahead yeah but
then you lose the Navigator and then you
lose the support of your navigator yeah
yeah this was fun I think I have to say
one thing about live share I think the
most valuable part is the whole like
marking lines yes – just show here I am
go here do this like you didn’t really
have to type anything yeah that’s not
necessarily all that useful also the
fact that you can probably you can
scroll around in the file and look at
the parts that I’m looking at one thing
that is a bit sad with when we it feels
like this time we felt like oh we can
actually do this in one hour that means
that we become a lot more task oriented
and you don’t have time for chitchat and
like idle banter if it comes very you
know like that do this
yeah it doesn’t become as cuddly and fun
as yeah I also like to take a lot of
time think of think think about the time
we have to do this yeah
I think that maybe we should like have
coffee breaks in it oh yeah like feet
Swedish Vika so like every 20 minutes we
just we don’t pull my Doros yeah a
forest break in the middle west where we
stop the timer’ and have a cup cup of
coffee and eat at least 10 cookies each
to get yes i sugar rush and maybe just
talk about something different than the
code that would all get interest yeah
that’s probably pretty doubtful
so because we are basically compressing
an entire workday into one hour so it
would make a ton of sense
so should we wrap this thing please
suggest what you would like us to do and
the next episode in the comments or on
the fun fun forum if you are a patron
you have just watched an episode of fun
fun function we release these every
Monday morning away 200 GMT but you will
forget that so you can subscribe or
watch another episode right now by
clicking here I am mpj and I’m David until next Monday morning stay curious
Please follow and like us: