0:00:24
what is going on guys welcome back to
0:00:27
another session of bill breaking fakes
0:00:30
and which is brought to you by the rule
0:00:32
coders yes that is us
0:00:42
i hope you all had a brilliant weekend
0:00:44
and it's still on ongoing because it's a
0:00:47
sunday night over here
0:00:52
let's do the honors for the punishment
0:00:55
of the country and then we can begin to
0:00:58
give a bit of an overview all for are we
0:01:01
going to be doing today right so
0:01:07
i begin today by acknowledging the
0:01:09
traditional custodians of the land on
0:01:12
which we gather today and pay my
0:01:14
respects to the elders past present and
0:01:16
future i extend their respect to
0:01:19
aboriginal and torres strait islander
0:01:25
right guys that was brilliant and um
0:01:28
yeah you might be observing that
0:01:31
tory the other rule code
0:01:33
isn't here yet uh so he is
0:01:37
um about to turn up um he just
0:01:41
messaged me so you won't be too long at
0:01:46
which would be really good
0:01:49
yeah so what basically
0:01:53
we've been working on is um
0:01:56
creating an enhanced version of an open
0:01:59
source project called scrambler
0:02:02
basically which is a kanban board so
0:02:07
go through what is that and you might be
0:02:11
able to understand the overview of it
0:02:13
so let's share my screen really quick
0:02:34
uh yeah i wanted to open a new tab and
0:02:37
then share that with you
0:02:40
all right let's do that
0:02:43
cool so we do this share screen
0:02:48
there you go that's our tab over here
0:02:54
what are we going to be doing is um i'll
0:03:00
system one review as in the open source
0:03:03
project that we are trying to create a
0:03:05
enhanced version of
0:03:09
which is basically this
0:03:14
i'll just go to the existing gear reaper
0:03:18
and take you through the
0:03:28
is a web-based simulation of physical
0:03:31
agile kanban board that supports
0:03:34
real-time collaboration so it's
0:03:44
you can say that it's got say to do
0:03:51
yeah you can name all the columns and
0:03:53
just basically paste sticking notes
0:03:57
depending on what you want to decide um
0:04:00
decide or etc etc so essentially a white
0:04:04
board but with columns and sticky notes
0:04:13
all right so i really hope that makes
0:04:23
now that's done um
0:04:25
so what we're doing is adding persistent
0:04:28
storage to that because it is existingly
0:04:31
um that isn't in there
0:04:33
so what happens that whenever
0:04:36
a new board is created
0:04:44
is only saved in cash
0:04:47
which means that when the server is down
0:04:54
it's called temperate storage
0:04:57
for example if you want to say that all
0:05:02
so what we are doing and
0:05:10
i mean adding a persistent storage to
0:05:13
their project so all the data is saved
0:05:19
the users will be able to update the
0:05:25
right so the admin only off the board
0:05:28
who has actually created it he will be
0:05:31
able to save the board
0:05:33
and the notes and then get
0:05:38
when they when you when he wants to
0:05:44
basically happens can happen
0:05:47
anytime and we're also integrating this
0:05:51
a aws platform and
0:06:04
yes that is the plan
0:06:06
uh for this entire project
0:06:10
what the work has already been done oh
0:06:13
this is here is my co-host
0:06:16
hey sorry i'm a little wet
0:06:20
that's all right good to have you
0:06:23
yeah i got i got caught in a bit of rain
0:06:29
and how are you feeling though now
0:06:38
how are you man yeah how's it going um
0:06:41
um very well yeah just got started and
0:06:44
gave a bit of a overview of the project
0:06:47
as in what we're building and
0:06:50
how we are enhancing the existing open
0:06:54
and how we are doing that and what are
0:06:58
we going to be doing
0:07:04
fantastic i see there's a comment in the
0:07:09
your amazing house
0:07:13
yeah so i actually bought it say a week
0:07:21
like okay i need a new home
0:07:24
so this is my new home now
0:07:42
citrus bill ray citrus
0:07:49
we're really hoping
0:07:51
we um pronouncing it correctly
0:07:57
at the back which i bought from gumtree
0:08:02
all right i'm just kidding
0:08:07
i'm just making stuff up now
0:08:10
guys it out on the side of the road
0:08:15
yeah and then pixel brought it back and
0:08:18
put that in the mansion there you go we
0:08:20
call it we call that a curb alert
0:08:23
we say kerbler in the u.s kerballer
0:08:30
okay i see so that's basically the stuff
0:08:34
on the curb isn't it yeah exactly yeah
0:08:49
tori has managed to
0:08:52
do a bit more on the
0:09:00
do you want to take us through that
0:09:04
uh yeah let's do it um fantastic there's
0:09:10
guys what do you think about
0:09:20
yeah that can be implemented
0:09:22
but personally i love
0:09:27
just because it's really easy
0:09:29
to use and i'm a lot familiar with it
0:09:34
um if we went to the
0:09:38
side of it we would have to first
0:09:40
as in stock from scratch
0:09:46
uh why are we using websocket instead of
0:09:49
http request so gag dev uh the reason
0:09:53
why we're using uh aws websockets um
0:09:56
that they actually replaced
0:10:02
so the existing i um the overall idea is
0:10:09
multiple users interact with the board
0:10:15
we're using web sockets
0:10:20
i really hope that um answers your
0:10:30
yes please that would be fantastic
0:10:43
is is really good in front end so he's
0:10:47
managed to do this stuff
0:10:49
which is going to be taking
0:10:51
us through probably within
0:11:05
uh so this is this is the the work i did
0:11:08
the other day for the
0:11:10
uh the default linda
0:11:14
i think it may be a good idea if you as
0:11:21
share what exactly you did the overview
0:11:24
and then we can go on and
0:11:27
explaining the details and the technique
0:11:30
and technicalities of it
0:11:32
if that's true sure
0:11:40
what we were missing
0:11:49
let me let me open the
0:11:52
here let me let me demonstrate it
0:11:59
so if we go if we go to the website
0:12:05
just so you know they
0:12:07
you do know that you can also share say
0:12:12
tab if you don't want to share the whole
0:12:16
because oh really it doesn't it doesn't
0:12:18
give me that choice
0:12:22
share what does it bring up for you
0:12:28
it just gives me my monitor option
0:12:34
does it say and then share screen
0:12:39
uh it it allows me to choose which
0:12:42
monitor i want to share
0:12:45
uh but have you got say
0:12:48
something saying chrome
0:12:50
tab no just just pick your monitor
0:12:56
yeah i don't know i'm i think i need a
0:13:01
stream yard account because i think i'm
0:13:03
always entering the show as a guest um
0:13:06
do you want to go back to your stream
0:13:12
let's check it out
0:13:16
it would just probably take two seconds
0:13:19
what do you want me to do
0:13:22
go back to yours and no uh as in go back
0:13:25
to your stream yard
0:13:29
in in the browser tab
0:13:31
okay yeah yeah uh-huh yeah and
0:13:39
yes so if you go to
0:13:47
um i'll show you what he's exactly i'm
0:13:53
i see i see i see i got you i got you i
0:13:56
see it now okay cool cool makes sense
0:13:59
so i can share a window i can share a
0:14:06
because that won't invade you as in
0:14:09
privacy on the sharing sharing screen
0:14:14
it would just share
0:14:16
the exact tab you want you want to be sh
0:14:20
you want to be sharing
0:14:32
um i'm just gonna do this with um
0:14:37
the website and we have pi socket um to
0:14:42
just sending a message
0:14:44
so basically what i did
0:14:47
was we needed a way to
0:14:51
websocket clients connected and
0:14:54
sending messages to broadcasting
0:14:58
messages to each other so when
0:15:02
when one client sends a message then
0:15:04
essentially all the other clients
0:15:06
that are connected to
0:15:14
they can receive the messages
0:15:18
so i'd say that uh
0:15:20
high level there um
0:15:23
i need to grab the
0:15:27
uh web socket url which is where
0:15:36
look for you and then i can pause
0:15:43
no but you can't you can't see you can't
0:15:45
see my dev tools oh that i don't like no
0:15:52
you're sharing a particular tab now
0:15:55
i'm sharing a i'm sharing the browser
0:15:57
window but here i'm gonna i'm gonna
0:16:03
just because i need that i need it to
0:16:05
share the dev tools
0:16:10
can you let me share again yeah thanks
0:16:20
quickly be lazy and
0:16:28
where is it it should be a network
0:16:36
or is it just here
0:16:38
i think we get it here
0:16:54
all right there it is all right perfect
0:16:57
all right so i just need this for
0:17:00
uh i need this for pie socket
0:17:08
so if we connect to this user
0:17:12
pi socket here we establish the
0:17:15
and in the board so we're on the test
0:17:18
board on the website right
0:17:20
and if you see in the console here we
0:17:23
are also open for business so we're
0:17:26
connected to the websocket
0:17:28
this this this is no this is from
0:17:30
dynamodb but the websocket is connected
0:17:33
this is the websocket
0:17:35
let's sock it open that's right
0:17:39
and now if i go back to pi socket
0:17:58
message which i called it message in
0:18:02
um the lambda so attached to the event
0:18:07
uh going to be this message and action
0:18:13
all right and we can just say hello
0:18:20
and if we send this we're not going to
0:18:29
internal server error why is that
0:18:34
should i do wrong um is it because the
0:18:37
message is supposed to be in
0:18:41
yeah maybe you're right about that
0:18:45
there you go so no no error i sent two
0:18:48
of them accidentally
0:18:49
so now we go back to the dev tools and
0:18:52
we see hello from pi socket
0:18:57
so now if i go look at that lambda
0:19:03
all the logic is in there
0:19:08
um what we're doing is
0:19:12
when that default action is sent we're
0:19:15
hitting this we're requesting this
0:19:17
lambda the default lambda
0:19:24
okay let's start where this is the
0:19:26
handler okay here's the handler
0:19:34
message from the event body let me make
0:19:37
this bigger there we go so we get the
0:19:39
message from the event body right
0:19:48
yeah yeah okay cool all right and then
0:19:51
um uh if there is no message it's going
0:19:53
to send back a sasko 418 which is if you
0:19:56
look that up it's officially i'm a
0:20:07
all right that's official
0:20:12
and um so if there is a message then
0:20:30
this is our dynamo db instance it's doc
0:20:34
so then we're running a scan on the
0:20:39
which has all those connection ids so
0:20:42
we're scanning it and then it's
0:20:46
all the items so here it's returning the
0:20:50
and then we're just mapping over it
0:20:53
getting the connection ids and just
0:20:54
returning the connection ids
0:20:59
with the connection ids
0:21:04
go back down to the function
0:21:08
then we can basically filter
0:21:11
filter out the connection id that sent
0:21:16
from the request context so that we're
0:21:18
not broadcasting the same message back
0:21:22
ourselves ourselves so pi socket in this
0:21:29
right right that makes sense yeah
0:21:32
right because in dynamodb our the pi
0:21:35
socket connection id is there but we
0:21:37
don't want to send a message back to
0:21:39
ourselves in this case
0:21:43
um and then all we're doing here is then
0:21:53
sending the message from pi socket
0:21:58
which is this this message here um using
0:22:04
uh this aws this instance of the api
0:22:08
gateway management api with with our
0:22:15
request context which i guess is just
0:22:21
uh the url that you get in
0:22:23
api gateway for the websocket the
0:22:28
url so that broadcasts the messages
0:22:36
it just it just maps over all the
0:22:38
connection ids and then it just
0:22:43
sends them all a message using this post
0:22:45
to connection where you have this data
0:22:48
property in the message
0:22:50
and for each connection id and then this
0:22:53
is when this is this is just sending it
0:22:57
then we're returning a 200 status code
0:23:03
everyone gets the message that has a
0:23:12
the the person who posted the message
0:23:14
themselves accept them yeah except them
0:23:17
because they're they're they're removed
0:23:21
the connection ids array that we are
0:23:23
then looping over sending messages one
0:23:27
at a time basically
0:23:29
right right yeah yeah yeah that makes
0:23:36
that would mean that if
0:23:39
when you created the board and if i also
0:23:45
open it from my side
0:23:47
and you do a test from pi socket
0:23:52
would that mean we both will
0:24:01
if you open a board
0:24:04
yes so say for example you
0:24:07
you have created a board called
0:24:14
i'm familiar with that
0:24:16
um yeah so if you create that board and
0:24:20
then you send me um the
0:24:25
and then i open the url on on my side
0:24:34
i don't know i look
0:24:36
i'm a little teapot
0:24:38
okay from your side
0:24:40
okay would that mean
0:24:45
huh i like the way you say i'm a little
0:24:49
i'm a little teapot
0:24:56
so if you send it so right now on the
0:24:58
client side i don't think we've
0:25:03
functionality to send messages yet
0:25:07
but oh so that's in
0:25:11
yeah this is in the lambda this is in
0:25:13
the default lambda
0:25:15
yeah right right okay yeah so
0:25:19
that would probably be the next stage
0:25:22
yeah so next would be some way to
0:25:26
send the message from the client
0:25:29
and then yeah it it will
0:25:32
hit this it'll it'll like
0:25:34
you're doing the same thing in pie
0:25:36
socket you just need a on message or i
0:25:39
mean um send send message with the
0:25:43
and then whatever message you want to
0:25:45
send and then it'll go to the websocket
0:25:48
it'll go to api gateway and then it will
0:25:51
hit the hit this it'll spin up this
0:25:53
lambda and then the lambda will
0:25:56
send broadcast the message to every
0:25:59
connection id that's in the database
0:26:02
yeah that's absolutely
0:26:04
right so i guess what we would probably
0:26:08
do as a first step
0:26:11
i think it would be a
0:26:14
i was thinking that should we start on
0:26:22
we do the merge first
0:26:30
wouldn't say where do i mention now but
0:26:35
yeah up to you whatever you want to do
0:26:38
whatever you think it is
0:26:42
the reason why i'm saying that we can
0:26:45
possibly do the merge
0:26:53
it would be good that the person who
0:26:59
yeah because i don't really wanna as in
0:27:03
stuff not knowing what i'm doing
0:27:07
and if i'm confused then i can straight
0:27:12
ask you how about that
0:27:15
yeah absolutely that's a good idea
0:27:20
but there's only one problem
0:27:24
the title of this of this
0:27:27
video is something else
0:27:32
but um yeah that's
0:27:34
fine we can put uh i can possibly
0:27:37
leave the merge too as in in my
0:27:41
offline time and if i've got any
0:27:44
questions i'll just
0:27:46
text you and we can take it from there
0:27:48
sure sure there's always a live share
0:27:52
yeah yeah exactly so i guess
0:27:57
this is all i mean brilliant brilliant
0:28:00
stuff and we are one step closer to our
0:28:04
finishing of the project which is
0:28:08
um what we can possibly do now is
0:28:12
possibly work on the front end as in
0:28:15
wiring the both together so um
0:28:22
this lambda from the front end and just
0:28:27
work from the client's side so for
0:28:30
example if we post then that
0:28:33
note in the corner
0:28:37
and save it which means that it will
0:28:40
obviously be saved
0:28:45
create a note from the front end and
0:28:51
some kind of a text
0:28:54
then check if it gets updated on the
0:29:03
does that make sense
0:29:12
at some point it'll be
0:29:15
benef it'll be good if you can go to the
0:29:18
github repo and set
0:29:25
the the github actions
0:29:29
ci cd you just need you need to set the
0:29:33
we need to figure out the pull request
0:29:36
because if i work here on i i have if i
0:29:38
want to push the changes to scrumbler
0:29:42
coders.dev then i have to work from my
0:29:47
all right so yeah that part still needs
0:29:53
how about if we do that part now
0:29:59
that would mean that one topic is
0:30:01
actually done and we can then move on to
0:30:06
okay i it i don't i don't have access to
0:30:10
setting the secrets in
0:30:12
in the github repo so it is it's
0:30:14
something you have to do
0:30:17
oh okay right but i i see
0:30:22
because you're the you're the repo
0:30:26
i don't i don't have i don't have
0:30:30
okay then um i think in in that case
0:30:34
what we can probably do is
0:30:36
continue for now as in implementing the
0:30:46
you don't really have to push it and
0:30:48
then push the code
0:30:51
well what uh i'm just lazy so what i do
0:30:56
create something in here and then i do
0:30:59
like a really silly thing which is i
0:31:01
just copy over the code into the main
0:31:03
repo and then push the changes
0:31:08
that's actually a small thing to do
0:31:13
the better thing to do is just push from
0:31:15
my fork repo to the main repo
0:31:22
as you know there's always as in more
0:31:28
you're going for them
0:31:30
i'm just like i don't want to open a
0:31:32
pull request and then and
0:31:34
there's my own pull request
0:31:37
so just copy over whatever i create
0:31:40
what could go wrong
0:31:45
the code is working is
0:31:54
one other thing if you notice
0:31:57
i don't know if we went over this but
0:32:05
on the on the production site
0:32:07
if you want to access a board
0:32:11
write slash board right the path is
0:32:13
bored and then it's it's this query
0:32:16
string board name equals whatever the
0:32:21
but if you do this in low
0:32:23
local because of the way we have it set
0:32:25
up you don't write board you need to
0:32:30
oh if you're doing a lot
0:32:39
i think that would be a really good
0:32:41
thing to mention in the readme because
0:32:44
it is an open source project
0:32:46
okay yeah there's probably
0:32:50
there's probably a way
0:32:53
if you change the file structure of the
0:32:57
where it's in a folder called board
0:33:00
then i think it would reflect this path
0:33:06
right i think that's the way it worked
0:33:08
but i honestly i'm born into the age of
0:33:12
spas so i don't have that much
0:33:14
experience working in
0:33:19
html applications that are
0:33:25
non-spa stuff which is kind of sad
0:33:40
that is a part of the plan and then to
0:33:43
convert it into the
0:33:47
but that will come after the first first
0:33:56
one question i had too is yeah um
0:34:04
this is this is this on connect i think
0:34:07
connects to the websocket
0:34:13
this opens a websocket connection on the
0:34:17
do you want this on connect um to happen
0:34:21
only on the board page
0:34:25
not on the home page right
0:34:29
just on the board page
0:34:35
because what i actually want is that
0:34:39
the users would only connect be able to
0:34:42
be connected to the websocket only when
0:34:58
so the creation of the board will only
0:35:01
be available for the admin
0:35:05
oh okay interesting
0:35:10
then this we can actually move
0:35:15
i created so that when you connect to
0:35:19
home.html it's you won't open up a
0:35:22
websocket connection
0:35:26
move everything into this um
0:35:42
so this is like the load board page
0:35:48
it makes sense it loads whatever
0:35:51
needs to happen inside the board page
0:36:00
what do i have here
0:36:04
so i have this websocket
0:36:10
so this can go in here
0:36:14
let's open the website
0:36:16
yep maybe it's a um maybe
0:36:20
in in the future it might be a
0:36:23
good idea to make the code a bit more
0:36:27
readable and then just add kind of
0:36:34
extra lines between the statements yeah
0:36:51
does look terrible i agree i did i think
0:36:54
i refactored this like once but it needs
0:36:57
to be refactored again
0:37:07
just send message what does this do
0:37:10
websocket send message all right so this
0:37:22
i can leave this on message function
0:37:33
um i mean whatever i'll just refactor
0:37:36
this in the future
0:37:39
that's fine not a big
0:37:41
deal at the moment
0:37:53
modern day programming
0:37:57
this is um if you've if you ever saw my
0:37:59
other notes like this this is js this is
0:38:02
js docks i don't know if you've ever
0:38:08
i'm like used to using typescript now
0:38:11
and i'm and it's the closest thing i can
0:38:15
all right i say yeah
0:38:18
because i can i can give these types
0:38:24
by using js docs and then bs code will
0:38:29
and that's it's pretty it's pretty
0:38:37
so the websocket is open and then
0:38:43
this this doesn't really need this i
0:38:45
guess this is kind of for us
0:38:53
this is an on message
0:38:58
what do we want to do with the on
0:39:08
what do we want to do with the on
0:39:09
message event zane
0:39:14
this is for when we're gonna send
0:39:19
message to multiple users via websocket
0:39:27
we receive a message
0:39:29
oh this is when we receive a message or
0:39:32
you want to deal with that later but
0:39:38
okay so you want to do something on send
0:39:46
right now we'll just
0:39:48
so this is a websocket event on message
0:39:51
handler so basically when uh when
0:39:54
when a message comes in
0:39:57
this event handler
0:40:01
just log out the data for now
0:40:04
oh so that's for the receiving
0:40:08
receiving message um can you possibly
0:40:11
name that uh from on message to maybe
0:40:22
so yeah this is part of the api but i
0:40:26
we could we could wrap it in its own
0:40:28
function if you wanted
0:40:34
not at the moment probably
0:40:36
um so this is basically called when
0:40:40
the other user writes something and they
0:40:43
send a message this function will be
0:40:50
like it's just an event listener
0:40:55
receives a message from
0:41:02
so what i was as in just confirming that
0:41:07
say you and me are connected and i send
0:41:11
um a message from my side
0:41:15
this is where i would receive it this is
0:41:18
where i would write okay right right i
0:41:27
yeah yeah don't worry about that one for
0:41:29
now it's crazy complicated yeah yeah
0:41:36
there's a lot there's a lot of things
0:41:38
that will happen through that one
0:41:43
well i don't know they're kind of the
0:41:44
same honestly because like if you to
0:41:48
yeah i'm not going to think too much
0:41:50
about it but yeah yeah some things you
0:41:55
trip okay then um in that case and i
0:41:58
just focus on let's just
0:42:01
leave that on message as a placeholder
0:42:07
we can just focus on sending the message
0:42:10
at the moment for multiple users so all
0:42:13
we basically want to send is the text on
0:42:21
so how do we get the notes i forget
0:42:27
so there would be a variable that's
0:42:33
as in on individual individual note so
0:42:39
just get the current note
0:42:44
just store the current text
0:42:47
available i want the one that we're
0:42:56
the one that's currently being edited
0:43:00
okay do you know how to get at that
0:43:06
still front and isn't it
0:43:15
there's a i think there's like on edit
0:43:26
um if you if you go to still front end
0:43:36
yeah i was looking in there i think
0:43:42
and can you see all the functions
0:43:52
uh which which function do you want to
0:43:56
the thing i can't remember which
0:43:58
function was it but i think there was a
0:44:06
so when there's like patch i know so
0:44:18
i wrote this the other day so
0:44:22
um because the posts and patch wasn't
0:44:28
i don't know why so i just kind of wrote
0:44:30
it here in still front end
0:44:39
get text from no it's alright i think
0:44:41
that is the one that i might must be
0:44:44
talking about this text for notes array
0:44:46
that this variable is from script.js i
0:44:49
think you guys added it it's a map
0:44:58
kartik i think added this
0:45:06
i thought that hotkey worked
0:45:09
there's like a hotkey to go back where
0:45:10
you just were and i forgot what it was
0:45:18
that's in oh right visual studio
0:45:21
so i think that worked
0:45:23
yeah that worked i actually it went back
0:45:25
to where my cursor was which is wow
0:45:30
there's one to go back
0:45:32
yeah so that's great thank you
0:45:40
this happens when you click the save
0:45:47
this this save yeah
0:45:56
where is this being initialized
0:46:04
uh you get the you get the values from
0:46:07
the data structure you guys created
0:46:09
which is that text notes array or text
0:46:13
notes values or something and so that's
0:46:21
uh edited or something i can't remember
0:46:27
something like that
0:46:29
and then that would be probably all than
0:46:33
all all the texts in all the notes
0:46:43
either get patched or
0:46:47
post if they're new
0:46:49
post is new patches update
0:46:53
right right right i see i i don't know
0:47:00
how to get the get at the currently
0:47:08
because if you want to say this card is
0:47:13
or do you want to send
0:47:16
through the websocket
0:47:18
or do you just want to send the one card
0:47:23
the logic that we are looking at um in
0:47:27
the code right now
0:47:29
that's for kind of a different function
0:47:33
which is to save in the database
0:47:36
yeah yeah i i understand i'm just trying
0:47:38
to find where i get at the cards
0:47:41
like where's the like how do i access
0:47:46
when we send the message from the
0:47:48
websocket do we want to send it when we
0:47:51
save do we want to send it when we're
0:47:53
editing a card or do we want to
0:47:59
we basically and that's actually a
0:48:02
really good angle to put as cuz i got
0:48:06
confused between the two function
0:48:09
two functionalities and you you kind of
0:48:13
to the actual point
0:48:14
my bad i'm showing you the wrong i'm
0:48:16
showing you this code which has nothing
0:48:18
to do with the websocket but i'm just
0:48:21
kind of using it as reference so sorry
0:48:25
and no no no no uh i went off track
0:48:30
i know you're using this code
0:48:33
to base it as in where we are
0:48:36
where we have all the values that are in
0:48:39
the notes as in the text and we and
0:48:42
you're trying to ask that
0:48:44
where can we get the
0:48:48
value that's being edited is it from
0:48:51
this code or somewhere else uh am i
0:48:55
that's right yeah that's right yeah so
0:48:57
um i finally uh uh
0:49:01
and should explain
0:49:04
no no it's um it's it's it's
0:49:09
i'm happy that we uh
0:49:16
eventually um which is good
0:49:30
so we don't do some sleuthing too while
0:49:35
uh so we don't want to do anything on
0:49:43
we don't want to mix
0:49:45
the interactions with the db with the uh
0:49:48
and the web sockets
0:49:50
so what i'm thinking that we could boss
0:49:53
and we could possibly use
0:49:55
the variable in the script.js
0:49:58
to pass it through this still front-end
0:50:02
and then we can pass that through the
0:50:08
does that make sense
0:50:14
um it looks like when you click so
0:50:18
so to get at the currently edited card
0:50:20
it looks like when you click on it
0:50:22
or to edit it well what did i do i broke
0:50:30
go away google trans
0:50:35
okay just translate it do your thing i
0:50:57
and can uh appreciate there we go you
0:51:01
can turn the extension off
0:51:09
when you click the extension
0:51:11
all right let me just refresh whatever
0:51:16
i don't know why it's doing that i think
0:51:18
i just clicked on it too many times
0:51:28
i wonder if there's a way
0:51:34
um so there's a way
0:51:38
see if i can do this here
0:51:44
this is this is front end sleuthing
0:51:48
all right so you can go to
0:51:51
hover and if i do focus
0:51:56
nope all right hover active target
0:52:07
tori can you possibly go to the
0:52:09
script.js i just want to have a look at
0:52:16
none of this works all right but if you
0:52:19
okay if you uh before we go there
0:52:26
you watch over here what happens to this
0:52:29
content editable i think this changes to
0:52:31
true when i click on it
0:52:40
all right and if and if we create
0:52:44
note just like that
0:52:51
then then the one that's not being
0:52:54
edited i think will say content editable
0:53:01
so if i want to make a cheap hacky way i
0:53:04
can just use a query selector
0:53:07
that basically looks at all of these
0:53:10
notes on the board using query selector
0:53:14
um just finds the one with the content
0:53:25
then that should then that should give
0:53:27
us the card that's currently being
0:53:36
we can see we can get the text from the
0:53:46
throw it in the websocket
0:53:49
yeah when you click what do you want to
0:53:51
do when you click save or what
0:53:54
so this won't have anything to do with
0:53:57
this when it's done being edited
0:54:00
yes yes okay let me think about let me
0:54:07
there must be a there must be a listener
0:54:14
um we can have a look but what was on my
0:54:20
you know on the latest
0:54:27
we can check as soon as
0:54:35
no that wouldn't work that that wouldn't
0:54:37
work because my idea
0:54:40
was to keep a track of the comments uh
0:54:49
and then when it changes to false you
0:54:51
know it's not being edited is that where
0:54:56
yes but that would bring up all the
0:55:01
ones and send them all at once
0:55:04
then and well no i think i think i think
0:55:07
that i think that could work
0:55:10
i think that could work actually because
0:55:12
that's what i initially thought too
0:55:15
the thing is you need to know
0:55:26
like you need to like dispatch an event
0:55:29
or some something when that card is now
0:55:35
when when it changes from true to false
0:55:38
then you would like run a function or
0:55:42
some fire off some custom event or
0:55:45
something like that
0:55:46
and then that would say
0:55:49
go send this text through to the api for
0:55:55
or not the api i mean the websocket
0:55:59
you know websocket api yeah
0:56:03
kind of the same things
0:56:11
i don't know if we can solve this right
0:56:25
let's just do it the hacky way and see
0:56:27
if it works and then we can yeah
0:56:29
we can fix it up from there
0:56:32
exactly yeah let's do that
0:56:37
because i'd probably just need some
0:56:39
extra time to look at the other existing
0:56:42
how they're doing it and then probably
0:56:44
base it off script js
0:56:48
yeah yeah right right i see
0:56:53
for now we can just say
0:57:05
uh well yeah we need some
0:57:11
we if we do it this way we do need to
0:57:17
add the queries lecture yeah this isn't
0:57:20
going to work my bad
0:57:22
we need to know when it's true and then
0:57:25
when it's not true
0:57:27
but the only way to know when it's true
0:57:29
is probably by looking at script js
0:57:38
well there's there's actually
0:57:41
this is where like the the debugger is
0:57:46
so basically we can say
0:57:51
um we can just put a break point when
0:57:56
create card so this is script js
0:58:00
we have delete card we have edit cards
0:58:02
so there is the edit card
0:58:06
um data dot value there content first
0:58:13
children can we use the edit cause data
0:58:19
yeah let's check that out let's add a
0:58:21
break point and see if this hits the
0:58:33
did it hit the break point no it didn't
0:58:40
we might want to restart and then run it
0:58:43
should work right away actually
0:58:51
jacobs are asking how i applied for the
0:58:53
pizza hut ninja they need more drivers
0:58:56
uh actually i didn't get there but this
0:58:59
said that they probably need the
0:59:02
australian citizens
0:59:10
i know many people
0:59:15
yeah so that's why i haven't read
0:59:22
rejected even by pizza huh
0:59:31
data item blah blah blah update text
0:59:35
i wonder though if this was for their
0:59:42
that was here let me try this breakpoint
0:59:56
all right yeah i'm i'll probably have to
0:59:58
like look through that's why i'm that's
1:00:01
or i'm making um it's just it's been a
1:00:04
good progress as in really good and we
1:00:07
can just come back to it tomorrow then
1:00:09
yeah i'll uh i'll take a
1:00:12
i'll take a look at it like
1:00:14
later tomorrow or something when i got
1:00:17
some time in the morning
1:00:19
surely yeah this will bring ever and
1:00:23
that'd be really helpful
1:00:28
perfect so yeah there's been a good
1:00:30
progress and um yeah we got
1:00:34
we uh tori managed to um
1:00:40
the uh the messages from the lambda to
1:00:46
which was fantastic and now
1:00:54
there's no eye in team
1:00:59
oh look at that hakamotory
1:01:03
my head is so cold from the rain
1:01:06
oh i'm gonna get this yeah
1:01:09
have a hot shower and yeah maybe
1:01:14
spill and that sounds good actually yeah
1:01:17
yeah might as well
1:01:22
yeah if you want to see how we solve
1:01:24
this problem of um
1:01:26
sending what we did on the
1:01:29
um back end um between the lambda and
1:01:36
this task how we connect the client's
1:01:42
back end of the website
1:01:46
same time same place and
1:01:50
a new task that's the one
1:01:53
all right guys have a good night um and
1:01:57
we'll see you tomorrow
1:01:59
thank you everybody thanks for joining
1:02:00
have a great night
