0:00:24
what is going on guys welcome back to
0:00:26
another session of buildbreaking fix
0:00:29
brought to you exclusively by the raw
0:00:31
coders and today we have
0:00:34
two auroras zane and finesse how are you
0:00:36
feeling today flash
0:00:38
hey zayn uh yeah thanks for the intro um
0:00:42
yeah feeling really good um as usual
0:00:45
yeah can you get stuck into it see what
0:00:47
you guys did as well yesterday
0:00:49
but um sorry um and yeah just gonna get
0:00:54
fantastic j it was a product it was a
0:00:58
productive session as in yes today we
0:01:03
figured out how to hash the passcode
0:01:06
and that was done i'll take you through
0:01:09
that as in really briefly it was just
0:01:11
basically we were missing one thing
0:01:16
wasn't supposed to be there and we
0:01:19
we just said hang on
0:01:21
why don't remove that and see if it
0:01:22
works and it works
0:01:26
i'd be interested to see yeah what that
0:01:30
right cool so first things first is
0:01:33
acknowledge the country and pay our
0:01:35
respects to the elders of the past so
0:01:38
here goes i begin judging the
0:01:41
traditional custodians of the land on
0:01:43
which we gather today and pay my
0:01:45
respects to the elders past present and
0:01:48
future i extend their respect to
0:01:50
aboriginal and torres strait islander
0:01:57
fantastic all right so
0:02:02
i think it's my turn today to pick up
0:02:05
pick a letter isn't it for the for the
0:02:09
yeah yep it is yeah my dad picked the
0:02:11
last time so yeah yeah
0:02:15
you're gonna start the calendar
0:02:32
oh we don't really have
0:02:34
shed just if we don't have a letter then
0:02:38
we can just pick the closest one and put
0:02:42
okay there's a dance pop or daydreaming
0:02:49
yeah all right go for it
0:03:04
that's not too bad though
0:03:10
it's getting a dance move
0:03:20
all right i'm being i've been carried
0:03:29
all right and so what happened was yes
0:03:33
yes today we managed to make the
0:03:35
passcode work as in in the back end and
0:03:39
tested with postman
0:03:41
and today what we gonna do is
0:03:50
wire up the fountain with the
0:03:57
yeah it's done a little bit because
0:04:07
do you want to share the screen today
0:04:10
uh yeah sounds good
0:04:12
and then um when you do a give pull um
0:04:16
and go into the specific branch um i
0:04:24
we removed and it just worked
0:04:32
yeah this is like this is a kind of
0:04:34
funky music isn't as a
0:04:49
do you listen to anything fast-paced or
0:04:52
what kind of what sort of
0:04:56
uh yeah listen a bit of everything like
0:05:01
yeah just like rap or
0:05:03
you know hip-hop or just everything
0:05:07
but fast face is good yeah i like it
0:05:13
how about yourself okay
0:05:19
as in my go to music is trance
0:05:24
as in when i'm reading the zone as in
0:05:32
yeah but when i want to kind of
0:05:35
chill then is hip-hop and
0:05:56
so am i i'm on the right branch right do
0:05:59
you want to maybe zoom in um you would
0:06:02
want to be in board hyphen passcode
0:06:46
and if you open up uh app.js
0:06:50
if you will find out they've been
0:06:53
created a new branch or is oh here we go
0:06:57
that's the branch this is correct
0:07:00
yeah i already saw the variable passcode
0:07:04
that's how i could tell
0:07:08
so if you go down to
0:07:11
create a new board
0:07:20
yeah that one and if you go down slowly
0:07:27
oh here you have this one
0:07:33
oh yeah that line 253
0:07:45
async so we had to wait for it to come
0:07:49
back and then and then move on
0:07:51
before how it was working was
0:07:57
without having to wait for it to come
0:08:04
yeah and tori basically pointed
0:08:07
that out which was really smart
0:08:18
ruler is as well as a viewer this time
0:08:28
i don't know if you observe another
0:08:30
thing that's missing from that one is
0:08:32
the the function at the end
0:08:34
and the third argument of the hash
0:08:45
put your mouse on the word hash
0:08:50
and then hover it takes in
0:08:53
a function as optional
0:08:55
isn't it as in a kind of return
0:09:06
yeah so i meant that the callback
0:09:13
uh removed the callback basically we
0:09:16
didn't really want to do anything with
0:09:18
the hashed thing as we were already
0:09:21
doing something in the params with that
0:09:29
does that make sense because you sound a
0:09:41
yeah i'm a little bit confused about
0:09:42
what you mean sorry okay
0:09:54
go to the documentation
0:10:02
beautiful view there yeah it's uh
0:10:08
have you ever been
0:10:09
have you ever been today or
0:10:14
i love to go on there though
0:10:19
yeah have you been there oh no
0:10:21
no i haven't been there i'd like to go
0:10:29
yeah so um big crypto j is the first one
0:10:32
and if you go down to the sinkhole
0:10:53
not that one probably
0:11:00
this one oh this one that's it
0:11:02
yeah yeah that one so you know how it's
0:11:09
having a call back at the end as a third
0:11:12
argument to the function
0:11:17
what that was apparently therefore if we
0:11:19
want to do something
0:11:24
in that hash function
0:11:30
so okay you know how the hash function
0:11:32
if that big crypt don't hash
0:11:36
so the callback was there be if we
0:11:39
basically wanted to say hashi and then
0:11:41
point in the in the database
0:11:45
that's what would the function do
0:11:49
okay okay that makes sense
0:11:52
okay so instead of what we did we would
0:11:54
put if we wanted to use this then we put
0:11:59
the function called the database inside
0:12:08
that would well that would be one way of
0:12:13
well what we did was we would uh
0:12:18
because we already had as in the logic
0:12:22
i was inserting the data in the database
0:12:26
so what we did was we just
0:12:28
used the function to hash it only
0:12:33
and then we stored the hashing
0:12:35
value in the variable
0:12:40
if you go back to the code
0:12:45
more sense there so you know how we are
0:12:48
hashing the passcode with salt rounds
0:12:53
did the hash and we stored the value in
0:12:59
and then we are using the hash part code
0:13:02
valuable yeah in there to insert it in
0:13:05
the database i get away yeah that makes
0:13:09
i was just yeah i was primarily confused
0:13:11
about that what you were talking about
0:13:13
the callback but yeah that makes sense
0:13:14
now with the documentation
0:13:21
more of my explanations skills
0:13:25
throughout so that's already in progress
0:13:28
and these kind of situations
0:13:30
make me reflect about my progress so
0:13:38
okay cool so now what we're gonna do is
0:13:41
we're gonna forget the back end
0:13:44
and we will go to the front end
0:13:50
the tourist masterpiece
0:14:13
we so tori actually taught me how to
0:14:19
debugging as in development
0:14:24
we can actually run the app
0:14:35
kind of having a bit of a humorous
0:14:37
channel yesterday that no it's
0:15:21
he's talking about that there
0:15:28
i'll just all right
0:15:30
so we will probably have to create a
0:15:40
i'll just get the right branch
0:15:49
create a new branch
0:15:51
i'll create a branch okay do i need to i
0:15:54
should pull from somewhere first right
0:15:59
um on which branch are you at the moment
0:16:13
let's grab something
0:16:14
wasn't our one called um
0:16:24
was that for the backhand then
0:16:26
i think yeah the mastery
0:16:30
yeah probably just pull from this one
0:16:34
because websocket one isn't this uh has
0:16:37
all the this third one
0:17:02
have you got most conflicts or not
0:17:06
doesn't know you haven't
0:17:15
all right um yeah that's fine pre-ignore
0:17:19
i like how he's named it
0:17:31
and do the ui in there
0:18:00
by the way just curious is this your
0:18:04
personal preference
0:18:06
to do as in branch and then
0:18:09
just switch and then open that one
0:18:15
just used to it yeah
0:18:16
but okay i know you can do the
0:18:19
you can put the flag and then you can do
0:18:20
both to the same right it's quicker
0:18:23
i don't remember the command
0:18:26
so what are you gonna say yeah
0:18:33
okay so now we are there
0:18:36
in the past ui okay
0:18:46
let you drive this a bit
0:18:55
in home.html by the way
0:19:02
so we need to create a box in
0:19:05
to input that your
0:19:08
yes so sim i would say
0:19:16
additional as an ad text box
0:19:26
maybe have a look at um
0:19:31
like something that or instead of text
0:19:34
box like have a ui that
0:19:36
you know can you know looks that has
0:19:39
like maybe four boxes inside if you get
0:19:41
what i mean like uh
0:19:44
that one the plus yeah
0:19:48
we could do that as well
0:19:49
that's actually a better idea just it
0:20:13
probably have to insert it
0:20:21
i might have a look at some examples
0:20:33
google's stack of overflow
0:20:37
our two top two best friends
0:21:11
you know something like this or
0:21:17
i know exactly what you mean
0:21:19
so probably do say as in for the pascal
0:22:18
what are you trying to do at the moment
0:22:21
i'm just trying to find uh you know one
0:22:23
that we can kind of um
0:22:27
uh follow like an example that we can
0:22:29
follow like we did with the
0:22:41
cool if you go back
0:22:45
link was seeming um
0:22:51
uh the one which showed us in regular
0:22:54
javascript this one yeah
0:22:57
probably check that one what this is oh
0:23:00
it actually looks good um
0:23:03
html structure boom there we go
0:23:06
everything is there okay
0:23:11
oh did you possibly feel
0:23:16
okay okay yeah i could have just
0:23:25
copy and paste it don't worry
0:23:29
i know we are both as in
0:23:33
have good concepts about
0:23:36
html so there's no need to
0:23:55
you're going to say something sir
0:23:58
oh no no i'll just
0:24:01
when i just write them remind you that
0:24:04
don't forget to change the text
0:24:19
in the example the
0:24:22
maybe you should actually put this
0:24:55
that's the first one
0:25:04
um i'd like to see how it looks though
0:25:10
you might want to change the folder to
0:25:18
why did i remind you
0:25:22
oh i should laugh a little bit ha ha
0:25:38
we don't know what you're talking about
0:25:40
there i don't know what he saw
0:25:44
was talking about but i'm pretending i
0:25:47
don't know what he's talking about
0:25:50
okay he's talking about um
0:25:55
probably copying and pasting
0:26:05
let's see some css okay let me add the
0:26:25
i know you too will too well tory
0:26:42
was this css in that article already or
0:26:46
uh there is i'm just trying to decipher
0:26:49
what we need oh i'll get the article up
0:26:51
again so we can see
0:26:56
so they have a body here but
0:26:58
don't really want to mess up body yeah
0:27:01
yeah we don't need the body um probably
0:27:07
the form we would need because we want
0:27:10
to submit it the input yes we would need
0:27:13
because part of the input special as
0:27:18
so all of that except the
0:27:27
yeah that makes sense
0:27:38
i'm just gonna add it um
0:28:03
just want to see if there's any other
0:28:17
yeah you know what i
0:28:19
kind of have in my
0:28:21
mind that we should only copy and paste
0:28:25
if we kind of understand the concept of
0:28:31
um rather than to copy and paste and see
0:28:35
all right cool i did it
0:28:41
no that's fair enough yeah
0:28:46
i saw one video um in which
0:28:50
it was probably say
0:28:54
yeah four five four five seconds to
0:29:04
and he is doing on stack
0:29:07
overflow all he does okay that's the
0:29:10
same problem as mine and this this is
0:29:12
the solution okay he copied and pasted
0:29:22
let's go let's go yeah
0:29:32
that just cracked me up
0:29:38
it was on a story on um
0:29:46
the mini stories over there oh okay yeah
0:30:07
if you find it again send it to me oh i
0:30:15
oh it just really hasn't special that
0:30:20
as in he must have kind of on uh
0:30:24
ready and see what the what the code is
0:30:27
doing and okay i'm trying to do the same
0:30:30
thing that's where it was similar and he
0:30:33
copy and paste any very good and
0:31:22
yeah i reckon we need to change remind
0:31:24
me to draw some of this
0:31:30
all experimental at the moment
0:31:42
actually that's a good thing about
0:31:43
typing it out as well because then you
0:31:45
once you have a look then you'll know
0:31:47
where to come back to
0:33:19
it does story doesn't it
0:33:22
the same passcode looks great
0:33:27
i don't know he's playing
0:33:31
let's take that i think in settle digit
0:33:36
we can always come back to it but um
0:33:39
instead of those dots we probably
0:33:41
probably should have numbers
0:33:45
you know but yeah that's
0:33:47
not big do it at the moment we need to
0:33:51
the placement and the styling
0:33:55
i'm just we just remove this
0:34:04
basically i think it would be good to
0:34:13
put like a border or
0:34:16
background so we can
0:34:19
yeah i meant the the progress is very
0:34:26
the progress is very good you think so
0:34:29
yeah so one minute is yeah it's not
0:34:32
finished but what we have
0:34:38
very good and until
0:34:40
now but yeah we need to as an ad
0:34:43
say the text around there as in on the
0:34:46
um the borders a bit of a background
0:34:57
he's saying how about
0:35:00
so you know what that actually is i
0:35:04
yeah we removed this
0:35:09
control passcode yeah
0:35:14
yeah so we don't need this
0:35:27
reset can come at the bottom of the
0:35:34
as in you can probably save for your
0:35:38
don't do reset at the moment because
0:35:40
we're not doing that functionality as of
0:35:52
and probably gonna bring the enterprise
0:35:55
code in the middle on the boxes
0:36:23
this is why i don't like frontend
0:36:46
really i thought it was kind of
0:36:49
front-end is it not front-end
0:37:10
come on we don't have on a reaper okay
0:37:13
this is a micro service this is a front
0:37:17
we have a backhand as well
0:37:33
i just wanted to have a look at
0:37:44
uh your url might not be
0:37:46
if the url is causing a problem
0:37:59
we need to fix center
0:38:11
um maybe make the boxes a bit a bit
0:38:42
keep the answer and
0:38:45
actually yeah yeah that's fine
0:38:51
you want it to be like
0:38:54
yeah it looks better i think
0:38:57
because i wanted to be as in
0:39:00
enterprise code uh
0:39:08
make name your new board
0:39:18
so it it just visible enough but not too
0:39:26
yeah yeah makes sense
0:39:48
i don't know why all of us are all of us
0:39:51
suddenly i feel like having a pizza
0:39:57
have you even been
0:39:59
i haven't had dinner yet
0:40:21
that's a really good idea but at the
0:40:23
moment we're not really concerned about
0:40:26
how many bad guys are there
0:40:29
trying to hack in the passcodes
0:40:54
see how see how you go and
0:40:58
there you go we're
0:41:01
cracking the passwords
0:41:16
this box would be a little bit smaller
0:41:18
as well the diff box
0:42:24
i don't know if this is the right way to
0:42:25
do things or not but
0:42:30
in pro in programming there's no right
0:42:37
works make you work
0:42:43
i mean best practices are saying
0:42:47
yeah best practices yeah
0:42:50
i'll try not to forget them
0:42:57
now uh i was being
0:42:59
sarcastic by the way
0:43:02
yeah we should be um
0:43:08
i wouldn't say i'm very good in front
0:43:14
so what are we trying to do at the
0:43:17
i just wanted to make the the div box a
0:43:19
little bit smaller like um
0:43:29
um yeah i just wanted to make it smaller
0:43:31
like i didn't want to use up the whole
0:43:34
um so just made it 50
0:43:40
yeah that's what i was trying to do just
0:43:41
trying to make it the box of meter
0:43:45
so you're already using half of it so
0:43:50
yeah yeah that's that's what i'm saying
0:43:52
i don't know if just doing this is you
0:43:54
know is good practice or not but
0:44:04
as in that is responsive as well because
0:44:07
you're choosing purchase sign
0:44:23
okay cool so that is there
0:44:26
um how about if you try and bring the
0:44:32
basically center both the components in
0:44:46
so if you basically did that surprise
0:44:51
that's the div and in that one we have
0:44:57
what's the dividing for
0:45:04
right and right underneath that
0:45:12
and triple okay cool enterprise good uh
0:45:16
okay cool um can we
0:45:20
do basically align itunes center
0:45:26
this one plus maybe
0:45:31
i knew you wouldn't watch
0:45:45
um that might bring it
0:45:57
and now we need to get the
0:46:06
okay now we need to get the passcode in
0:46:09
the middle maybe go to the passcodes div
0:46:13
itself and and and just to
0:46:26
and basically add a bit of add a bit of
0:46:30
spacing between the two
0:46:34
so just basically pull up break
0:46:42
another one that's already one well
0:46:46
after is it already one
0:46:49
this one oh um maybe put a margin
0:46:57
so on the past go do margin basically
0:47:02
try that here we go
0:47:18
what do you reckon
0:47:25
make the answer passcode
0:47:27
a bit more smaller
0:47:32
because what i'm trying to do is
0:47:36
try our best to match other phone sizes
0:47:42
what do you think of this 1.5
0:47:51
actually that should be fine
0:47:53
yeah that should be fine
0:48:21
as in the entire div of enterprise code
0:48:25
so probably the margin top
0:48:32
uh yeah can do um i was thinking saying
0:48:37
did did it want to be like a pop-up like
0:48:40
it would come up after
0:48:43
should it be like a
0:48:45
a box that comes up or
0:48:47
should it just come underneath here like
0:48:50
so it will be a pop-up there come there
0:48:53
but what we're at the moment trying to
0:48:57
set up his is placing
0:49:04
should it come and then we will
0:49:06
basically do it with a hiding shell or
0:49:13
does that make sense
0:49:20
i'll just maybe add a
0:49:46
yeah that looks good to me
0:49:48
and then basically increase the
0:50:03
or the bottom margin of passcode i mean
0:50:11
uh right all right
0:50:14
i think this is i think adding bottom
0:50:17
more appropriate but
0:50:21
yeah i'm not streaming
0:50:23
yeah here we go yeah
0:50:30
oh that is sexy i'm loving it
0:50:37
shall we add the borders
0:50:41
the background as well
0:50:43
uh let me just add this changes to the
0:51:39
why are we hiding the passcode
0:51:46
so we're hiding the passcode because
0:51:49
we don't want to show it when the page
0:51:55
so as soon as the um the
0:51:59
admin presses go it would come up with
0:52:02
the passcode as in as a prompt
0:52:16
what happened oh do we want to make this
0:52:25
except lettuce as well
0:52:33
uh just wondering if
0:52:35
is there a like a hdmi thing where you
0:52:40
i think there is right you can just add
0:52:41
a tag here for numeric only like yeah
0:52:46
yes i'm thinking though we should be
0:52:52
right though let's do it alpha numeric
0:52:57
kind of becomes hard for toy to crack
0:53:21
next thing we have to do is um
0:53:24
you want to add a border or yeah and the
0:53:27
background to the div
0:53:32
um what do you think um
0:53:35
shall we keep the as in background and
0:53:38
and the colors consistent with the lf
0:53:56
control find help body yeah here we go
0:54:00
you're there already
0:54:41
you want some padding i'll probably copy
0:54:43
the same padding to be honest
0:54:59
decrease a bit of the padding
0:55:32
is even changing it is but it's like
0:55:53
to be honest i don't think he's changing
0:56:01
try it in the browser
0:56:04
and see if it does it
0:56:36
right you probably want to do padding
0:56:40
no no no no sorry my bad ignore that
0:56:45
so that's the background isn't it at the
0:56:53
give me one sec i'll just put my charger
0:57:12
i yeah what we might need to do is
0:57:17
we might need to decrease the width of
0:57:31
decrease the width itself
0:57:43
and then add the padding
0:57:46
there we go that looks better yeah
0:57:57
okay and how if we add border radiuses
0:58:01
yeah some border radius would be nice
0:58:05
did we add it for the other body
0:58:08
i don't think we did
0:58:39
and then we won this as a pop-up right
0:59:03
we are winning that's what that means
0:59:32
okay so now we need to add that a bit of
0:59:34
javascript right too yeah yeah
0:59:39
but yeah that we can continue on that
0:59:43
tomorrow no problem at all okay
0:59:51
ask what happens when tori
0:59:56
roll curtis on fire and in dessert
1:00:06
actually a bit confused as to what tori
1:00:12
i think we meant is that
1:00:17
we're killing it and we're not
1:00:19
we're not stopping at 10 30.
1:00:26
that's what it means
1:00:31
but yeah um do you want to do the honors
1:00:33
yeah sounds good um
1:00:36
thanks for joining us for another
1:00:38
on buildbreaking fix by brocaders
1:00:43
in today's episode we uh
1:00:45
worked on adding the passcode ui box in
1:00:51
it's looking better as we go along and
1:00:54
really close to to getting that done and
1:00:57
and wiring that up with the back end and
1:01:00
uh yeah and overall we are close to
1:01:02
wrapping up the project mvp anyway so
1:01:06
um yeah so thanks for joining us
1:01:07
everyone um on today's episode and we'll
1:01:11
same time same place and
1:01:18
all right guys have a great night and
1:01:20
we'll see you then
