0:00:24
what is going on guys welcome back to
0:00:27
another session of build broken fix
0:00:31
series brought to you by the raw coders
0:00:34
yes that's us and um
0:00:38
uh you might be observing that two of
0:00:42
call tick and finish ontario
0:00:44
um so it's financial day off
0:00:49
kartik has got some work
0:00:52
commitments so that's why you can't
0:00:54
really make it but not to worry uh we
0:01:00
ahead with our fun projects
0:01:03
and so if you guys are new here
0:01:07
we are basically building a
0:01:10
enhanced version open open source
0:01:11
project called chromeblock and um
0:01:15
basically we're adding persistent
0:01:18
storage to that and also backed by aws
0:01:25
yeah that's pretty much it for the tech
0:01:28
stack we're using uh express um
0:01:32
node for the back end and
0:01:35
obviously uh aws as well and then for
0:01:39
the front end is purely at the moment
0:01:40
html css is in javascript
0:01:43
and not to mention the fetch
0:01:46
api as well right um
0:01:53
just really quickly i'll play an
0:01:56
acknowledgement uh to the custodians of
0:01:59
the land on which we are
0:02:06
i begin today by acknowledging the
0:02:08
traditional custodians of the land on
0:02:11
which we gather today and pay my
0:02:13
respects to the elders past present and
0:02:15
future i extend their respect to
0:02:18
aboriginal and torres strait islander
0:02:26
now that is all done
0:02:28
let's get cracking with some fun stuff
0:02:31
uh welcome tori good to have you mate um
0:02:35
they got toasted after the yes
0:02:39
they got really toasted
0:02:47
so what we're gonna do today is
0:02:51
as you might recall that yes
0:02:54
today we made our own custom toast
0:02:57
uh and we were basically successful so
0:03:00
today we're gonna work on the
0:03:02
positioning of it as in
0:03:05
a particular place in this
0:03:08
in the screen there we're going to be
0:03:10
placing that one and on
0:03:14
we're going to be hiding here on
0:03:17
as in when the page loads but only
0:03:20
appear if it says saved successfully on
0:03:23
the click of a button
0:03:30
just story that's absolutely right mate
0:03:33
it took us as in one year to do that
0:03:37
custom feature so which was
0:03:41
pretty good effort from the boys well
0:03:44
done to them and they're i guess
0:03:46
are really tired and they deserve a day
0:03:53
let's get cracking with
0:04:00
the the alert that we
0:04:03
made that was already in
0:04:05
in the bootstrap but we didn't really
0:04:08
want to import the entire bootstrap just
0:04:11
to use one feature so what we did was we
0:04:14
made our own version
0:04:22
which is why i call it custom
0:04:25
all right uh without further ado let's
0:04:29
get cracking with some code
0:04:35
uh open on my vs studio
0:04:38
cool that's already there which is
0:04:42
so just so you know i've already taken
0:04:47
which is fantastic um
0:04:54
yeah here we go it says
0:05:03
so we close these trees okay so first of
0:05:07
all i'll just play it
0:05:13
show you how it's appearing at the
0:05:16
moment and then i'll go ahead and do the
0:05:28
so this is how it's appearing at the
0:05:30
moment well we want it to appear at the
0:05:37
well approximately on the center of the
0:05:39
board here so when the
0:05:43
so let's go and do that first
0:05:59
uh the confirmation all right there we
0:06:03
go that's our class that we need to play
0:06:08
okay this old header and the code
0:06:13
here we go just keeping an eye on the
0:06:31
t has his fixed days day comes on the
0:06:35
stream which is three days a week
0:06:40
kay has a bit work commitment so he
0:06:42
can't really make it
0:06:46
that's why basically
0:06:48
as in on a serious note though yeah
0:06:58
come on where's my alert here we go
0:07:02
so basically what we wanted to appear as
0:07:05
um we want this part to appear somewhere
0:07:10
so for that one i'm gonna
0:07:13
use the position of absolute
0:07:19
basically according to my understanding
0:07:24
relative to the parent so
0:07:30
spare um so you're relevant to the root
0:07:35
element not to the parent
0:07:37
so i'm gonna use position
0:07:42
they say absolu which means
0:07:46
because i've used position i'll have to
0:07:52
i'll have to specify
0:07:57
the dimensions of the position so top
0:08:10
all right so basically for the top
0:08:13
i need to appear somewhere over here
0:08:16
so this is our root element so i'll
0:08:27
percent probably or
0:08:31
yeah that's just three percent
0:08:38
three percent and see how it comes as
0:08:43
let's keep an eye on the chat as well
0:08:53
the top i would say that i want to make
0:08:58
let's see how that looks
0:09:10
okay i basically closed it
0:09:20
looking pretty decent
0:09:21
so now what i want to do is make it
0:09:26
i want it to be a little more
0:09:31
towards the bottom because if you see
0:09:36
as in vertically center so let's as into
0:09:43
so let's do that i'll probably make it
0:09:48
let's see how that shows up
0:10:04
okay yeah that looks pretty all right to
0:10:14
um now we need to bring it around here
0:10:17
so i would space it from the left
0:10:21
so i want how much distance i want from
0:10:37
let's do the same distance
0:10:48
let's do the same one and see how that
0:10:56
stop hit play again
0:11:06
so start to start this again
0:11:10
ah that's a bit too
0:11:23
um that should be all right
0:11:35
here we go that's looking much better
0:11:42
let's do a bit more to the right
0:11:53
because i just wanted to kind of center
0:11:57
as much as possible
0:11:59
it won't be perfect but yeah
0:12:07
not really it's not perfect
0:12:14
why am i doing in that way
0:12:16
just take a bit of a shortcut here
0:12:25
okay there you go that's our dimension
0:12:36
as you know let me share this here
0:12:53
yeah let's keep it to there and this
0:12:56
should hopefully be centered
0:13:02
i'm currently too many boards
0:13:13
okay i'll definitely give that a little
0:13:16
story uh up to the
0:13:18
stream thanks for sharing that
0:13:27
see about the features of next js and
0:13:31
making our app as in
0:13:39
no legacy why am i saying legacy
0:13:43
what's happening to my english as well
0:13:50
okay perfect here we go so that's
0:13:53
looking pretty good it might not be as
0:13:57
but it does the work for now
0:14:02
so now what we need to do is
0:14:08
when index appears we don't want to
0:14:12
so let's work on that one now
0:14:16
see how can we achieve that
0:14:27
so if i do document
0:14:35
document.getelementbyid
0:14:49
okay and then style
0:15:26
this will have to be from the
0:15:36
javascript i guess
0:15:38
and the pages all your guys click from
0:15:47
oh right i will definitely give that a
0:15:54
that sounds pretty cool
0:16:06
right um so what we need to do
0:16:10
is we need to go to
0:16:16
basically play around with the alert
0:16:20
so what i will do is
0:16:23
i'll basically do this and see if this
0:16:26
works in the first place
0:16:47
say from the document.element
0:17:08
that's there and now what we want to do
0:17:25
give you a class here
0:17:32
and then say prompt
0:17:56
so by default i want it none
0:18:08
anything on the chat no that's pretty
0:18:18
okay so on the save pro also venison
0:18:24
display it will come as
0:18:51
let's take actually confirmation because
0:18:54
we're already using that here
0:19:15
appendance confirmation
0:19:30
save confirm so on
0:19:38
and then what we can do is
0:19:42
in that function as well we can
0:19:50
because this would basically do this
0:20:05
so so we don't want it to come up when
0:20:09
the page page loads
0:20:12
let's see if that works
0:20:25
all right it's coming up still
0:20:39
i don't want that at the moment
0:20:43
not that one ah no it's not it doesn't
0:20:56
closed alone hello working
0:21:00
close alert isn't even working
0:21:03
so that's definitely not working for us
0:21:07
is a display or display
0:21:15
let's put that back
0:21:17
at least the cloud
0:21:19
close alert is was working
0:21:23
still none here don't get
0:21:40
okay so that so if i just do that one
0:21:46
that should do the trick
0:21:56
that should basically do the trick for
0:22:02
none yeah here we go
0:22:21
you can add lots of grey up to your
0:22:24
stream take a look okay
0:22:27
i will give that a little definitely um
0:22:31
you should check out learn with jason
0:22:39
you you should check out let me jason
0:22:42
which is also on youtube all right
0:22:51
thanks a lot for that mate um i will
0:22:54
definitely i will look this
0:22:56
this weekend all right
0:23:31
come on this has to go this has to
0:23:35
disappear but it's not
0:23:39
why is he not going
0:23:47
why doesn't he want to go
0:23:52
develop had a confirmation prompt
0:24:00
um maybe do it on the class alert one
0:24:09
may be doing class alert
0:24:19
and none how does that do for me
0:24:27
ah come on i don't need you
0:24:52
oh why is it not going away
0:24:56
i don't want it to appear in
0:24:59
in when the page loads
0:25:14
the back class is not from okay so again
0:25:19
by class is not function call so we
0:25:22
definitely can't do this
0:25:58
right confirmation
0:26:08
let's see what this does for us
0:26:11
i really want this one to
0:26:18
come on you can do this
0:26:34
actually i might be putting that in the
0:26:36
one what'd you guys think
0:26:43
just use keyframes in
0:26:50
connector look at that one hey gekko
0:26:55
good to have you right
0:26:59
there's only three
0:27:11
bust out for tory is that for the stuff
0:27:14
that i'm trying to do
0:27:19
from top keyframe my move
0:27:32
down we'll specify the animation code
0:27:43
yeah this sounds really interesting
0:27:46
define the name of the animation
0:27:49
legal values that one
0:27:55
and how do we use it
0:28:06
okay i will come back to that
0:28:10
this one this one can definitely be
0:28:12
incorporated but i need to know how to
0:28:20
when the page loads
0:28:28
might just do it over there in index
0:28:32
you can do it in one line keep
0:28:34
keyframe and to animate the toast
0:28:38
message in and out all right
0:28:41
you can do it in one line okay maybe
0:28:44
like you say it would be
0:28:48
more than one now lord
0:28:51
and that isn't really a practice so
0:28:57
definitely will be in a
0:28:59
backlog story but um
0:29:02
yeah i just want to get the mvp out
0:29:05
out as soon as possible
0:29:10
yeah thanks so i will come back to that
0:29:21
so that happens in index
0:29:24
so if i just put that code
0:29:27
in in here document.
0:29:30
actually on window load
0:29:38
make a function on window load
0:29:47
and put the document.getelementbyid
0:30:05
get element by id and then do
0:30:08
confirmation prompt
0:30:10
which would be the div that we're
0:30:16
confirmation prompt
0:30:20
and then the style of it would be
0:30:28
this i don't wanna
0:30:30
show it so set that to none
0:30:34
may my workers saying on window load
0:30:42
what that gives us
0:30:55
that worked brilliant
0:31:07
don't know if you guys
0:31:09
if you guys noticed
0:31:14
uh the test message appears for say one
0:31:29
but yeah um that can be ignored for now
0:31:37
when i can write for you
0:31:44
um i don't think sweetie tori's is it's
0:31:48
probably free they're small
0:31:52
yeah i'll push you back too
0:32:02
okay cool so this one can go
0:32:05
so i only want that test message to
0:32:14
so let's see where are we using that
0:32:26
no it wasn't indexed or html
0:32:30
okay no in scripts my bad
0:32:40
all right yeah so as soon as
0:32:44
these have been fully saved we want um
0:32:49
that to show up document don't get
0:33:17
equal to block probably
0:33:25
what you guys reckon
0:33:28
i think it's block
0:33:32
confirmation problem okay cool let's try
0:33:37
the message appears when we try to save
0:33:48
no i don't need that
0:33:54
i'm getting distracted
0:33:58
okay so if i create
0:34:12
let's see if the magic comes up now
0:34:17
oh yeah now that's exactly
0:34:28
that's done now what we need to do is
0:34:30
change the text on that one which
0:34:38
basically headers saved
0:34:52
what's in the body
0:34:59
actually i want to do confirmation
0:35:37
save successfully voila there we go
0:35:41
that should be a good one
0:35:45
let's see how that appears
0:35:51
how's the chat going
0:36:01
what would you erase um
0:36:06
i will rate this code as zero
0:36:11
what would you rate and raising
0:36:15
if you really ask me based on
0:36:18
my experience i'm just as in trying to
0:36:21
get things done here so probably
0:36:32
security considerations just
0:36:36
going for it head-on so
0:36:38
i mean can be improved a lot
0:36:43
that we're gonna do once the core
0:36:47
finished as in refactoring and
0:36:50
will come afterwards
0:36:53
i like how you ask him
0:37:02
tori is a funny guy
0:37:11
really leaning into
0:37:16
what's uh what do you mean by mbp
0:37:34
objectives in a really funny mood as
0:37:51
feel free to point us as in
0:37:56
how to approach whatever we're doing in
0:38:02
after we have uh as in
0:38:05
um up to this is a bit
0:38:09
completed and in the core function handy
0:38:12
because we do plan to come back
0:38:16
to it as in basically re re refactor
0:38:24
in terms of the code
0:38:26
k has his work commitments apparently
0:38:30
his work is doing some
0:38:32
upgrade so he needed friday night and
0:38:37
so that's what he told me
0:38:42
so he's kind of busy you know with his
0:38:47
so confirmation which is good uh bought
0:38:50
and noticed successfully right
0:38:53
let's test this out
0:39:02
if we save that confirmation border
0:39:05
notes saved successfully
0:39:13
ah i just wanted okay cool so this is
0:39:19
let's go to our jira and see what's
0:39:21
happening over there oops
0:39:25
oh i thought i opened up the stream yard
0:39:33
all right there we go
0:39:40
oops why is it insane
0:39:50
what did this card best smell
0:40:05
that would probably be the
0:40:09
way it goes soon though
0:40:13
driving as well i don't really i don't
0:40:15
really mind it though but the thing is
0:40:33
have a guest story come on
0:40:36
you've got free free guesses
0:40:51
right um so add buttons
0:40:55
okay that's not what we are working on
0:40:59
we are working on insert notes from the
0:41:02
cool so this one we was working on
0:41:06
confirmation prop to say board and save
0:41:11
after safe clip perfect this is done now
0:41:15
which is brilliant um
0:41:19
is peer review we will
0:41:22
i'm just thinking that where
0:41:27
save the eyes and put the save on
0:41:32
because to add bonds to
0:41:36
okay cool so i don't worry about that
0:41:39
he's taking care of
0:41:44
cool so we can basically in certain
0:41:56
actually i can delete this one
0:41:59
because it's being already done by
0:42:14
okay so this is all done in certain
0:42:18
notes from from the front end that can
0:42:30
okay cool so now what we need to do is
0:42:38
get on top of the update functionality
0:42:45
what's chad saying
0:43:02
okay that's pretty good story
0:43:10
i've got a sense that
0:43:12
there's something really hilariously
0:43:17
uh that custom for full page
0:43:28
yeah that's really bad though i like
0:43:32
i can implement that feature sure thing
0:43:38
that's good yeah although you never know
0:43:41
this project my come on that's all just
0:43:53
never underestimate the power of
0:43:56
consistency and people what are trying
0:44:02
they might become something you never
0:44:12
all right um so now we can basically
0:44:16
move on to application is navigation
0:44:20
when clicking clip on
0:44:29
ah the update function
0:44:32
functionality is in here
0:44:35
on get punches remote and
0:44:42
make his opponent not consistent okay
0:44:56
okay so we need to do an update
0:45:09
if we do update um
0:45:14
now i'm just trying to think how would
0:45:23
uh we're gonna get
0:45:39
will happen like um
0:45:55
yeah i just focus on updating the
0:46:02
for now or we can update the board
0:46:06
update the entire board as well
0:46:52
um i'm just trying to think
0:46:55
what would be the next step because i
0:46:57
know that the function the
0:47:05
functionality is done by another member
0:47:11
there has to be another method to be
0:47:27
yeah i can basically jump on that one
0:48:11
and i'll assign this
0:48:23
yes and in progress
0:48:29
cool so this is there we're
0:48:36
with the posting of the notes
0:48:40
which is fine um i'll just
0:48:44
check all the changes that i made
0:48:47
and then basically set
0:48:53
all right cool that looks good to me
0:49:18
notes are successful
0:49:30
come to show same board and
0:49:33
notes are successful
0:49:35
and this would go in there
0:49:40
inserting of the notes perfect and now
0:49:43
what we need to do
0:49:45
is go in the back end
0:49:56
create another branch
0:50:00
what branch am i on at the moment
0:50:07
uh i'm on master i do not want to be in
0:50:10
master so i'm going to create my branch
0:50:20
create and check me out
0:50:24
create and switch to the branch thing
0:50:26
and give it so get
0:50:46
okay switch to our new branch cool
0:50:50
now we can start making our function
0:50:55
get a board by its name
0:50:58
that would be coming from the front end
0:51:01
which would be a powerful get
0:51:05
of the board itself
0:51:18
what's the chat saying
0:51:32
i have a job interview coming up so i'm
0:51:34
glad i'm up today with best practices
0:51:38
i learned here on board coders
0:51:49
make me the tech lead oh fantastic
0:51:55
that's really really really good man as
0:51:58
that's really as in a fast tracking
0:52:06
as in just basically um
0:52:16
gecko with pride best prank best
0:52:18
practices and know your architecture and
0:52:25
performance things and skills and things
0:52:28
that have to be considered
0:52:31
and basically i would say
0:52:37
like they are the best because they are
0:52:49
i've got a really really good team so
0:52:52
yeah make people feel special and they
0:52:56
follow you tori 100 percent
0:53:00
so you'll have global index for a board
0:53:08
that's a really good question i haven't
0:53:10
thought about the about the yet yet i
0:53:13
think it's time to think about that kind
0:53:20
have you read any of these skills here
0:53:29
i don't know how to answer that gig dev
0:53:40
all of them because uh
0:53:42
it's my first time experiencing
0:53:46
everything in this space so still a long
0:53:50
way to go and a lot to learn
0:53:54
uh i know that i'm getting there though
0:54:03
the board name but um
0:54:06
we need to get a board by board name so
0:54:12
what we're gonna do first oops
0:54:20
i've got to change my
0:54:33
let's get started on this
0:54:36
so basically what's gonna happen
0:54:41
the user's gonna enter
0:54:44
the board name from the front end
0:54:52
that board name will go
0:54:57
to get it to get the board
0:55:02
as in the board name for
0:55:05
will be passed in as a string
0:55:13
uh the method which will be
0:55:17
in the back end here
0:55:20
that would basically
0:55:27
through all the boards and check their
0:55:30
and then once it's found the name
0:55:35
it will for it will throw the entire
0:55:40
it will return the entire object to the
0:55:44
yeah that's basically how
0:55:50
right so let's get cracking
0:56:02
get a specific note
0:56:11
okay a specific note guess specifically
0:56:16
the lea particular note from the
0:56:35
so if you are already
0:56:37
uh getting all the list of the boards
0:56:42
simply when the app starts
0:56:48
we can load all the board
0:57:01
that could be a way to fast
0:57:04
track it because in this
0:57:07
one we are already
0:57:08
getting all the boards
0:57:10
and we can basically fast fast track in
0:57:18
run a healthy scan operation
0:57:24
yeah probably a query but what i'm
0:57:33
this i've already gone method
0:57:39
which contains all the boards
0:57:42
as in it already runs scan
0:57:45
so it contains all the boards already
0:57:48
what i'm thinking there might just
0:57:51
instead of creating that
0:57:56
oh no no that's not gonna work
0:58:04
actually that might work because if i
0:58:07
load all the boards
0:58:11
the app starts and they want to get here
0:58:27
then what they can do is they can
0:58:32
check the board id
0:58:36
i can simply pass the board id to this
0:58:40
and then it will just get all the board
0:58:44
i mean not all the boards that
0:58:49
yeah that could be done
0:58:55
right guys um i think that would be it
0:58:59
today i've still got pretty
0:59:02
much other other stuffs as well that uh
0:59:05
then need my handling
0:59:10
thanks a lot for joining guys been a
0:59:12
pleasure having you and
0:59:16
uh do you think at scale you run into a
0:59:20
problem with the whole partition with
0:59:23
your current implementation
0:59:26
um i wouldn't be able to
0:59:29
answer that at this stage story but i'll
0:59:32
do my research and um i will get back to
0:59:40
but yeah thanks a lot again guys um join
0:59:44
sunday where we kick start this new
0:59:51
then um the other two boards will be
0:59:58
feel better as well all right so
1:00:00
take care and i'll see you on sundays
1:00:04
same time same place and a different
1:00:10
see you guys later bye
