one one hour BAM counting let’s pair
program and read it play strong with
firebase where every function returns a
promise all right
[Music]
Monday morning we have David with us
today we are going to do kind of the
same thing as last week we’re gonna code
and or something that is suggested by
the audience and we’re going to use it
with an arbitrary technology also chosen
by the audience and an arbitrary
restriction also chosen by the audience
and we’re gonna do it pair program live
pair programming sort of sort of wraps
it will be edited who knows who so so
what are we gonna do let’s just figure
spend five minutes figuring out what it
is that we’re supposed to be doing and
fun forum so we have one restriction we
have very very little time like this is
setting us up so much for failure it’s
not even funny all right we should
really have a timer
hang on setup and time a poor feminity
all right the time box we need to decide
within five minutes what we’re gonna do
what tech to use and what silly
restriction we should have so sad to
suggest billing Skynet seems a bit woozy
too easy
builder stories help characters
locations as an interesting one tech
view Jess like I really dislike view for
arbitrary since have you ever used it No
so that’s perhaps that’s a good thing to
do try it out I have never used it
no that’s true like because I’m a view
racist I sure solely use view so maybe a
bit over-ambitious but something like
ready to place what is ready – yeah
let’s read its place the experiment
involved an online cameras of 1 million
pixel squares located at the subreddit
add a subreddit called our place which
registered users could add it by
changing the color a single pixel on a
16 color palette oh that’s pretty cool
actually I like the idea of some kind of
weird collaborative like yes the canvas
where all users can just dump and I
figured like if you if we use something
like firebase or something then it will
probably be relatively easy to build as
well what do we have on the timer
oh and we have two minutes left MPD is
ideal social network that would probably
be just something that is completely
focused on just meeting other people
like just event based tinder yeah like
now we could use a tinder that it’s not
about meeting it’s just about being
judged but let’s just write the title or
this thing like Reddit place let’s let’s
pair program a reddit place Klum with
what firebase we need an arbitrary
restriction last week we had Comic Sans
so here’s a bunch of like only is one
hand make it in your Swift the only use
libraries you never used before
okay one minute to find a restriction
from the Twitter yeah sure meat no
mutating state where blindfold it make
it compatible with Internet Explorer 6
hey IQ like this everywhere every
function should return a promise okay
let’s do that where every function
returns a promise so basically I guess
we should just like design-wise it’s
just one blank page that with pixels
like here is that page see we have
pixels but if we’re doing mobile they
are really really hard to get so we have
to have some sort of way of just like
zooming in on a pixel so we should have
like a coordinate system that exists
that doesn’t have to correspond to every
pixel so perhaps it’s one each each
pixel in our world is perhaps one
fraction in the CSS so whatever I don’t
know yeah and there yeah yeah and when
you click
a when you click a spot then that will
have to pop up some kind of color picker
or that you like you have a color picker
somewhere so for each thing Oh were you
only allowed to do one pixel yeah you
would like the restriction on the ready
place was that you kind of once you
place the pixel you timed out so you
couldn’t place another pixel for five
minutes that’s probably out of the scope
for okay so I suppose we start the timer
yeah one one hour BAM
counting let’s pair program and read it
place clone with firebase where every
function returns a promise all right all
right so I will set up the visual studio
code environment and like a great write
react app I suppose while you get us
some firebase keys googling firebase
keys what are we gonna call this fun fun
place
fun fun theme I love watch the progress
voice alright I have a react environment
I’m star setting up a cloud fire store I
guess that’s what we’re gonna need test
mode allowing all reads and writes to
database so secure I’m sure that no
audience member will mess with that no
no database is ready to go just add data
so it sounds so simple
cool I sent you the collaboration link
or vicious idiot oh I’m here I got it
so when we’re doing dishes to do code
can I save things like hello now I am
updating
and then can I save it and it will be
saved for you as well
yes oh that’s pretty cool huh that’s
funny we have 53 minutes remaining
so how do we get the firebase stuff in I
don’t know
I can check out the docs and see how we
do that and you can start with something
else you realize that my recording
stopped at some point
Oh your video recording yeah but if it
was stopped I will replace it without
like mspaint drawing of myself perhaps
we need to get some stream or a gear for
this yes like eventually I want a stream
like with my proper camera like I know
exactly what gear to get is so expensive
support the show on patreon by the way
okay you need to add the firebase admin
SDK to your app so just type hey hey
give me the console and let me type yeah
don’t you have the console where’s it
gonna live share livejournal share
terminal read/write right now you should
have a terminal oh my god that is so
cool amazing I love this this is this is
a lot of fun like I can keep on doing
this while you’re doing whatever you’re
doing
yeah we should like probably invite like
audience members to do this oh that’s
awesome
is there a way to share and remote like
Chrome because that would be very useful
if we could like navigate Docs together
and stuff like that if you’re watching
this and you know how to do that bleep
write it in the comments because we
can’t do it here because then the entire
I don’t know 50 minutes will go to that
okay what are we doing this dot state
dot I’m gonna put this on cloud
functions on Google cloud platform or as
our own server I figure like what’s the
path of least resistance just do it
that’s our own server because we have
never used to cloud platform or
functions in that way I think isn’t this
just a client app like we’re not doing
are we doing things server-side at all
no because everything is in their
storage because right now we’re not like
at a later phase I suppose that we will
be bothering with with security yeah and
then we will probably have to have like
it then perhaps a cloud function would
be an a good thing because then we could
just make an HTTP request and then that
writes to the database if it determines
that the client is allowed to but and
then we then it won’t be able to do
orbit arbitrary writes to the database
as well but we’ll do that later for each
so oh that worked sort of ok I’m
enabling anonymous sign in provider for
our cloud project or whatever they’re
calling it that sounds amazing what does
that mean that means that I think I’m
enabling every everyone to be able to
write and read and do whatever they want
super secure position:absolute now
things will work oh I’m surprised that
this actually works why does that work
I could probably refactor this to be
cooler these structuring for the Queen’s
suite we have 41 minutes remaining and
I’ve drawn a pixel I’m gonna draw
another pixel yeah I need to actually
multiply this by 10 or more work how’s
it going I’m reading no I hope the fun
part here we’re just using tools that I
know figure out a color picker here
yum install reacted color github this
looks pretty nice Matias I have to you
have to authenticate with firebase so
let’s just try this I will post your
terminal stuff and we’ll see what
happens when I run mmm no firebase now
we probably need to install the npm
module you get some kind of
authentication window popping up right
now
no perhaps I think that sort like a
shorthand of like generating keys and
stuff we run it in a real terminal
nothing happens no we have to firebase
login first wait wait wait
all right won’t act i X is your Google
Account login successful brilliant
aha that’s funky like the default
firebase product for this directory we
have a project court I misunderstood
project active run with project I’ve
defined on alias while you’re doing that
I’m going to do define this field
clicked function I supposedly to get
some kind of event let’s just console
all right let’s see what we have here I
can click the the dear I suppose I was
expecting that that would have worked
oh I always just clicking and correctly
so I was I was trying to click down here
but if you watch the dev it’s actually
yes that sighs what are you calling your
coordinate feel like something pixels or
are you calling it I’m calling it pixel
painting sort of a collection with
something in it so do we have an an x
and a y and a color we started yeah
exactly
if you look in app top J is on line 12
oh yeah great
it’s very nice that I can see when where
you have oh that’s awesome
so Microsoft are not sponsoring us but
they should they should contact us you
have you know the business you know you
find it on the about page of the YouTube
channel when the color picker has
changed then this as Joel’s gives stump
also oh and gives me a hex
excellent blah blah blah blah blah blah
so when we have a coordinate clicked
going to set the state to whatever is
like the current pixel and so on X so
it’s going to be x + y I mean I I could
be just doing this and just like
transferring that but to be honest I’m
not a fan of that kind of programmer
comes because it becomes hard to figure
out what the hell coordinate clicked is
actually accepting and what’s it it’s
doing this is a lot easier to you know
follow what is going along and it makes
like coordinate click does a simpler a
simpler clearer function rather than
something that passes something
arbitrary along that should maybe be
formatted in a certain way if this dot
state dot current pixel there so if I
click now that should be showing the
color yes it does con cats I think we
can do this
mmm that did not work why not why not
why why is the console not expanded
console is so small well it’s it what is
what console it’s so tiny
oh it’s only the console that is
actually really big nothing but the
console can actually inspect the state
here because we have the react chrome
plug-in which is really nice it’s
actually adding the the pixels here so
it has an X and a y-coordinate click we
need to actually divide this by 10 or it
won’t be correct I think oh hang on I
can’t do this I need to use set state I
am done this dot set state
I don’t know react
when we worked with it for years pixel
it’s this even fire ring oh the car
pixel is oh it’s because it’s still
triggering its in its triggering and
whenever I clicking the color pick it’s
probably triggering a new click on the
on the dip which we should prevent so
perhaps oh hello there beautiful think I
have this working now actually you check
out the screen share yeah
wow that’s awesome it’s not perfect math
dot for the world yeah now it’s actually
like pixely also the position of the
holes like a picker is bit messed up the
color paper container position oh you
know perhaps I can actually use the
what is happening must be wrapped in an
enclosing tag what is wrong with me it’s
Emily’s hard 14 minutes remaining
okay yeah soon I have something here
okay I haven’t really read the
documentation that well well check out
firebase Jas so I think it’s trying to
initialize and then I’m trying to sign
in and honestly and then try to get the
pixels in the pixels collection I don’t
know where to run that how do you do
this export module dot exports or I
don’t know it’s different in wherever
stuff import stuff from like this is so
annoying like element dave has no
corresponding closing tag oh it’s
because I’m getting that one come on
are you compiling please compile is it
running yeah module not found firebase
functions in a football field SRC it
would have been good to sort of I don’t
yes
let’s make videos when we draw the same
conclusion in every video so people know
what to expect exactly so it’s like yeah
this would have been good to learn
beforehand and then we don’t learn
beforehand in the next video brutal okay
more Joel not what the hell is this
okay firebase admin is that it but I
like this whole code sharing and
terminal sharing thing yes logo is
defined what never used uh-huh okay then
it’s the versioning what is that comment
that out and I will keep on working uh
you can actually come and out oh yeah of
course that way you can break my code
alive cool then I can do that and that
but I expected it to I cannot hear what
you’re saying
writing in the chat I cannot hear what
you are saying you are a robot well it’s
a really bad Wi-Fi here and then I used
my 4G and then that wasn’t working so I
tried the Wi-Fi again and then so we’re
are we on time oh three minutes
so I suppose a firebase we didn’t solve
that part no that’s on me I suppose the
firebase setup is they have some work to
do all right so perhaps you should
switch to that I I don’t think that I
think that a mistake here is that we
should ask each other for help when
we’re stuck yes because I have been like
having super flow here and like this so
let’s try to like give ourselves like
ten more minutes and try to solve that
so once we’ve altered I just want to
make a query and then get something get
doesn’t give you the live feed it just
gets one document at one instance I just
wanted to try something and I don’t know
if I’m doing this like the firebase
initialised app with the firebase
configuration if I really have to do
that off I’m not really sure I think
that it works in mysterious ways
is there a firebase old package it
should be yes install that it’s really
annoying that they’re all there examples
are or isolated give us a full example
you bastards so I can send you one
example that they do have
friendly eat stop Jaya but these are
global what do we that pull this in
firebase so it’s it’s an example to
serve it on firebase in some way so
perhaps that’s why they don’t have the
requirements brat because they sort of
assume that it’s available globally and
someone some how could that be the case
oh you think that why firebase is sort
of weird when you’re using it with with
NPM yeah we don’t do this initialize app
thing oh okay now I get it yeah yeah
okay now I get it like this is just
yeah because we don’t have
access to that right now we need the
actual keys of course you know a lot of
sense so this is just this is the you
need to paste your actual keys in here I
would have actually seen that if I had
just read the code from top to bottom
but I just started staring at this thing
so I suppose that then that this earth
here is only available once you actually
do the initializer we actually had a
restriction that every function should
return a promise is that let’s be it oh
I suppose I could make every function
here return a promise but it actually
because everything is just happening and
as a consequence of state being changed
if I make this and sing like I’m going
while you’re doing that I’m going to
yell conform to our arbitrary
requirement Oh can’t resolve service
account GJ son why perhaps it can pull
in Jason Potts
she would just save it straight up in
the code just to get because I’m
possible that the Jason thing in no
205’s all signing on your own
oh god white behavior data be stored in
fights or conscious change and your app
may break today on court in promise
cannot confirm convert undefined or null
to object forgetting this thing by res
config environment variable is missing
initializing firebase admin will fail
but we’re not initialized in firebase
admin so ah I think that we let’s square
it
we’re over time we failed doing a simple
query to firebase and we cannot figure
out what is wrong but that’s just one
hour and there are at least eight hours
in a working day so for one hour sort of
that’s okay I would money theory like
just from my previous experience with
fibers is a firebase is kind of based on
you pulling in script tags and if you
don’t do it like that and you start you
want to use NPM like we use here things
are just like the docs are not adapted
to that so we’re not really using their
golden path because their golden path is
dumb but I don’t know I I don’t know
like what does this even mean like no
bonus gr PC expense they request over
dependency is an expression like what
are these things else No
we will probably figure it out but not
in an hour
but it got pretty far like I I kind of
have this pixel figure working and I
think that we could probably get get it
working in what do you learn so first I
can say that I learned that firebase is
like any other service that you just
have to figure out how to how they’re
doing authentication everything and I’m
sure it’s super sweet once you got that
service account thing and everything
running but in one hour I didn’t get it
running so perhaps it’s a two hour task
or eight hour test but I think by
looking at the documentation it seems
pretty sweet once we get past this part
so what did you learn on the front end I
learned that Visual Studio like coaching
is pretty great it’s pretty cool like it
was that was very simple to get working
yes like we literally just tried this
for like ten seconds before the stream
and everything just worked extremely
smoothly and it was very easy to yeah I
just had to install the extension and
then I got the link and I clicked the
link and it said do we want to open code
with this link and then I said okay and
it started working also getting like
this react color like it’s so nice to
have a strong ecosystem I could just
like oh I want to react color picker and
then I asked oogle react color picker
and there was one that was super easy to
to get working it was also good that we
discussed like had this like that we did
beforehand that made things a lot easier
because it gave us like a correct that
gave me a direction to work with we also
it was also good that we figured this
thing out where we like didn’t do like a
pixel coordinate system because that
would have meant made this a lot more
annoying the arbitrary restriction that
we had was actually not all that
interesting in the in the context of a
react app where everything is
functionally reactive because you’re not
really waiting for any function call to
complete you’re just calling function so
the fact that they return a promise is
completely irrelevant because you’re
never using the return values of
anything you’re setting state and then
things happen as a consequence of that
so and then the lesson is that we should
learn the basic tools before we start
using them because otherwise it’s always
this whole learning thing but I guess
like in reality that’s the way you do it
you have to learn it the way while you
while you’re trying to figure things out
you have to you’re learning it while
you’re figuring it out it’s a common
programming mistake to sort of try it
try to figure things out on your own it
seemed like a good idea to parallel
process yes but it wasn’t but it wasn’t
pair programming no like I think that we
if we had focused on two hands on one
issue at a time we would have been much
further along like I think that this
actually ironically we kind of
demonstrated the problem of not doing
pair programming because you when you
are not doing pair programming your team
is always as like
if there is a breakage on one chain like
the entire team slows to that speed so
that that’s why more programming and
pair programming works so well because
you’re constantly swarming on the most
difficult problem at the time which
means that you are actually maximizing
your velocity ironically even though
like you’re not maximizing your
efficiency also like we it would be even
better if we could find some way of
remote controlling the browser I’m sure
that that is possible yeah you okay so
we’re done yeah I think so you watched
an episode of fun fun function we
release these every Monday morning Oh
800 GMT but you will forget that so you
can subscribe by clicking here or watch
another episode right now by clicking I
am mpj and and I’m David until next
Monday morning say curious [Music]
program and read it play strong with
firebase where every function returns a
promise all right
[Music]
Monday morning we have David with us
today we are going to do kind of the
same thing as last week we’re gonna code
and or something that is suggested by
the audience and we’re going to use it
with an arbitrary technology also chosen
by the audience and an arbitrary
restriction also chosen by the audience
and we’re gonna do it pair program live
pair programming sort of sort of wraps
it will be edited who knows who so so
what are we gonna do let’s just figure
spend five minutes figuring out what it
is that we’re supposed to be doing and
fun forum so we have one restriction we
have very very little time like this is
setting us up so much for failure it’s
not even funny all right we should
really have a timer
hang on setup and time a poor feminity
all right the time box we need to decide
within five minutes what we’re gonna do
what tech to use and what silly
restriction we should have so sad to
suggest billing Skynet seems a bit woozy
too easy
builder stories help characters
locations as an interesting one tech
view Jess like I really dislike view for
arbitrary since have you ever used it No
so that’s perhaps that’s a good thing to
do try it out I have never used it
no that’s true like because I’m a view
racist I sure solely use view so maybe a
bit over-ambitious but something like
ready to place what is ready – yeah
let’s read its place the experiment
involved an online cameras of 1 million
pixel squares located at the subreddit
add a subreddit called our place which
registered users could add it by
changing the color a single pixel on a
16 color palette oh that’s pretty cool
actually I like the idea of some kind of
weird collaborative like yes the canvas
where all users can just dump and I
figured like if you if we use something
like firebase or something then it will
probably be relatively easy to build as
well what do we have on the timer
oh and we have two minutes left MPD is
ideal social network that would probably
be just something that is completely
focused on just meeting other people
like just event based tinder yeah like
now we could use a tinder that it’s not
about meeting it’s just about being
judged but let’s just write the title or
this thing like Reddit place let’s let’s
pair program a reddit place Klum with
what firebase we need an arbitrary
restriction last week we had Comic Sans
so here’s a bunch of like only is one
hand make it in your Swift the only use
libraries you never used before
okay one minute to find a restriction
from the Twitter yeah sure meat no
mutating state where blindfold it make
it compatible with Internet Explorer 6
hey IQ like this everywhere every
function should return a promise okay
let’s do that where every function
returns a promise so basically I guess
we should just like design-wise it’s
just one blank page that with pixels
like here is that page see we have
pixels but if we’re doing mobile they
are really really hard to get so we have
to have some sort of way of just like
zooming in on a pixel so we should have
like a coordinate system that exists
that doesn’t have to correspond to every
pixel so perhaps it’s one each each
pixel in our world is perhaps one
fraction in the CSS so whatever I don’t
know yeah and there yeah yeah and when
you click
a when you click a spot then that will
have to pop up some kind of color picker
or that you like you have a color picker
somewhere so for each thing Oh were you
only allowed to do one pixel yeah you
would like the restriction on the ready
place was that you kind of once you
place the pixel you timed out so you
couldn’t place another pixel for five
minutes that’s probably out of the scope
for okay so I suppose we start the timer
yeah one one hour BAM
counting let’s pair program and read it
place clone with firebase where every
function returns a promise all right all
right so I will set up the visual studio
code environment and like a great write
react app I suppose while you get us
some firebase keys googling firebase
keys what are we gonna call this fun fun
place
fun fun theme I love watch the progress
voice alright I have a react environment
I’m star setting up a cloud fire store I
guess that’s what we’re gonna need test
mode allowing all reads and writes to
database so secure I’m sure that no
audience member will mess with that no
no database is ready to go just add data
so it sounds so simple
cool I sent you the collaboration link
or vicious idiot oh I’m here I got it
so when we’re doing dishes to do code
can I save things like hello now I am
updating
and then can I save it and it will be
saved for you as well
yes oh that’s pretty cool huh that’s
funny we have 53 minutes remaining
so how do we get the firebase stuff in I
don’t know
I can check out the docs and see how we
do that and you can start with something
else you realize that my recording
stopped at some point
Oh your video recording yeah but if it
was stopped I will replace it without
like mspaint drawing of myself perhaps
we need to get some stream or a gear for
this yes like eventually I want a stream
like with my proper camera like I know
exactly what gear to get is so expensive
support the show on patreon by the way
okay you need to add the firebase admin
SDK to your app so just type hey hey
give me the console and let me type yeah
don’t you have the console where’s it
gonna live share livejournal share
terminal read/write right now you should
have a terminal oh my god that is so
cool amazing I love this this is this is
a lot of fun like I can keep on doing
this while you’re doing whatever you’re
doing
yeah we should like probably invite like
audience members to do this oh that’s
awesome
is there a way to share and remote like
Chrome because that would be very useful
if we could like navigate Docs together
and stuff like that if you’re watching
this and you know how to do that bleep
write it in the comments because we
can’t do it here because then the entire
I don’t know 50 minutes will go to that
okay what are we doing this dot state
dot I’m gonna put this on cloud
functions on Google cloud platform or as
our own server I figure like what’s the
path of least resistance just do it
that’s our own server because we have
never used to cloud platform or
functions in that way I think isn’t this
just a client app like we’re not doing
are we doing things server-side at all
no because everything is in their
storage because right now we’re not like
at a later phase I suppose that we will
be bothering with with security yeah and
then we will probably have to have like
it then perhaps a cloud function would
be an a good thing because then we could
just make an HTTP request and then that
writes to the database if it determines
that the client is allowed to but and
then we then it won’t be able to do
orbit arbitrary writes to the database
as well but we’ll do that later for each
so oh that worked sort of ok I’m
enabling anonymous sign in provider for
our cloud project or whatever they’re
calling it that sounds amazing what does
that mean that means that I think I’m
enabling every everyone to be able to
write and read and do whatever they want
super secure position:absolute now
things will work oh I’m surprised that
this actually works why does that work
I could probably refactor this to be
cooler these structuring for the Queen’s
suite we have 41 minutes remaining and
I’ve drawn a pixel I’m gonna draw
another pixel yeah I need to actually
multiply this by 10 or more work how’s
it going I’m reading no I hope the fun
part here we’re just using tools that I
know figure out a color picker here
yum install reacted color github this
looks pretty nice Matias I have to you
have to authenticate with firebase so
let’s just try this I will post your
terminal stuff and we’ll see what
happens when I run mmm no firebase now
we probably need to install the npm
module you get some kind of
authentication window popping up right
now
no perhaps I think that sort like a
shorthand of like generating keys and
stuff we run it in a real terminal
nothing happens no we have to firebase
login first wait wait wait
all right won’t act i X is your Google
Account login successful brilliant
aha that’s funky like the default
firebase product for this directory we
have a project court I misunderstood
project active run with project I’ve
defined on alias while you’re doing that
I’m going to do define this field
clicked function I supposedly to get
some kind of event let’s just console
all right let’s see what we have here I
can click the the dear I suppose I was
expecting that that would have worked
oh I always just clicking and correctly
so I was I was trying to click down here
but if you watch the dev it’s actually
yes that sighs what are you calling your
coordinate feel like something pixels or
are you calling it I’m calling it pixel
painting sort of a collection with
something in it so do we have an an x
and a y and a color we started yeah
exactly
if you look in app top J is on line 12
oh yeah great
it’s very nice that I can see when where
you have oh that’s awesome
so Microsoft are not sponsoring us but
they should they should contact us you
have you know the business you know you
find it on the about page of the YouTube
channel when the color picker has
changed then this as Joel’s gives stump
also oh and gives me a hex
excellent blah blah blah blah blah blah
so when we have a coordinate clicked
going to set the state to whatever is
like the current pixel and so on X so
it’s going to be x + y I mean I I could
be just doing this and just like
transferring that but to be honest I’m
not a fan of that kind of programmer
comes because it becomes hard to figure
out what the hell coordinate clicked is
actually accepting and what’s it it’s
doing this is a lot easier to you know
follow what is going along and it makes
like coordinate click does a simpler a
simpler clearer function rather than
something that passes something
arbitrary along that should maybe be
formatted in a certain way if this dot
state dot current pixel there so if I
click now that should be showing the
color yes it does con cats I think we
can do this
mmm that did not work why not why not
why why is the console not expanded
console is so small well it’s it what is
what console it’s so tiny
oh it’s only the console that is
actually really big nothing but the
console can actually inspect the state
here because we have the react chrome
plug-in which is really nice it’s
actually adding the the pixels here so
it has an X and a y-coordinate click we
need to actually divide this by 10 or it
won’t be correct I think oh hang on I
can’t do this I need to use set state I
am done this dot set state
I don’t know react
when we worked with it for years pixel
it’s this even fire ring oh the car
pixel is oh it’s because it’s still
triggering its in its triggering and
whenever I clicking the color pick it’s
probably triggering a new click on the
on the dip which we should prevent so
perhaps oh hello there beautiful think I
have this working now actually you check
out the screen share yeah
wow that’s awesome it’s not perfect math
dot for the world yeah now it’s actually
like pixely also the position of the
holes like a picker is bit messed up the
color paper container position oh you
know perhaps I can actually use the
what is happening must be wrapped in an
enclosing tag what is wrong with me it’s
Emily’s hard 14 minutes remaining
okay yeah soon I have something here
okay I haven’t really read the
documentation that well well check out
firebase Jas so I think it’s trying to
initialize and then I’m trying to sign
in and honestly and then try to get the
pixels in the pixels collection I don’t
know where to run that how do you do
this export module dot exports or I
don’t know it’s different in wherever
stuff import stuff from like this is so
annoying like element dave has no
corresponding closing tag oh it’s
because I’m getting that one come on
are you compiling please compile is it
running yeah module not found firebase
functions in a football field SRC it
would have been good to sort of I don’t
yes
let’s make videos when we draw the same
conclusion in every video so people know
what to expect exactly so it’s like yeah
this would have been good to learn
beforehand and then we don’t learn
beforehand in the next video brutal okay
more Joel not what the hell is this
okay firebase admin is that it but I
like this whole code sharing and
terminal sharing thing yes logo is
defined what never used uh-huh okay then
it’s the versioning what is that comment
that out and I will keep on working uh
you can actually come and out oh yeah of
course that way you can break my code
alive cool then I can do that and that
but I expected it to I cannot hear what
you’re saying
writing in the chat I cannot hear what
you are saying you are a robot well it’s
a really bad Wi-Fi here and then I used
my 4G and then that wasn’t working so I
tried the Wi-Fi again and then so we’re
are we on time oh three minutes
so I suppose a firebase we didn’t solve
that part no that’s on me I suppose the
firebase setup is they have some work to
do all right so perhaps you should
switch to that I I don’t think that I
think that a mistake here is that we
should ask each other for help when
we’re stuck yes because I have been like
having super flow here and like this so
let’s try to like give ourselves like
ten more minutes and try to solve that
so once we’ve altered I just want to
make a query and then get something get
doesn’t give you the live feed it just
gets one document at one instance I just
wanted to try something and I don’t know
if I’m doing this like the firebase
initialised app with the firebase
configuration if I really have to do
that off I’m not really sure I think
that it works in mysterious ways
is there a firebase old package it
should be yes install that it’s really
annoying that they’re all there examples
are or isolated give us a full example
you bastards so I can send you one
example that they do have
friendly eat stop Jaya but these are
global what do we that pull this in
firebase so it’s it’s an example to
serve it on firebase in some way so
perhaps that’s why they don’t have the
requirements brat because they sort of
assume that it’s available globally and
someone some how could that be the case
oh you think that why firebase is sort
of weird when you’re using it with with
NPM yeah we don’t do this initialize app
thing oh okay now I get it yeah yeah
okay now I get it like this is just
yeah because we don’t have
access to that right now we need the
actual keys of course you know a lot of
sense so this is just this is the you
need to paste your actual keys in here I
would have actually seen that if I had
just read the code from top to bottom
but I just started staring at this thing
so I suppose that then that this earth
here is only available once you actually
do the initializer we actually had a
restriction that every function should
return a promise is that let’s be it oh
I suppose I could make every function
here return a promise but it actually
because everything is just happening and
as a consequence of state being changed
if I make this and sing like I’m going
while you’re doing that I’m going to
yell conform to our arbitrary
requirement Oh can’t resolve service
account GJ son why perhaps it can pull
in Jason Potts
she would just save it straight up in
the code just to get because I’m
possible that the Jason thing in no
205’s all signing on your own
oh god white behavior data be stored in
fights or conscious change and your app
may break today on court in promise
cannot confirm convert undefined or null
to object forgetting this thing by res
config environment variable is missing
initializing firebase admin will fail
but we’re not initialized in firebase
admin so ah I think that we let’s square
it
we’re over time we failed doing a simple
query to firebase and we cannot figure
out what is wrong but that’s just one
hour and there are at least eight hours
in a working day so for one hour sort of
that’s okay I would money theory like
just from my previous experience with
fibers is a firebase is kind of based on
you pulling in script tags and if you
don’t do it like that and you start you
want to use NPM like we use here things
are just like the docs are not adapted
to that so we’re not really using their
golden path because their golden path is
dumb but I don’t know I I don’t know
like what does this even mean like no
bonus gr PC expense they request over
dependency is an expression like what
are these things else No
we will probably figure it out but not
in an hour
but it got pretty far like I I kind of
have this pixel figure working and I
think that we could probably get get it
working in what do you learn so first I
can say that I learned that firebase is
like any other service that you just
have to figure out how to how they’re
doing authentication everything and I’m
sure it’s super sweet once you got that
service account thing and everything
running but in one hour I didn’t get it
running so perhaps it’s a two hour task
or eight hour test but I think by
looking at the documentation it seems
pretty sweet once we get past this part
so what did you learn on the front end I
learned that Visual Studio like coaching
is pretty great it’s pretty cool like it
was that was very simple to get working
yes like we literally just tried this
for like ten seconds before the stream
and everything just worked extremely
smoothly and it was very easy to yeah I
just had to install the extension and
then I got the link and I clicked the
link and it said do we want to open code
with this link and then I said okay and
it started working also getting like
this react color like it’s so nice to
have a strong ecosystem I could just
like oh I want to react color picker and
then I asked oogle react color picker
and there was one that was super easy to
to get working it was also good that we
discussed like had this like that we did
beforehand that made things a lot easier
because it gave us like a correct that
gave me a direction to work with we also
it was also good that we figured this
thing out where we like didn’t do like a
pixel coordinate system because that
would have meant made this a lot more
annoying the arbitrary restriction that
we had was actually not all that
interesting in the in the context of a
react app where everything is
functionally reactive because you’re not
really waiting for any function call to
complete you’re just calling function so
the fact that they return a promise is
completely irrelevant because you’re
never using the return values of
anything you’re setting state and then
things happen as a consequence of that
so and then the lesson is that we should
learn the basic tools before we start
using them because otherwise it’s always
this whole learning thing but I guess
like in reality that’s the way you do it
you have to learn it the way while you
while you’re trying to figure things out
you have to you’re learning it while
you’re figuring it out it’s a common
programming mistake to sort of try it
try to figure things out on your own it
seemed like a good idea to parallel
process yes but it wasn’t but it wasn’t
pair programming no like I think that we
if we had focused on two hands on one
issue at a time we would have been much
further along like I think that this
actually ironically we kind of
demonstrated the problem of not doing
pair programming because you when you
are not doing pair programming your team
is always as like
if there is a breakage on one chain like
the entire team slows to that speed so
that that’s why more programming and
pair programming works so well because
you’re constantly swarming on the most
difficult problem at the time which
means that you are actually maximizing
your velocity ironically even though
like you’re not maximizing your
efficiency also like we it would be even
better if we could find some way of
remote controlling the browser I’m sure
that that is possible yeah you okay so
we’re done yeah I think so you watched
an episode of fun fun function we
release these every Monday morning Oh
800 GMT but you will forget that so you
can subscribe by clicking here or watch
another episode right now by clicking I
am mpj and and I’m David until next
Monday morning say curious [Music]
Please follow and like us: