0:00:23
what is going on people welcome back to
0:00:26
another session of bill break and fix
0:00:28
brought to you by the super raw coders
0:00:37
myself and tory how we feeling tori
0:00:45
brilliant brilliant jack how's your day
0:00:49
so far uh good day good day man just
0:00:53
just coding a lot still which is nice i
0:00:59
yeah that's always fun it's
0:01:02
isn't it doing this
0:01:04
doing the magic with your fingers and me
0:01:08
and um it just works
0:01:16
let's do a buffet um
0:01:19
not a bit but um let's do
0:01:24
acknowledgement of the country after
0:01:30
i believe today by acknowledging the
0:01:32
traditional custodians of the land on
0:01:34
which we gather today and pay my
0:01:36
respects to the elders past present and
0:01:38
future i extend their respect to
0:01:41
aboriginal and torres strait islander
0:01:46
all right fantastic
0:01:55
have you felt that many
0:02:06
the magic before we
0:02:08
yes actually the first time i found them
0:02:12
before as in yesterday when i
0:02:15
um wrote a hello world program it felt
0:02:18
really good i'm learning programming
0:02:36
uh on me yourself story
0:02:44
i made you first because um
0:02:48
there was a lot of camera noise as in
0:02:52
through as well when you were trying to
0:02:54
accept something uh i would say oh yeah
0:02:59
yeah then when i'm on me do you you kind
0:03:03
of mute yourself and then i couldn't
0:03:08
unmute you because you said that um
0:03:12
on uh chose to me yourself
0:03:22
let's do some background music
0:03:26
and then we can get the ball rolling
0:03:34
okay cool so today
0:03:38
what we would probably do is um
0:03:52
bit of a recap first yes
0:03:59
tested your changes as in all the
0:04:02
incredible work you've done with the
0:04:05
magic with your fingers
0:04:07
and that was working pretty
0:04:10
well so thank you for that that really
0:04:13
really means a lot
0:04:14
as in how much effort you're putting um
0:04:32
raise some issues in
0:04:34
jira too as in to keep a proper track
0:04:40
and so at the moment um i think what we
0:04:45
could possibly work on is um
0:04:49
just remember are just basically
0:04:54
places as in the coordinates
0:04:59
the uh where the notes were when they
0:05:03
because then what can happen is that
0:05:06
when the users get the board as in get
0:05:12
it will just fly back into the proper
0:05:15
positions of them cool
0:05:20
can we add the color at the same time as
0:05:22
well yeah the note
0:05:26
yeah yeah for sure
0:05:28
sure so do you want to share your screen
0:05:32
because um you basically have as he
0:05:35
you've got a bit of a smooth
0:05:46
pop that open i think we need to add
0:05:56
all right should be
0:06:10
there we go all right
0:06:17
yes i can and i'll just add it to the
0:06:22
all right um oh this is the wrong
0:06:30
i forgot uh let me pop
0:06:35
you did that much it won't work thank
0:06:43
um no i haven't worked on it in like two
0:06:46
days actually i should set up the
0:06:53
the the github actions
0:06:55
at some point i forgot to do that
0:06:59
that's all right um no rush no rush
0:07:02
uh do you wanna do you wanna work on the
0:07:08
like the back end or do you wanna
0:07:11
just start from the client side
0:07:18
um okay so i don't know how
0:07:23
it will happen so i'll just take
0:07:27
common sense dev guest
0:07:31
so i think and correct
0:07:36
if i don't have anything right because
0:07:38
you're basically more experiencing
0:07:45
the front ends as well
0:07:47
so how it will happen is that when we
0:07:55
put them in their directions
0:08:01
when we press save
0:08:08
coordinates as in x
0:08:10
x and y coordinates
0:08:25
notes object as in a single
0:08:29
object to save them save their value
0:08:42
so that would basically go in the date
0:08:46
and then when it's coming
0:08:49
when it's coming back
0:08:52
the front end will kind of
0:08:56
use those values as in to display the
0:08:59
position on the screen
0:09:11
you save the cards it
0:09:14
sends a patch request or post request
0:09:18
dynamodb essentially
0:09:24
you need the x and y
0:09:26
coordinates for the card or
0:09:30
what are they calling it
0:09:34
we can basically get those coordinates
0:09:37
from uh as in script.js already isn't it
0:09:40
because they're already there should be
0:09:57
oh there is a start position
0:10:14
where is this coming from
0:10:22
okay so there's an x yeah you're right
0:10:24
there's an x and a y
0:10:26
there's also a rotation i guess
0:10:30
whatever what does that do
0:10:32
i think it rotates the card like 360.
0:10:38
right interesting okay
0:10:40
if you want we can
0:10:42
just add all these i don't think you
0:10:44
need animation speed
0:10:56
sticker is the actual then note the
0:10:59
sticky note as in the background note
0:11:08
how about if you go as is
0:11:11
like baby steps and
0:11:14
first of all we can just work with x and
0:11:18
okay yeah let's do that
0:11:24
what do you wanna you wanna
0:11:27
what do you want to do with
0:11:29
so you want to go to the save
0:11:43
let's see down here
0:11:50
whoo this file is big all right what is
0:12:00
it's this yeah so you and i think card
0:12:06
wrote this function update right
0:12:16
but for some reason when i was using
0:12:22
the board like two weeks ago or whatever
0:12:25
this wasn't working so i didn't want to
0:12:29
and so i just wrote my own
0:12:32
like in still front-end
0:12:37
which i think basically does the same
0:12:42
yeah because uh iron finish
0:12:45
went as in through a bit of your
0:12:48
film with your code
0:12:54
okay yeah don't worry about
0:12:58
that one we can always um we will be
0:13:06
when the mvp is done basically
0:13:13
these are the concerns at the moment
0:13:21
so this let me add some
0:13:32
so there's a patch there's a post
0:13:42
get rid of that line
0:13:50
so this one patches the note using the
0:14:03
if it's not inserted
0:14:07
you post it because it's a new note
0:14:17
this is like i feel like this
0:14:18
functionality needs a little work though
0:14:20
because i feel like it's a little bit
0:14:22
inconsistent and i don't know why it
0:14:31
i would just keep that in mind in the
0:14:37
we have okay so what's going into
0:14:42
the patch and the post is this data
0:14:48
and this data i think that comes from
0:14:52
which yeah which is
0:14:54
the status structure you made right yeah
0:15:04
okay that gets me here okay text for
0:15:08
and then the values
0:15:13
oh okay so you changed it i see
0:15:16
i didn't change it was like this
0:15:19
this is what you and artik use yeah you
0:15:21
just got you guys use the map okay um
0:15:24
myself forgotten that
0:15:27
probably a long time ago yeah
0:15:32
so then you're using
0:15:36
that map to add the notes
0:15:40
with the data is the text property
0:15:46
and then the status
0:15:48
so here in that one we can add it yeah
0:15:53
yeah so i think what we should do is
0:15:56
change this data into
0:16:06
data is only the text isn't it
0:16:17
would we want to change the
0:16:23
uh so we can have the other
0:16:27
important properties from the card like
0:16:29
the x the y the text
0:16:32
whatever else we need the color
0:16:36
right okay hang on a minute
0:16:41
i thought we could just put that on the
0:16:45
note as in the actual note itself as an
0:16:50
rather than putting it
0:16:53
this text to notes array is what we're
0:16:56
using to then send the post or patch
0:17:02
absolutely that's right
0:17:08
if we don't store them here where are we
0:17:10
going to store them
0:17:12
oh one mantis you know how
0:17:17
note object and that has id data status
0:17:24
uh this is the known object yeah online
0:17:31
sorry i can zoom into
0:17:38
four one yeah yeah this no this is a
0:17:41
yes so what i was basically thinking
0:17:51
is that what you want yeah
0:17:55
like exposed whatever
0:17:58
you know what you mean i think it would
0:18:00
be the same thing isn't it as in whether
0:18:03
we add it in the data or we add it as a
0:18:08
yeah i like i mean from for myself i
0:18:16
i would i would probably look at the
0:18:18
note like if it was me i'd probably look
0:18:20
the card itself and then just like
0:18:24
match it just keep it consistent
0:18:27
here we have other code that relies on
0:18:29
this data property so that's why i was
0:18:32
thinking of just extending this here and
0:18:36
updating it into other posts and patch
0:18:45
but in the back end this is this is this
0:18:48
data is what's getting sent to dynamodb
0:18:51
so that back end code needs to get
0:18:59
either way you're going to have to
0:19:00
change the background code anyways of
0:19:08
okay they just stay in that
0:19:14
okay so i gotta find where
0:19:33
that's interesting
0:19:44
so this function is getting called i i
0:19:47
know what this is because i just worked
0:19:50
um i didn't add this this was already
0:19:57
i don't know why this is asynchronous i
0:19:59
don't think it needs to be but
0:20:04
you and kartik put this here
0:20:12
function is called when the card is
0:20:16
like when you go in a note and start
0:20:18
changing the values
0:20:32
gonna work because we need to get all
0:20:38
we need to get the data from the cards
0:20:43
um the position which i guess it doesn't
0:20:46
look like it's available here unless
0:21:01
how about if you go back to
0:21:03
where the positions were and then and
0:21:08
like start cracking it from there
0:21:13
and work backwards
0:21:15
yeah i'm trying to
0:21:26
i don't read jquery that much um
0:21:30
rotate card color card
0:21:35
okay so this is literally just
0:21:45
okay so this is also
0:21:49
getting called somewhere else
0:21:55
so okay this is what i wanted this card
0:22:05
all right i know i think i have a plan
0:22:11
um method on the card dot children
0:22:18
this method is when you
0:22:24
no this method is when you edit
0:22:28
it's called when you edit just think of
0:22:30
it like a event listener
0:22:32
so this method listens for edits and it
0:22:35
changes and then it's delayed by 600
0:22:38
milliseconds so it's kind of de-bounce
0:22:44
is another method that i looked up in
0:22:47
this jquery editable like docs
0:22:51
i found out i had the n method
0:22:53
so end gets called when you like are
0:22:56
totally done editing and then you like
0:22:59
click outside of the card basically
0:23:03
which is great because then
0:23:06
it's a good place to update the card
0:23:11
uh array so i think what i'll do is
0:23:21
and i'm just gonna
0:23:30
do you care or should i leave a comment
0:23:46
anywhere with the top so yeah it doesn't
0:23:52
here is where i added the
0:23:54
dispatch a websocket message which is
0:23:58
edit card so when you edit the card
0:24:03
and you click outside the card then it
0:24:05
sends that websocket message
0:24:09
you and dinesh probably saw
0:24:14
so here we could just
0:24:18
with um that data from the card
0:24:26
i think we can get from the event
0:24:29
object that's passed in
0:24:47
but i did get the i did get the text of
0:24:49
the card so the problem is it says
0:24:54
just wondering if that's gonna be an
0:24:58
well let's let's take a look see and so
0:25:05
would be the text itself isn't it
0:25:09
um i think the card is an svg when i
0:25:20
oh do i not have a debugger
0:25:48
i thought i set this up
0:26:03
i was trying to attach the node like the
0:26:05
debugger i'll just open it straight up
0:26:12
i'll fix that later but um
0:26:16
here i'll just do it in live server
0:26:23
i think i set it up on the other
0:26:29
the other repo because this is the
0:26:35
that's why i need to i need to fix the
0:26:40
let's go here and then
0:26:42
a board that has some notes is the test
0:26:52
hopefully unless they're all deleted
0:26:53
okay so here we have this and here we
0:26:58
if i open the dev tools
0:27:10
uh script and i want to find
0:27:17
right and i want to see
0:27:24
so if we go edit a card
0:27:28
and then we step off it okay it fired it
0:27:34
so we get this event object
0:27:37
from the function event right here
0:27:39
uh sorry i don't know how small my
0:27:44
okay and so we got that event
0:27:48
object and this says that the target
0:27:55
so event.target is
0:27:58
this really long thing
0:28:15
so let me see if i can
0:28:24
oh so yeah it's like the inner section
0:28:29
basically highlighted
0:28:36
yeah yeah so what we need to grab i
0:28:42
image card and then
0:28:51
that would not be the card itself
0:28:54
no it's the card it's this image so it's
0:28:57
yeah so it's this div
0:29:02
so then that's easy
0:29:05
but then i know what to do so what we
0:29:14
can we get did we get the id in here
0:29:23
and oh sorry you can't see that
0:29:27
so we can get the position
0:29:35
and from the style that's where they're
0:29:37
adding it so it's top and left
0:29:41
i'm i think i'm i think that's what it
0:30:01
do i have access to this card
0:30:05
i don't know if i actually have access
0:30:07
to the whole card here
0:30:18
what is card hold on
0:30:26
even know what card is oh card is draw a
0:30:31
let me go to oh okay here it is thinking
0:30:46
delete card card icon part hover there
0:30:50
you go card anime and then left and top
0:30:52
so that's when you drag the card
0:30:54
and then here's the position
0:31:04
i don't know this is card create
0:31:11
hold on let me uh let me look at one
0:31:16
oh here's this old position
0:31:19
ui position i was i was wondering if
0:31:26
direct okay card draggable this is when
0:31:42
card drag stop where does this end oh so
0:31:48
that's outside of the scope
0:32:07
gotta this position drag stop
0:32:16
me uh let me just go back to the browser
0:32:21
real quick oh um actually there's
0:32:24
um i think there's a method called move
0:32:27
oh yeah so this is it so it's left and
0:32:35
so the position there's like a
0:32:39
where is this coming from
0:32:46
uh where's this move card being fired
0:32:51
pretend action move card oh so that's
0:32:54
getting called inside of this drag
0:32:58
the card find drag stop
0:33:03
i guess by that drag stop
0:33:06
that's when you stop dragging
0:33:17
the data that it gets has those position
0:33:22
which are just top and left from the
0:33:33
just do the same thing
0:33:39
where was i before i think i was here
0:33:44
okay it's really easy to get
0:33:50
trying to track something jumping around
0:33:55
here yeah yeah especially when it's one
0:33:58
monster file like this
0:34:04
uh okay i think i remember a keyword
0:34:06
it's on end so we have this editable so
0:34:18
i don't know if this card
0:34:21
yeah that's i think that's jquery so i
0:34:23
don't i don't know if that's gonna work
0:34:30
element is the document
0:34:36
where's my autocomplete there it goes
0:34:44
id and then the id is just this id that
0:34:48
we're getting from the card
0:34:52
so that's the card id and then
0:35:01
um which i'm guessing top is why
0:35:10
do you want to call the positions like
0:35:14
top and left or x and y because
0:35:17
in other parts of the code they put x
0:35:30
uh you top and left or
0:35:33
talking off yeah yeah
0:35:36
okay so top and left
0:35:50
and then const bottom
0:36:25
let's add text to array and then here
0:36:29
we can do top and left
0:36:35
and then on the board you can just add
0:37:06
um tory if you're talking we can't hear
0:37:10
you're everyone's acting
0:37:25
there's a there is a function zane
0:37:36
or is it move card
0:37:39
we just looked at that move card
0:38:09
i'm just trying to think of what's the
0:38:10
easiest way to write the least
0:38:13
and keep it consistent
0:38:16
in the future so that it just works with
0:38:19
the code they already wrote
0:38:23
they have yeah they have a few different
0:38:25
things which is kind of odd
0:38:28
but they do have this position
0:38:34
position left and top
0:38:41
then we could just
0:38:52
inside uh no that's not right
0:38:59
can i i wish i could like draw on this
0:39:10
and so were you looking
0:39:18
so we could just put this in a position
0:39:30
the position instead
0:39:37
and then if we go here
0:39:41
and we don't need top and left we just
0:39:46
and then the data will just be position
0:39:50
which has top and left
0:39:57
that's brilliant okay i don't know why i
0:40:00
didn't think of that so
0:40:06
that's fine i like i read a lot of the
0:40:09
code from here not all of it but i read
0:40:12
a lot of it to get the other tasks done
0:40:16
i got more familiar with it um
0:40:20
which helps because then i know like
0:40:22
what some of the variable names were
0:40:29
like it's just something you have to
0:40:34
i guess of course it's all about the
0:40:36
time the the the more spent the talk the
0:40:40
more time you spend with something
0:40:44
the better you become with it
0:40:50
um so the one thing that we don't have
0:40:57
right now and i want
0:41:04
all right well let's let's give this a
0:41:06
whirl and see what breaks huh
0:41:15
let just step by step
0:41:19
not too too many changes hopefully it
0:41:23
it will break because this data is no
0:41:25
longer text and i'm gonna imagine that
0:41:36
that would make sense that because
0:41:39
they've actually converted
0:41:41
a text to an object now
0:41:50
here the nodes there's this data
0:41:54
okay so i'm back over and still frontend
0:41:57
now we have this data property which
0:42:12
all right well i didn't there's no color
0:42:14
well i just added this i don't know
0:42:24
this if it has an id
0:42:29
let me just make this an empty string
0:42:36
and then i think we need to we need to
0:42:38
update it here too
0:42:47
we have a node so each node has this
0:42:49
data property and then it has this
0:42:55
object so we can just
0:42:57
take that object and
0:43:00
just drop it in here just structured
0:43:04
and that probably makes it
0:43:08
more obvious what's going on here
0:43:11
so text and then id in the status
0:43:16
yeah yeah that would that would
0:43:20
well i'm gonna i'm gonna keep i'm gonna
0:43:22
keep it in data i just did that for
0:43:23
demonstration of what's going on in here
0:43:28
so then you're patching
0:43:32
is going and getting sent to patch note
0:43:48
i think the new node is the data
0:43:54
um that's getting set patched and
0:44:00
uh let me go back here
0:44:05
is yeah data is getting sent in as new
0:44:08
note to post note and
0:44:13
oh like i forgot i can just do this
0:44:24
data okay let's go to here
0:44:28
why can't i go to it
0:44:30
i thought i could click on it
0:44:33
so you're just sending the data
0:44:38
so on the back end
0:44:40
data is not going to be text anymore now
0:44:42
data is going to be that object object
0:44:45
here correct so then this will break
0:44:48
probably because the back end won't work
0:44:55
let's see if it breaking
0:45:02
that's breaking oh
0:45:09
let me just remove all my
0:45:15
well what's going on here
0:45:17
oh it's it's resetting okay
0:45:25
uh i think i can right click this others
0:45:29
all breakpoints cool all right so
0:45:37
let's make a new now call this
0:45:46
so let's let's pop this open in another
0:45:49
window too how about that
0:45:55
let me let me restart the process
0:46:06
oh went on to my it went on to my other
0:46:08
monitor there we go
0:46:10
so this is there and this is there so if
0:46:14
i do this this should work
0:46:22
all right save me got
0:46:24
because it's connected to the websocket
0:46:36
i'm a new now it got updated all right
0:46:45
i saved it let's see if there's any big
0:46:47
errors in the console
0:46:52
i like how you say big average
0:46:56
patch got a 400 i don't know why
0:47:00
and post got a 400
0:47:03
um so how many times did you press save
0:47:10
this uh patch shouldn't have been here
0:47:14
it should have been post
0:47:16
well it looks like there was a patch and
0:47:22
but all of them there's so there was a
0:47:26
a post and a patch so there were three
0:47:44
what's wrong with the
0:47:47
did you change the end point
0:47:50
um can you expand them
0:47:54
does it expand the errors
0:48:03
that's it just a 400
0:48:06
oh so bass so what did 400 mean again
0:48:14
or it doesn't exist
0:48:28
is it something your bad requests
0:48:31
oh that's right so it's a bad request
0:48:38
which probably makes sense because
0:48:45
i don't need i don't need to open a vs
0:48:48
code i can just go straight to the
0:49:02
it called scrambler api
0:49:10
the back in scrambler hyphen sam hyphen
0:49:43
post patch yeah it looks like yes
0:49:53
we have get board blah blah blah so
0:49:58
um do you know where it would be
0:50:04
what were you looking for now oh uh well
0:50:06
i'm looking for the post and patch for
0:50:10
yeah so you would be
0:50:19
it's been a long time
0:50:21
i've come when you don't yeah you're
0:50:24
i know when you look at old code you are
0:50:26
you say who wrote this
0:50:30
um actually go down it should be on
0:50:34
along right at the end probably
0:50:41
yeah specific note
0:50:44
looks like i went too far
0:50:47
well i guess it would be under one of
0:50:49
them would be under post right
0:50:52
there's a no okay create a note for a
0:51:01
board id and request params
0:51:09
go down down down oh here it is
0:51:13
yeah text for note
0:51:18
this is yeah it's not of type string so
0:51:21
it's throwing a 400
0:51:25
it's a bad request
0:51:28
good good validation on the
0:51:32
on the server side there
0:51:34
thank you the only thing
0:51:38
is that it didn't display the error
0:51:42
as in through the error code but it
0:51:44
didn't display the error
0:51:52
true because it's not being handled on
0:51:54
the client side i think right
0:51:58
um the response will have it though here
0:52:01
in the network oh yeah response topic is
0:52:05
not vetted so yeah it's just not being
0:52:08
handled on the client side code
0:52:16
yeah i think you're just i think
0:52:22
post note requests
0:52:24
or one of them yeah like
0:52:27
i don't know if this one's returning the
0:52:30
uh i don't know about the patch
0:52:37
yeah they're single
0:52:39
so yeah i think i don't know if this is
0:52:41
logging the status or not
0:52:57
yeah so that would have to change the
0:52:59
back end i'll probably have to work on
0:53:03
then changing all the data into um
0:53:13
are you gonna are you gonna write
0:53:15
validation for all the data attributes
0:53:21
not for the mvp no way
0:53:29
i'm going to send some javascript code
0:53:35
i'll try not to block
0:53:42
the only other data it needs to is the
0:53:45
color as well so i would i would
0:53:49
i would add the color
0:53:58
well before we call it a night
0:54:02
why do we need a color photo
0:54:06
that when you load the board the colors
0:54:12
right right right i say
0:54:14
that would make sense i mean if if if it
0:54:23
i guess people would
0:54:28
colors to have some type of meaning
0:54:34
think we can actually pick
0:54:36
probably yes we can pick colors because
0:54:39
that's already happening
0:54:44
when i i hooked it up for the websocket
0:54:53
you can see my screen right so yeah
0:54:56
we're saved to save two right so save
0:55:02
right now they're just random because
0:55:04
when you load the board like it just
0:55:06
picks random colors
0:55:09
but when you update the color
0:55:12
it works with the websocket because i
0:55:23
i'm changing colors i'm colorful
0:55:26
i'm changing colors i'm spending
0:55:38
let's probably leave it at that one
0:55:42
now we do know where we need to start as
0:55:45
in changing the data object into
0:55:50
from string to an object and start from
0:55:53
there and see what happens
0:55:56
sounds good shouldn't be too bad it
0:55:58
shouldn't be too bad it should be pretty
0:56:00
pretty simple and then
0:56:02
that'll be nice because then when you
0:56:04
when you load the board
0:56:06
then all the cards should be in the same
0:56:12
yeah that you last left them instead of
0:56:14
all in a pile on the bottom
0:56:17
absolutely yeah true true and
0:56:22
would actually match
0:56:24
the existing version as well
0:56:28
yeah and that would just make sense
0:56:32
there's no there's almost no point in
0:56:35
well i mean it's good to have the
0:56:37
persisted cards but if the positions
0:56:40
aren't positioned persisted as well
0:56:42
then it would be really annoying
0:56:49
so yeah man let's leave it at there and
0:56:52
thank you very much for uh everyone who
0:56:54
joined um yeah being a productive
0:56:58
session and a good progress um
0:57:00
yeah let's come back and fix that um
0:57:05
i wouldn't say bug but
0:57:15
he always does this now since two days
0:57:21
yeah i wouldn't say about but um
0:57:28
feature that we want to implement
0:57:32
we would need to change a bit of the
0:57:34
backhand code as well so let's come back
0:57:37
and if you want to see how we do that
0:57:39
and tackled with this
0:57:41
feature um feel free to join us tomorrow
0:57:52
that is the one all right
0:57:55
have a good night guys
