boarzVideosClipsStatistics

🎬Francesco

⏪
🎦
⏩
Featured in#️⃣EP 177 - Today's Stream
AllClipsEpisodesHas Blog PostZainThaneshKartikTorey
🎬
Krunchmaster Kartik
Build, Break & Fix
ZainboarKartikboar
🎬
Killing it
Special Edition: We don't stop until we get our code working
ZainboarKartikboar
🎬
Schooling in brown countries
Build,Break & Fix // Weekend two hour special
ZainboarKartikboar
🎬
Unprofessional Kartik
Build,Break & Fix // Weekend two hour special
ZainboarKartikboar
🎬
Brain Refresh
Build, Break & Fix // Setting a blog using Hugo and AWS Amplify
ZainboarKartikboar
🎬
Finger driven architecture
Build, Break & Fix // Working out Software design
ZainboarKartikboar
🎬
Fast food driven architecture
Build, Break & Fix // Working out Software design
ZainboarKartikboar
🎬
Can't be ashamed if there's never a first version
Build, Break & Fix
ZainboarKartikboar
🎬
Not a uni student
Build, Break & Fix
ZainboarKartikboar
🎬
Can't work, deploying
30 mins of deployment 😠 || 30 mins of coding 🥲
ZainboarKartikboar
🎬
Two points of contact
Today's Broadcast
ZainboarKartikboar
🎬
CORS exclusive lovin'
Today's Broadcast
ZainboarKartikboar
🎬
Sensible policy
Today's Stream
ZainboarKartikboar
🎬
Shoes in mouth
Today's Stream
ZainboarKartikboar
🎬
The code always wins
Buidl Break Fix
ZainboarKartikboar
🎬
Chicken curry in the brown way
Buidl Break Fix
ZainboarKartikboar
🎬
Finger memory practice
Build Break Fix
ZainboarKartikboar
🎬
See you later Kartik
Build Break Fix
ZainboarKartikboar
🎬
Keep your code looking sexy
Today's Broadcast
ZainboarKartikboar
🎬
Echo chamber Zain
Today's Broadcast
ZainboarKartikboar
🎬
And Kartik never got a job again...
Today's Broadcast
ZainboarKartikboar
🎬
Pilot? What even iz dat kind of fing
Today's Broascast
ZainboarKartikboar
🎬
Fish and Chips
Build - Break - Fix
ZainboarKartikboar
🎬
Backup career
Build - Break - Fix
ZainboarKartikboar
🎬
Professional background? Wat even iz dat?
Today's Broadcast
ZainboarKartikboar
🎬
Private mentorship group
Today's Broadcast
ZainboarKartikboar
🎬
Actually good job advice from Zain
Today's Stream
ZainboarKartikboar
🎬
What a classic!
Today's Stream
ZainboarKartikboar
🎬
Uber driver in training
Today's Stream
ZainboarKartikboar
🎬
Viewer burn
Today's Broadcast
ZainboarKartikboar
🎬
Time for a nap
Today's Broadcast
ZainboarKartikboar
🎬
A sniffer of a line
Today's Broadcast
ZainboarKartikboar
🎬
Slow Zain
Today's Broadcast
ZainboarKartikboar
🎬
No single point of failure
Today's Broadcast
ZainboarKartikboar
🎬
Gambling on bad logic
Today's Broadcast
ZainboarKartikboar
🎬
Estimated Time of New-Careers
Today's Broadcast
ZainboarKartikboar
🎬
Fake Nod
Today's Broadcast
ZainboarKartikboar
🎬
Investing in 'the brand'
NEW SETUP!!
ZainboarKartikboar
🎬
Hitting a brick
NEW SETUP!!
ZainboarKartikboar
🎬
Master of the green screen
NEW SETUP!!
ZainboarKartikboar
🎬
Logiclesstech
NEW SETUP!!
ZainboarKartikboar
🎬
Get him to the greenscreen
Today's Stream
ZainboarKartikboar
🎬
Change the digit to a number
Today's Stream
ZainboarKartikboar
🎬
The benefits of pair programming
Today's Broadcast
ZainboarKartikboar
🎬
Xs, the healthy choice
Today's Stream
ZainboarKartikboar
🎬
Xs vs mother
Today's Stream
ZainboarKartikboar
🎬
The beginning of the end of productivity
Today's Stream
ZainboarKartikboar
🎬
Unprofessional Zain
Today's Stream
ZainboarKartikboar
🎬
Blazing fast
Today's Stream
ZainboarKartikboar
🎬
Premature celebratory dance
Today's Stream
ZainboarKartikboar
🎬
Timeline slippage
Today's Stream
ZainboarKartikboar
🎬
Speed coding
Today's Stream
ZainboarKartikboar
🎬
Sorry I dont know that voice
Today's Broadcast
ZainboarKartikboar
🎬
Definition of done
Today's Broadcast
ZainboarKartikboar
🎬
Amway bites
Today's Broadcast
ZainboarKartikboar
🎬
A cool stream
Today's Broadcast
ZainboarKartikboar
🎬
Spooky Kartik
Today's Broadcast
ZainboarKartikboar
🎬
Water physics 101
Today's Stream
ZainboarKartikboar
🎬
Scrum master Zain
Today's Stream
ZainboarKartikboar
🎬
Zain applying his scrum master skills
Today's Stream
ZainboarKartikboar
🎬
Zain the blunderer
Today's Stream
ZainboarKartikboar
🎬
Healthier than other traditional drinks
Today's Stream
ZainboarKartikboar
🎬
Real headscratcha
Today's Stream
ZainboarKartikboar
🎬
Bracket blues
Today's Stream
ZainboarKartikboar
🎬
If statements are not good practice
Today's Stream
ZainboarKartikboar
🎬
Kappa Quality Code
Today's Stream
ZainboarKartikboar
🎬
Exciting switch statements
Today's Stream
ZainboarKartikboar
🎬
Switched-on hat
Today's Broadcast
ZainboarKartikboar
🎬
Functions, one of the big coding challenges
Today's Broadcast
ZainboarKartikboar
🎬
Break fast
Today's Broadcast
ZainboarKartikboar
🎬
Blood and breath pumping up
Today's Broadcast
ZainboarKartikboar
🎬
Wrong since day 1
Today's Broadcast
ZainboarKartikboar
🎬
Electronic waves
test
ZainboarKartikboar
🎬
RAWR coders
test
ZainboarKartikboar
🎬
Transit in Japawn
test
ZainboarKartikboar
🎬
Xs sponsorship
test
ZainboarKartikboar
🎬
Lame roars
test
ZainboarKartikboar
🎬
Setting up a suppository in Diagon Alley
test
ZainboarKartikboar
🎬
Background Diagon Alley
test
ZainboarKartikboar
🎬
Half speed zain
test
ZainboarKartikboar
🎬
One second penetration
test
ZainboarKartikboar
🎬
Top loading switches
test
ZainboarKartikboar
🎬
Making it rain with CodeBuild
test
ZainboarKartikboar
🎬
What is a sea cable?
Today's Stream
ZainboarKartikboarToreyboar
🎬
If statements are bad practice
Today's Broadcast
ZainboarKartikboar
🎬
Tomato fan
Today's Broadcast
ZainboarKartikboar
🎬
Strong intro
Today's Stream
ZainboarKartikboar
🎬
Impossible URL
Today's Stream
ZainboarKartikboar
🎬
Clever devs
Today's Stream
ZainboarKartikboar
🎬
Always CORS related problems
Today's Stream
ZainboarKartikboar
🎬
CORS headscratcha
Today's Stream
ZainboarKartikboar
🎬
Torres Strait Icelander people
Today's Stream
ZainboarKartikboarThaneshboar
🎬
Icelander or Islander?
Today's Stream
ZainboarKartikboarThaneshboar
🎬
Best Practices
101/200 Episodes
ZainboarThaneshboar
🎬
ROAR coders
105/200
ZainboarThaneshboar
🎬
Diagon Alley? What is that kind of fing?
112/200
ZainboarKartikboar
🎬
C.O.D.I.N.G
113/200
Zainboar
🎬
What's testing
115/200
ZainboarThaneshboar
🎬
CORS coders
115/200
ZainboarThaneshboar
🎬
Complimenting the wrong person
Today's Stream
ZainboarThaneshboar
🎬
Alt+F4 Zain
Today's Stream
ZainboarThaneshboar
🎬
Fixing and failing
Today's Stream
ZainboarThaneshboar
🎬
Brown is always better than white
AWS Websocket + DyanmoDb + Lambda
ZainboarThaneshboar
🎬
Wild street dogs
Today's Stream
ZainboarToreyboar
🎬
The more you know
How to Host Web App Using AWS S3, CloudFront and Route53
ZainboarThaneshboar
🎬
Inactive brain
How To Host Web App In AWS S3 with Custom Domain Using Route 53
ZainboarThaneshboar
🎬
No electricity in Bali
Today's Stream
ZainboarToreyboar
▶️
Francesco
Today's Stream
ZainboarToreyboar
🎬
Indian givers
Compare Hashed Passwords Using Bcryptjs
ZainboarToreyboar
🎬
Cold coffee, cold tea
Today's Stream
ZainboarToreyboar
🎬
Tough questions
Verify Passcode Saving Information to DynamoDB with NodeJs
ZainboarThaneshboar
🎬
Tandoor? Wat even iz dat kind of fing
Today's Stream
ZainboarThaneshboar
🎬
This is why you don't click ops
Today's Stream
ZainboarToreyboar
🎬
Bish Bash Bosh
Get Board Columns from Frontend to Backend NodeJS
ZainboarThaneshboarToreyboar
🎬
Zip first developer
Today's Stream
ZainboarThaneshboar
🎬
Busted again
Today's Stream
Zainboar
🎬
Torey the stinker
Beta Testing Fixes Part 2
ZainboarToreyboar
🎬
Torcoders which are roarers
Beta Testing Fixes Part 3
ZainboarThaneshboar
🎬
Delusional Zain
Beta Testing Fixes Part 3
ZainboarThaneshboar
🎬
Hey guys, torey here
Beta Testing Fixes Part 3
ZainboarThaneshboar
🎬
Zain's going platinum
Today's Stream
ZainboarThaneshboar
🎬
Doggy dog
Today's Stream
ZainboarThaneshboar
🎬
Fartik
How To Test Prevention XSS Attack
ZainboarKartikboar
🎬
Second Favourite
Today's Stream
Zainboar
🎬
Disco Zain
Today's Stream
Zainboar
🎬
Keyboard allergies
Hook Up AWS Websocket
Zainboar
🎬
As you been poopin?
Hook Up Board Columns to Websockets Nodejs + AWS Websockets
Zainboar

Subtitles

0:00:01
[Music]
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:33
yes yes
0:00:34
and
0:00:35
today we have
0:00:37
myself and tory how we feeling tori
0:00:42
feeling good
0:00:45
brilliant brilliant jack how's your day
0:00:48
been
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:56
like coding
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:12
absolutely
0:01:14
fantastic cool so
0:01:16
let's do a buffet um
0:01:18
actually
0:01:19
not a bit but um let's do
0:01:22
the
0:01:22
[Music]
0:01:23
um
0:01:24
acknowledgement of the country after
0:01:27
that
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:43
people here today
0:01:46
all right fantastic
0:01:50
um so
0:01:51
today uh the plan
0:01:55
have you felt that many
0:01:56
before thing
0:01:58
actually
0:02:04
um
0:02:06
the magic before we
0:02:08
yes actually the first time i found them
0:02:11
imagine
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:26
sorry but
0:02:30
[Music]
0:02:33
um
0:02:34
you maybe want to
0:02:36
uh on me yourself story
0:02:40
that's weird
0:02:42
yeah um so
0:02:44
i made you first because um
0:02:48
there was a lot of camera noise as in
0:02:50
coming 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:58
but then um
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:10
you're actually
0:03:12
on uh chose to me yourself
0:03:18
gotcha cool
0:03:19
perfect
0:03:20
so
0:03:21
uh
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:37
um
0:03:38
what we would probably do is um
0:03:47
okay um
0:03:50
so just a
0:03:52
bit of a recap first yes
0:03:55
today
0:03:56
what we did was
0:03:58
um
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:17
in this
0:04:19
and
0:04:20
yeah right so
0:04:23
cool
0:04:24
and um so
0:04:26
we also did um
0:04:30
kind of
0:04:31
uh
0:04:32
raise some issues in
0:04:34
jira too as in to keep a proper track
0:04:37
of the project
0:04:40
and so at the moment um i think what we
0:04:45
could possibly work on is um
0:04:48
[Music]
0:04:49
just remember are just basically
0:04:53
remembering the
0:04:54
places as in the coordinates
0:04:58
where
0:04:59
the uh where the notes were when they
0:05:02
were saved
0:05:03
because then what can happen is that
0:05:06
when the users get the board as in get
0:05:09
the notes
0:05:10
um
0:05:12
it will just fly back into the proper
0:05:15
positions of them cool
0:05:18
can we add the
0:05:20
can we add the color at the same time as
0:05:22
well yeah the note
0:05:24
color
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:38
um
0:05:39
sure
0:05:40
run down already
0:05:45
yeah let me
0:05:46
pop that open i think we need to add
0:05:49
some
0:05:54
um
0:05:56
all right should be
0:06:03
uh
0:06:05
no
0:06:10
there we go all right
0:06:12
there we go
0:06:15
you see my screen
0:06:17
yes i can and i'll just add it to the
0:06:20
stream as well
0:06:21
cool
0:06:22
all right um oh this is the wrong
0:06:25
project
0:06:28
yes
0:06:30
i forgot uh let me pop
0:06:33
i was like wow
0:06:35
you did that much it won't work thank
0:06:38
you tori
0:06:41
oh
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:51
the um
0:06:52
[Music]
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:06
the lambda or
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:25
as in kind of a
0:07:27
common sense dev guest
0:07:31
so i think and correct
0:07:35
me
0:07:36
if i don't have anything right because
0:07:38
you're basically more experiencing
0:07:42
webs
0:07:43
sockets and
0:07:45
the front ends as well
0:07:47
so how it will happen is that when we
0:07:51
create
0:07:52
the
0:07:54
notes and
0:07:55
put them in their directions
0:08:00
then
0:08:01
when we press save
0:08:04
it will actually
0:08:06
take those
0:08:08
coordinates as in x
0:08:10
x and y coordinates
0:08:12
and then
0:08:14
would we
0:08:15
have a kind of uh
0:08:20
another
0:08:22
property in the
0:08:25
notes object as in a single
0:08:28
single note
0:08:29
object to save them save their value
0:08:34
as in
0:08:35
say x is 200
0:08:38
or y is
0:08:41
500
0:08:42
so that would basically go in the date
0:08:45
space
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:01
all right
0:09:03
yeah sounds right
0:09:04
um
0:09:08
yeah so
0:09:09
when you hit save
0:09:11
you save the cards it
0:09:14
sends a patch request or post request
0:09:17
whatever to
0:09:18
dynamodb essentially
0:09:21
yeah and
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:44
yeah they will be
0:09:46
um
0:09:49
let's see here
0:09:53
uh
0:09:54
position
0:09:57
oh there is a start position
0:10:01
draw a new card
0:10:02
start
0:10:04
position any
0:10:07
so
0:10:08
there's uh
0:10:11
no
0:10:12
animate
0:10:14
where is this coming from
0:10:18
draw a new card
0:10:21
oh
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:29
but
0:10:30
whatever what does that do
0:10:32
i think it rotates the card like 360.
0:10:37
oh
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:47
um sticker
0:10:51
i think that's
0:10:53
there's like
0:10:55
this
0:10:56
sticker is the actual then note the
0:10:59
sticky note as in the background note
0:11:03
true
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:17
y
0:11:18
okay yeah let's do that
0:11:23
so
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:31
functionality
0:11:36
so i wrote
0:11:37
oh so
0:11:39
you have
0:11:42
um
0:11:43
let's see down here
0:11:47
i didn't want to
0:11:48
[Music]
0:11:50
whoo this file is big all right what is
0:11:53
it called
0:11:56
or try pose
0:12:00
it's this yeah so you and i think card
0:12:05
card
0:12:06
wrote this function update right
0:12:12
or
0:12:14
patches
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:28
like delete it
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:39
thing
0:12:41
it does
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:50
yeah
0:12:53
okay
0:12:54
okay yeah don't worry about
0:12:57
that
0:12:58
that one we can always um we will be
0:13:01
refactoring
0:13:03
a lot of
0:13:04
code as in
0:13:06
when the mvp is done basically
0:13:11
so
0:13:12
yeah that's the
0:13:13
these are the concerns at the moment
0:13:17
okay
0:13:21
so this let me add some
0:13:23
[Music]
0:13:25
lines
0:13:26
so it's easier
0:13:29
um
0:13:32
so there's a patch there's a post
0:13:36
um
0:13:37
and then
0:13:40
oops
0:13:42
get rid of that line
0:13:44
and then
0:13:50
so this one patches the note using the
0:13:52
patch note
0:13:54
function
0:13:56
that's if
0:13:57
it's
0:13:58
has been inserted
0:14:01
exactly
0:14:02
and then
0:14:03
if it's not inserted
0:14:06
then
0:14:07
you post it because it's a new note
0:14:14
and then
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:25
could be
0:14:27
something i did
0:14:29
but
0:14:30
um
0:14:31
i would just keep that in mind in the
0:14:33
future
0:14:34
so
0:14:35
here
0:14:37
we have okay so what's going into
0:14:40
[Music]
0:14:42
the patch and the post is this data
0:14:46
object
0:14:48
and this data i think that comes from
0:14:51
the notes
0:14:52
which yeah which is
0:14:54
the status structure you made right yeah
0:15:00
so
0:15:04
okay that gets me here okay text for
0:15:06
notes
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:26
yeah
0:15:27
probably a long time ago yeah
0:15:30
um
0:15:31
[Music]
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:15:58
an object
0:16:00
with properties
0:16:03
um
0:16:06
so
0:16:06
data is only the text isn't it
0:16:10
yeah right now
0:16:11
yeah so um
0:16:15
hang on
0:16:16
why
0:16:17
would we want to change the
0:16:20
data to an object
0:16:23
uh so we can have the other
0:16:25
um
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:40
so
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:48
object
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:16:59
requests
0:17:01
yes
0:17:02
absolutely that's right
0:17:07
yeah so
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:16
there's a
0:17:17
note object and that has id data status
0:17:21
code object
0:17:24
uh this is the known object yeah online
0:17:27
five four one
0:17:30
five
0:17:31
sorry i can zoom into
0:17:36
five
0:17:38
four one yeah yeah this no this is a
0:17:40
note object
0:17:41
yes so what i was basically thinking
0:17:45
that
0:17:46
if we can
0:17:47
probably
0:17:48
first
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:07
property
0:18:08
yeah i like i mean from for myself i
0:18:11
would either
0:18:13
change
0:18:14
[Music]
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
at
0:18:20
the card itself and then just like
0:18:24
match it just keep it consistent
0:18:26
but
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:34
then just
0:18:36
updating it into other posts and patch
0:18:39
functions
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:54
changed as well
0:18:59
either way you're going to have to
0:19:00
change the background code anyways of
0:19:02
course okay yeah
0:19:04
that's fine then
0:19:06
yeah
0:19:07
no problem
0:19:08
okay they just stay in that
0:19:12
that way
0:19:14
okay so i gotta find where
0:19:18
this is
0:19:20
getting added
0:19:32
oh
0:19:33
that's interesting
0:19:36
[Music]
0:19:40
and texture
0:19:44
so this function is getting called i i
0:19:47
know what this is because i just worked
0:19:49
on it
0:19:50
um i didn't add this this was already
0:19:52
here
0:19:53
um
0:19:53
[Music]
0:19:55
uh
0:19:55
so
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:01
um
0:20:04
you and kartik put this here
0:20:08
and
0:20:09
this is
0:20:10
this
0:20:12
function is called when the card is
0:20:15
edited
0:20:16
like when you go in a note and start
0:20:18
changing the values
0:20:22
yeah
0:20:25
so
0:20:27
we can
0:20:30
so that's not
0:20:32
gonna work because we need to get all
0:20:35
the cards
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:20:50
we
0:20:54
card content
0:20:58
oh boy
0:21:00
hang on
0:21:01
how about if you go back to
0:21:03
where the positions were and then and
0:21:07
then
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:22
um
0:21:26
i don't read jquery that much um
0:21:30
rotate card color card
0:21:33
index
0:21:35
okay so this is literally just
0:21:39
on card change
0:21:45
okay so this is also
0:21:49
getting called somewhere else
0:21:51
[Music]
0:21:55
so okay this is what i wanted this card
0:21:58
object
0:22:01
so
0:22:02
what we can do
0:22:04
is
0:22:05
all right i know i think i have a plan
0:22:07
so
0:22:09
it's save
0:22:11
um method on the card dot children
0:22:14
editable
0:22:16
is
0:22:18
this method is when you
0:22:20
[Music]
0:22:21
stop typing
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:42
yeah this end
0:22:44
is another method that i looked up in
0:22:47
this jquery editable like docs
0:22:50
and
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:10
um
0:23:11
uh array so i think what i'll do is
0:23:14
reach into
0:23:16
where you guys
0:23:19
added this
0:23:21
and i'm just gonna
0:23:23
rip rip this out
0:23:27
um
0:23:30
do you care or should i leave a comment
0:23:37
just rip it out
0:23:39
repair
0:23:40
yeah
0:23:40
you
0:23:42
okay would be
0:23:44
cracked
0:23:46
anywhere with the top so yeah it doesn't
0:23:48
bother so here
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:02
um
0:24:03
and you click outside the card then it
0:24:05
sends that websocket message
0:24:08
which
0:24:09
you and dinesh probably saw
0:24:13
um
0:24:14
so here we could just
0:24:16
update the card
0:24:18
with um that data from the card
0:24:23
which
0:24:26
i think we can get from the event
0:24:29
object that's passed in
0:24:33
from here
0:24:38
but i'm not that
0:24:41
great with
0:24:42
jquery
0:24:43
um
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:52
card.children
0:24:54
just wondering if that's gonna be an
0:24:56
issue
0:24:58
well let's let's take a look see and so
0:25:03
the children
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:13
looked at it
0:25:15
[Music]
0:25:16
and
0:25:20
oh do i not have a debugger
0:25:35
please work
0:25:48
i thought i set this up
0:25:57
[Music]
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:07
in the
0:26:10
um
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:31
forked version
0:26:35
that's why i need to i need to fix the
0:26:37
github
0:26:39
um
0:26:40
let's go here and then
0:26:42
a board that has some notes is the test
0:26:46
board
0:26:52
hopefully unless they're all deleted
0:26:53
okay so here we have this and here we
0:26:56
have that
0:26:58
if i open the dev tools
0:27:05
i want to go to
0:27:07
that
0:27:10
uh script and i want to find
0:27:13
the
0:27:14
n method
0:27:17
right and i want to see
0:27:20
what
0:27:20
is going on there
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:41
screen is
0:27:43
that's fine
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:02
which is
0:28:03
oh darn it
0:28:05
go back
0:28:06
it is this
0:28:10
card
0:28:12
content
0:28:13
thingy
0:28:15
so let me see if i can
0:28:19
have that
0:28:22
on the screen
0:28:24
oh so yeah it's like the inner section
0:28:26
of the card
0:28:28
yeah so
0:28:29
basically highlighted
0:28:32
uh yeah
0:28:34
so yeah it's like
0:28:36
yeah yeah so what we need to grab i
0:28:39
think is
0:28:42
image card and then
0:28:46
what's the parent
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:28:59
of card id okay
0:29:02
so then that's easy
0:29:05
but then i know what to do so what we
0:29:08
can do
0:29:11
is we do
0:29:14
can we get did we get the id in here
0:29:18
yep
0:29:19
purpose
0:29:21
um
0:29:23
and oh sorry you can't see that
0:29:27
so we can get the position
0:29:32
of the card
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:29:45
is
0:29:46
[Music]
0:29:50
so
0:29:50
if i just
0:29:54
said
0:29:55
um
0:29:56
um
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:22
card
0:30:26
even know what card is oh card is draw a
0:30:29
new card
0:30:31
let me go to oh okay here it is thinking
0:30:35
yeah
0:30:38
so card
0:30:40
so i think then
0:30:43
um there's a
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:00
that's
0:31:01
so we can do
0:31:04
i don't know this is card create
0:31:07
position
0:31:11
hold on let me uh let me look at one
0:31:14
more thing
0:31:16
oh here's this old position
0:31:19
ui position i was i was wondering if
0:31:21
they already had
0:31:24
some
0:31:24
[Music]
0:31:26
direct okay card draggable this is when
0:31:28
you drag the card
0:31:32
so this ui thing
0:31:37
uh
0:31:38
ui
0:31:39
draggable
0:31:42
card drag stop where does this end oh so
0:31:46
that's that's
0:31:48
that's outside of the scope
0:32:02
[Music]
0:32:07
gotta this position drag stop
0:32:12
hmm
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:26
card
0:32:27
oh yeah so this is it so it's left and
0:32:30
top
0:32:32
um
0:32:33
move card
0:32:35
so the position there's like a
0:32:39
where is this coming from
0:32:42
[Music]
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:56
function
0:32:58
the card find drag stop
0:33:01
so then
0:33:03
i guess by that drag stop
0:33:06
that's when you stop dragging
0:33:10
action move card
0:33:13
okay
0:33:15
um which
0:33:17
the data that it gets has those position
0:33:21
coordinates
0:33:22
which are just top and left from the
0:33:27
style
0:33:29
so
0:33:30
we can
0:33:33
just do the same thing
0:33:36
all right um
0:33:38
where was
0:33:39
where was i before i think i was here
0:33:44
okay it's really easy to get
0:33:48
lost 10 years in
0:33:50
trying to track something jumping around
0:33:52
the functions
0:33:55
here yeah yeah especially when it's one
0:33:58
monster file like this
0:34:02
um
0:34:02
[Music]
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:09
here
0:34:10
we want to
0:34:13
uh
0:34:15
we want to
0:34:16
[Music]
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:25
but we can just
0:34:28
um
0:34:28
card
0:34:30
element is the document
0:34:36
where's my autocomplete there it goes
0:34:40
card get
0:34:42
element
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:34:56
we can
0:34:57
get the
0:34:58
top
0:35:01
um which i'm guessing top is why
0:35:06
and
0:35:08
right
0:35:09
yeah so
0:35:10
do you want to call the positions like
0:35:12
the
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:19
and y
0:35:21
probably
0:35:23
put
0:35:28
top and bottom
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:38
is
0:35:39
um card element
0:35:44
dot style
0:35:46
dot
0:35:48
pop
0:35:50
and then const bottom
0:35:53
same thing
0:35:54
[Music]
0:35:59
i did
0:36:00
why did i do that
0:36:17
[Music]
0:36:25
let's add text to array and then here
0:36:29
we can do top and left
0:36:34
right
0:36:35
and then on the board you can just add
0:36:38
top and
0:36:40
[Music]
0:36:41
left
0:36:58
um
0:37:06
um tory if you're talking we can't hear
0:37:09
you
0:37:10
you're everyone's acting
0:37:12
playing up a bit
0:37:20
can you hear me
0:37:21
yeah okay
0:37:23
that's weird um
0:37:25
there's a there is a function zane
0:37:28
called draw
0:37:31
raw
0:37:36
or is it move card
0:37:39
we just looked at that move card
0:37:54
um
0:38:07
[Music]
0:38:09
i'm just trying to think of what's the
0:38:10
easiest way to write the least
0:38:12
code
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:21
yeah yeah true
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:38
so
0:38:41
then we could just
0:38:44
inside our
0:38:48
all right
0:38:50
here i am
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:02
map
0:39:04
um
0:39:10
and so were you looking
0:39:12
for um
0:39:16
so we have
0:39:18
so we could just put this in a position
0:39:21
[Music]
0:39:26
and then
0:39:29
pass in
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:44
put the position
0:39:46
and then the data will just be position
0:39:50
which has top and left
0:39:54
how's that
0:39:57
that's brilliant okay i don't know why i
0:40:00
didn't think of that so
0:40:03
that's
0:40:03
um
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:14
so
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:25
exactly yeah um
0:40:27
[Music]
0:40:29
like it's just something you have to
0:40:31
spend time with
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:47
right
0:40:50
um so the one thing that we don't have
0:40:54
is the card color
0:40:57
right now and i want
0:41:00
to
0:41:01
[Music]
0:41:04
all right well let's let's give this a
0:41:06
whirl and see what breaks huh
0:41:11
yeah i was gonna
0:41:15
let just step by step
0:41:18
and
0:41:19
not too too many changes hopefully it
0:41:21
won't break
0:41:23
it will break because this data is no
0:41:25
longer text and i'm gonna imagine that
0:41:27
this
0:41:29
this
0:41:31
this is
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:45
right
0:41:46
um
0:41:49
so
0:41:50
here the nodes there's this data
0:41:52
property in
0:41:54
okay so i'm back over and still frontend
0:41:57
now we have this data property which
0:41:59
will have
0:42:06
it will have
0:42:07
all this
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:19
um
0:42:22
if
0:42:24
this if it has an id
0:42:26
let me
0:42:27
um
0:42:29
let me just make this an empty string
0:42:31
print out
0:42:33
all right um
0:42:36
and then i think we need to we need to
0:42:38
update it here too
0:42:43
all right so
0:42:45
now
0:42:47
we have a node so each node has this
0:42:49
data property and then it has this
0:42:53
object
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:26
yeah cool
0:43:28
so then you're patching
0:43:30
okay so data
0:43:32
is going and getting sent to patch note
0:43:36
patch now is
0:43:41
note
0:43:42
new node
0:43:45
single
0:43:46
new node so
0:43:48
i think the new node is the data
0:43:51
property
0:43:54
um that's getting set patched and
0:43:57
probably
0:44:00
uh let me go back here
0:44:03
so data
0:44:05
is yeah data is getting sent in as new
0:44:08
note to post note and
0:44:11
to patch
0:44:13
oh like i forgot i can just do this
0:44:17
um
0:44:18
so data
0:44:22
and then
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:36
as well
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:54
well
0:44:55
let's see if it breaking
0:44:58
breaks okay
0:45:02
that's breaking oh
0:45:07
um
0:45:09
let me just remove all my
0:45:13
break points
0:45:15
well what's going on here
0:45:17
oh it's it's resetting okay
0:45:20
[Music]
0:45:21
anything else no
0:45:25
uh i think i can right click this others
0:45:28
remove
0:45:29
all breakpoints cool all right so
0:45:33
let's
0:45:35
um
0:45:37
let's make a new now call this
0:45:40
a new now
0:45:44
um
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:04
oops
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:18
save me
0:46:22
all right save me got
0:46:24
because it's connected to the websocket
0:46:30
now
0:46:31
oh look at that
0:46:32
i am a new no
0:46:36
i'm a new now it got updated all right
0:46:39
so now if i
0:46:41
hit
0:46:43
save
0:46:44
[Music]
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:07
once
0:47:09
so
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:18
then a
0:47:20
and then a post
0:47:22
but all of them there's so there was a
0:47:24
patch
0:47:26
a post and a patch so there were three
0:47:28
cards
0:47:32
three cards and
0:47:36
um
0:47:41
they all failed
0:47:42
what's the
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:47:57
oh um
0:48:03
that's it just a 400
0:48:06
oh so bass so what did 400 mean again
0:48:10
that
0:48:12
is forbidden
0:48:14
or it doesn't exist
0:48:16
um
0:48:18
i think
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:41
if we go
0:48:42
[Music]
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:48:50
github repo
0:49:00
[Music]
0:49:02
it called scrambler api
0:49:06
you know
0:49:08
what about
0:49:10
the back in scrambler hyphen sam hyphen
0:49:13
api
0:49:19
we can look at
0:49:21
the app
0:49:28
[Music]
0:49:32
is it app.js
0:49:34
or default
0:49:36
no um
0:49:37
for which one
0:49:38
the lambda is it
0:49:41
yeah for the
0:49:43
post patch yeah it looks like yes
0:49:46
so
0:49:51
um
0:49:53
we have get board blah blah blah so
0:49:58
um do you know where it would be
0:50:02
or name
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:08
the notes
0:50:10
yeah so you would be
0:50:16
close um
0:50:18
wow
0:50:19
it's been a long time
0:50:21
i've come when you don't yeah you're
0:50:23
like
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:37
okay
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:50:54
specific board
0:50:57
so this says
0:50:59
request
0:51:01
board id and request params
0:51:05
uh where's data
0:51:09
go down down down oh here it is
0:51:13
yeah text for note
0:51:15
single notes
0:51:16
so then
0:51:18
this is yeah it's not of type string so
0:51:21
it's throwing a 400
0:51:23
yeah
0:51:24
which is why
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:41
though
0:51:42
as in through the error code but it
0:51:44
didn't display the error
0:51:46
topic formula
0:51:52
true because it's not being handled on
0:51:54
the client side i think right
0:51:56
um
0:51:57
yeah
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:18
probably in that
0:52:20
what is it the
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:29
status
0:52:30
uh i don't know about the patch
0:52:34
but um
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:43
maybe yeah
0:52:56
um
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:01
on that one and
0:53:03
then changing all the data into um
0:53:10
objects
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:31
to the lambda
0:53:35
i'll try not to block
0:53:40
you uh
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:52
to this note
0:53:55
[Music]
0:53:57
let's
0:53:58
well before we call it a night
0:54:02
why do we need a color photo
0:54:05
um so
0:54:06
that when you load the board the colors
0:54:09
are the same
0:54:10
they're not just
0:54:12
right right right i say
0:54:14
that would make sense i mean if if if it
0:54:16
matters
0:54:17
to
0:54:18
you
0:54:20
um because i
0:54:23
i guess people would
0:54:25
pick the
0:54:28
colors to have some type of meaning
0:54:33
i don't
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:41
so yeah
0:54:42
oh well
0:54:44
when i i hooked it up for the websocket
0:54:46
so
0:54:48
um
0:54:52
when you so
0:54:53
you can see my screen right so yeah
0:54:56
we're saved to save two right so save
0:54:59
two save two
0:55:00
so once
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:14
hooked that up
0:55:17
see that i see
0:55:18
yeah yeah true
0:55:21
yeah
0:55:23
i'm changing colors i'm colorful
0:55:26
i'm changing colors i'm spending
0:55:28
money
0:55:30
yeah
0:55:37
all right
0:55:38
let's probably leave it at that one
0:55:41
because
0:55:42
now we do know where we need to start as
0:55:45
in changing the data object into
0:55:48
and on
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:09
spot
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:21
that that
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:30
because like then
0:56:32
there's no there's almost no point in
0:56:34
having
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:45
exactly exactly
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:10
it's coming
0:57:11
he's coming
0:57:15
he always does this now since two days
0:57:18
anyway um
0:57:21
yeah i wouldn't say about but um
0:57:27
um the
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:45
same place
0:57:48
same time and
0:57:50
a new task
0:57:52
that is the one all right
0:57:55
have a good night guys
0:57:59
[Music]