What it's Like to Code with a Time Traveling Debugger

In this video I want to allow Huiqi and you the viewers to experience what it's like to code with a time traveling debugger. We do a medium difficulty challenge from leetcode.com called Add Two Numbers: https://leetcode.com/problems/add-two-numbers/. At the end we also go over how to get setup if you want to take the debugger for a spin yourself. You can find that info at https://github.com/airportyh/play-lang.

Transcript

The following transcript was automatically generated by an algorithm.

00:02 : so
00:03 : yeah if you write a very simple program
00:06 : like this
00:07 : uh then you can go ahead and run it
00:11 : so okay run
00:18 : so it runs the program you can see some
00:20 : of the print statements
00:22 : um and then when you debug it
00:25 : what you do is you say debug
00:29 : and then
00:33 : you pass the debug command the history
00:36 : file
00:38 : because because when you run the program
00:40 : that generates a history file
00:44 : so it when you debug you debug based on
00:47 : the history file
00:49 : and um okay and you have this debugger
00:54 : where you can step
00:58 : through the lines uh you can see you can
01:00 : see the variable
01:02 : on the side uh updating you can
01:05 : you can slip step backwards in terms of
01:07 : the key
01:08 : strokes i'm still like thinking about
01:11 : what are the best keystrokes
01:13 : i wanted to use up arrow and down arrow
01:16 : but for some reason in the way that
01:20 : terminal programming works using the
01:22 : terminal emulators i'm not able to
01:24 : get the up and down arrow with
01:28 : the control and alt modifiers like like
01:31 : somehow i can't detect
01:33 : the control and out modifiers if i use
01:36 : up and down arrows so
01:39 : so i resorted to using letter keys so
01:42 : right now i'm using the letter keys
01:44 : i and k because i and k is like up and
01:47 : down
01:49 : uh i i is like at the top row and k
01:52 : is right under the eye in the middle row
01:56 : of the keyboard well this one doesn't
01:58 : have any
01:59 : function calls that you can drill down
02:01 : to
02:03 : but but this is just a very
02:04 : straightforward
02:06 : you know you step through the code
02:09 : let's just do the fibonacci
02:14 : example so if we run this
02:17 : so this is the standard fibonacci
02:20 : example
02:21 : if we run this
02:27 : it runs the program and generated the
02:29 : history file
02:30 : and if you want to debug then you can
02:33 : debug the history file
02:37 : and this this one looks like this if you
02:40 : just step
02:41 : if you just say down which on the
02:44 : keyboard is
02:44 : the letter k then it
02:48 : by default is step over so it steps over
02:51 : that line
02:52 : but if you want to step into the
02:54 : function call then you would
02:56 : hold ctrl and then press down
02:59 : and now you get to step into the
03:01 : function call
03:02 : and and notice notice one big difference
03:05 : between
03:06 : this bigger this debugger and normal
03:09 : debuggers conventional debuggers
03:11 : is that after you step after you
03:15 : went too far you can just go backwards
03:18 : and then go again and and
03:22 : that makes a huge difference in in the
03:24 : user experience actually
03:26 : um so you can keep stepping if you
03:29 : want to step in you can step in but if
03:32 : you don't want to step in
03:33 : you can just step over it and then you
03:35 : can see the results
03:37 : of those two calls it's three and two
03:40 : and then
03:40 : when you get a return statement you step
03:42 : over it you will be able to see what the
03:44 : return value was
03:47 : here how would how would it look like
03:49 : when there are like multiple
03:51 : uh like friends opening okay
03:54 : i'll show you that so if you want to see
03:56 : the multiple frames then you just drill
03:58 : down again right so
04:00 : so i hold down control and then down and
04:03 : then i'm
04:04 : i'm drill down to that call and on the
04:06 : stack frame you can see the state of the
04:08 : stack frame
04:08 : right so now there's two flip frames and
04:12 : in each one
04:13 : right there's uh the parameter that was
04:16 : passed into the function you can see
04:18 : that right away and also the current
04:20 : state of the variables as well
04:22 : and i do that again i do control
04:26 : down and uh again that's the third level
04:30 : now
04:31 : that's nice yeah okay so now at this
04:34 : point
04:34 : of n is equal to three uh this is
04:38 : this probably should be n equals one
04:42 : uh or two but i had it zero and one
04:45 : i guess i'm using zero base indexing
04:47 : that's i guess that's fine too
04:49 : and then at this point i am at two
04:52 : and then now finally i'm at one i'm
04:54 : going gonna return this one here
04:56 : right so at this point when i return
05:00 : uh one it says the return value is one
05:04 : and then it's gonna it's gonna pop this
05:08 : frame at the top here and then we're
05:10 : back to this frame
05:12 : and then at this point uh
05:16 : n is two and we step to the next line
05:19 : and
05:19 : fib one contains the return value of
05:22 : that last call
05:26 : yep so this is how you can see that kind
05:29 : of thing
05:30 : so now let's i wanted to do like um
05:34 : like a programming problem
05:37 : from lead code that is
05:41 : sufficiently complex that will
05:44 : for sure make a mistake somewhere
05:47 : along the way oh so you
05:52 : whether we could use this in like a real
05:54 : debugging
05:55 : situation
05:58 : yeah i'll show you what it's like coding
06:01 : with this
06:02 : because um it is quite a difference from
06:05 : how you normally do it
06:06 : there's one problem that i like at two
06:09 : numbers
06:10 : one with a linked list i've done that
06:12 : one before
06:13 : where it's kind of complex and it's
06:17 : based on linked lists
06:19 : basically you have these numbers that
06:21 : are encoded
06:22 : in linked lists encoded as linked lists
06:26 : and um so and it's in
06:30 : the reverse order each node of the
06:32 : linked list is one digit
06:35 : in the number that you're going to be
06:37 : adding
06:38 : and and it's in reverse order
06:41 : as in this number is actually
06:45 : 342 and this one is actually 465.
06:49 : so so yeah so the linked list of two
06:52 : three
06:52 : two four three is actually representing
06:54 : the number 342.
06:57 : and and then yeah so we what we want
07:01 : the output to be is a linked list
07:04 : of the exact same format well this is
07:08 : actually difficult this might take us a
07:10 : while to do
07:11 : but um let's try it
07:15 : case or say like if we don't have to go
07:18 : to like the next
07:19 : number or whatever i don't know like if
07:22 : you don't have to carry over
07:24 : so the first thing i do with this
07:26 : programming language is always to find
07:28 : the main function and then
07:30 : since this is a linked list uh
07:34 : so i i have been doing this kind of
07:37 : factory function that
07:40 : that takes two values
07:43 : and then it returns a dictionary
07:47 : that represents the structure like that
07:52 : so so very much like javascript at this
07:54 : point
07:55 : so i call list node and it creates a
07:58 : list note for me
07:59 : so if i want two four three
08:03 : then i will probably do something oh by
08:06 : the way i have a
08:08 : we might encounter something where the
08:10 : debugger has a bug
08:12 : because because you know
08:15 : it's it's an active development right
08:18 : now so
08:19 : either sometimes the language has a bug
08:22 : or the debugger has a bug and if that
08:25 : happens
08:27 : we might have to uh come up with a
08:30 : different plan so one of the pro
08:32 : one of the known books of this language
08:35 : right now
08:36 : is it kind of chokes when you have
08:40 : when you have multiple nested function
08:43 : calls within another one
08:45 : it kind of like if you have uh
08:49 : something like that it kind of chokes so
08:52 : i'm gonna
08:52 : try to avoid that for now so that we can
08:54 : back get past this
08:56 : so i'm gonna do it on separate lines
09:04 : uh this is four and it links to 3
09:08 : and now i have a 2
09:12 : and then 2 links to 4.
09:15 : oh no 2 2 is the value and it links to
09:18 : 4.
09:19 : okay so this is the first number
09:22 : so on the list
09:25 : node um on line 11 yeah i'll say
09:29 : num1 is the one that starts with two
09:33 : okay so this is four 423
09:36 : which means 342.
09:39 : that's number one um
09:44 : and let's go ahead with the same thing
09:48 : oh you know what i'm gonna make
09:55 : i'm gonna do it like this
09:58 : so that i can use the same number same
10:02 : number variable name
10:06 : okay so this is num1 let's get num2
10:14 : num2 starts with four
10:19 : six
10:23 : five
10:28 : okay so
10:32 : uh i'll say make num1
10:35 : and make num2 okay
10:44 : okay i'm just gonna run this to see if i
10:47 : made that right
10:49 : sure
10:57 : uh okay so line
11:00 : 17
11:04 : oh i i didn't i messed up
11:08 : i didn't update these lines
11:11 : so what i want is four
11:14 : six and then five four six and then five
11:18 : six links to four and five links to six
11:22 : so that's what i want
11:28 : let's not okay misspelled it oh this
11:31 : is actually a runtime error
11:35 : and um i want to show you one thing is
11:38 : that if if there's a runtime error like
11:40 : this
11:41 : you can actually still debug this
11:44 : okay as long as there's not a syntax
11:46 : error you can actually debug this
11:55 : and and this is actually the location
11:58 : where well oh i see what's going on okay
12:02 : in the future i want to add the the
12:04 : feature to this debugger
12:06 : where whenever there's an exception it
12:09 : will show you the line
12:10 : where the exception happened and and
12:13 : then
12:13 : and and then the debugger will when you
12:16 : open the debugger it'll immediately go
12:18 : to that line
12:19 : if we had that feature that could help
12:21 : us sort of narrow down that problem
12:23 : as well
12:28 : do i have another one that's like that
12:34 : and i just want to verify that the lists
12:37 : are what
12:38 : we expect them to be so i just executed
12:40 : both of them and you can see
12:42 : the structure is like these
12:45 : nested objects and we can inspect them
12:47 : to see if
12:48 : they're right uh they look right to me
12:52 : these okay uh five six
12:55 : four um yeah in reality
12:58 : ling lists are nested structures
13:02 : uh maybe people don't think of them that
13:04 : way because in computer science they
13:06 : draw them like these chains
13:10 : of notes but yeah they can also be
13:13 : thought of as these
13:14 : nested structures okay so now that we
13:18 : have this
13:19 : let's let's make the hat
13:22 : to numbers function um
13:26 : how are we going to do this
13:29 : and yeah let's not worry about the
13:31 : carryover
13:32 : let's do the other part first though
13:35 : like
13:37 : um so if we're gonna do like
13:41 : obviously if we sort of traverse through
13:44 : both of the linked lists
13:46 : at the same time then we're gonna first
13:50 : encounter sort of
13:53 : the uh in the number is actually the
13:57 : rightmost most digit first
14:00 : which makes sense because we want to add
14:03 : starting at the right most digit
14:05 : right exactly um so that makes sense
14:08 : so like the first thing you probably do
14:11 : is
14:12 : you grab the value
14:15 : out like this by the way i don't have
14:17 : that notation
14:19 : in this language for now so you have to
14:22 : do it like this
14:23 : like the subscript notation how do i
14:26 : know the syntax of the language
14:28 : when i'm playing around with it you can
14:31 : you can look at
14:32 : the other examples you can look at the
14:34 : other example if there's a syntax
14:36 : problem
14:36 : what would happen is it'll give you a
14:40 : very sometimes very verbose syntax error
14:44 : like like that and what you do is
14:48 : you scroll all the way up to the top
14:51 : and it'll actually point an arrow
14:54 : at the location where it got confused
14:58 : and it'll tell you uh unexpected
15:00 : something
15:02 : in this case it's unexpected nl which
15:05 : stands for newline
15:06 : an expected new line because
15:11 : uh instead i would i was not expecting
15:14 : to see a new line instead i was
15:15 : expecting to see
15:17 : one of the following either a white
15:19 : space
15:21 : or an open bracket so you can
15:24 : in this case you can use that as a hint
15:26 : oh maybe i needed a bracket here
15:29 : okay so yeah so reading the
15:32 : syntax error message uh will often help
15:37 : so sometimes this output gets extremely
15:40 : long
15:41 : don't get intimidated just scroll to the
15:43 : top and read this error message
15:45 : um so i'm thinking
15:48 : maybe call maybe grab the values out of
15:51 : these
15:52 : notes first we do have to worry about
15:55 : like the null cases right when when do
15:57 : we stop
15:59 : but um i'm thinking like digit
16:03 : one grab the value out of
16:07 : the first one grab the value out the
16:10 : second one
16:12 : uh num num one and num two
16:18 : and add them together result
16:22 : digit sure
16:28 : and then and then we're gonna probably
16:30 : want
16:31 : um let me think are you gonna create a
16:34 : new linked list
16:35 : just to represent the result yeah yeah
16:37 : we need to
16:38 : that that's that might actually be
16:41 : tricky
16:42 : so screen okay let me try to
16:46 : see this so uh
16:52 : two plus five
16:55 : um to get seven and we're gonna
16:59 : we're gonna want to make a seven node
17:03 : and then later on we're going to want
17:06 : this
17:06 : seventh node to point to the next digit
17:10 : later right yep
17:13 : okay and that's actually
17:17 : slightly tricky because first the linked
17:20 : list
17:21 : is is that the problem because we need
17:24 : to do the reverse
17:26 : uh you're using like just just build it
17:28 : because the natural way of building up a
17:31 : linked list is
17:32 : you just
17:35 : you know as as you're building it you
17:37 : point
17:38 : to the note that you already created
17:40 : yeah um
17:42 : so then after you do that you reverse
17:44 : the link list yeah
17:45 : we could we could do that
17:49 : yeah yeah there's a different way to do
17:51 : it but yeah let's just go with that
17:53 : let's let's or let's just have it be
17:56 : reversed first
17:57 : and then we'll worry about what to do
17:59 : with it afterwards
18:01 : um okay so our result digit
18:06 : node is going to be this note of
18:09 : i'll just inline this here
18:14 : okay and then
18:16 : [Music]
18:18 : what are we gonna do we'll need to
18:20 : remember this
18:22 : for the subsequent call right
18:25 : so i think we need to pass it in as a
18:27 : parameter
18:28 : to our function
18:31 : so probably then we're gonna
18:34 : do that
18:45 : like that and this is like the incoming
18:49 : the the results so far we probably
18:52 : want to somehow if there is a result
18:56 : so far we want to mix it with this guy
18:59 : don't we
19:00 : somehow how do we do that
19:04 : so do we need to like return anything
19:06 : here oh yeah we want to return
19:09 : probably whatever this guy returns
19:12 : oh well that would be infinite recursion
19:15 : um but oh but i think
19:18 : so though i think yeah
19:22 : but we we we need to write the code to
19:24 : stop
19:25 : to to to be the terminal case to be
19:29 : oh and i think those are like no checks
19:32 : for these two notes right uh
19:35 : yeah i think probably what we need to do
19:38 : is uh
19:38 : in the line 25 uh when you call list
19:41 : node
19:42 : we have we should have two parameters
19:45 : right
19:46 : so is it like digit one plus digit two
19:48 : and the second parameter will be the
19:50 : add two numbers inside
19:54 : oh you you want to stick this
19:58 : in here yeah yeah well we need two
20:01 : parameters
20:03 : you're right yeah so what should go in
20:06 : here
20:07 : i was thinking it might be this one but
20:10 : you're saying
20:11 : you're saying it's i'm not sure
20:14 : um we could
20:18 : uh let's see that's what the debugger
20:21 : will help us
20:24 : oh yeah so
20:27 : so like if maybe
20:30 : we need to think about hey what is what
20:33 : are we going to say
20:34 : that when add two numbers returns a
20:37 : thing
20:38 : what should that thing represent right
20:41 : yeah exactly
20:42 : well based on the problem the thing
20:45 : should represent
20:46 : the resulting number
20:49 : or the link the linked list that
20:52 : represents the resulting number
20:54 : right and if you are
20:57 : correct then
21:00 : then we're seeing the resulting number
21:04 : from adding the rest of the digit
21:07 : should should be linked to
21:11 : uh this digit
21:14 : um i think that's right
21:17 : yeah let's go with that do we need to in
21:20 : that case
21:21 : do we even need this we may not need the
21:25 : the third parameter in this function
21:28 : let's just see what happens if this
21:30 : happens
21:31 : we have not uh considered the term
21:34 : the terminal case though so let's let's
21:37 : still try running it
21:39 : it's gonna blow up if it's like what you
21:42 : call
21:46 : we didn't call the function yet let's
21:48 : call the function
21:52 : two result
21:55 : okay let's run this
22:00 : can i read property value of gnaw
22:04 : so let's debug
22:10 : okay um
22:14 : so where
22:19 : where did it try to read
22:24 : property value of no oh there's that one
22:28 : that one
22:28 : sort of skipped to the bot to the end
22:31 : because there was an
22:32 : exception so and and you can see from
22:35 : the debugger
22:37 : that uh num1 and m2 are null so you're
22:40 : trying to read the value from
22:41 : a null value read a property from a null
22:44 : value
22:46 : because next is no okay
22:49 : so this this guy this guy is no and that
22:52 : that was the one that was passed
22:54 : in as this num1 so so now now this is
22:57 : not
22:59 : so what should we do about that well
23:02 : that's the terminal right
23:06 : let's check for now we should cover it
23:10 : so if num one is
23:13 : no
23:16 : now there could be a case of well in
23:19 : this case
23:20 : both of them happen to be null what if
23:23 : one of
23:24 : them is no and the other one isn't what
23:27 : do we do
23:28 : oh so they have different digits
23:32 : so like if um and one of them has three
23:36 : digits
23:37 : one the other one has two digits
23:41 : three two
23:44 : [Music]
23:45 : one then
23:50 : let's see yeah you want to just add i
23:53 : think
23:54 : i think the one one and two end up
23:57 : lining up one gets lined up with a three
24:01 : two gets lined up with the two
24:04 : and then one on the second list you have
24:07 : a note but the first
24:08 : list you don't have a note node so the
24:10 : first one is going to be
24:12 : a null here and and the opposite could
24:15 : happen
24:16 : it could be the other list has a null
24:21 : so when one of the staff has a null
24:24 : what will what should we do what should
24:27 : we do
24:28 : under the rules of addition what should
24:31 : we
24:32 : do what do we do
24:35 : we just add the rest of
24:38 : uh right just add the rest of
24:41 : the other digit up which is well there's
24:44 : only one
24:45 : digit so there's nothing to do just use
24:47 : that digit
24:48 : in the result right yeah
24:52 : yeah yep okay
24:55 : digits then we have to uh
24:59 : use well i guess we can just run through
25:01 : other remaining digits
25:04 : like if one number has like three more
25:07 : digits than the other number
25:09 : then we have to go through the remaining
25:11 : digits yeah yes
25:14 : yeah and in each case in each case
25:17 : pair a null with that node
25:21 : yeah you still have to run through all
25:23 : of the digits yeah
25:25 : oh yeah so maybe we
25:28 : go case by case so if
25:31 : num1 and is null and num2
25:35 : is also no else
25:39 : if num1 is no
25:42 : okay then what should we do else
25:46 : if num 2 is no
25:50 : then what should we do else is this case
25:56 : uh okay what about the first case what
25:59 : should we do
26:00 : is both of them are not no
26:05 : return what wait what do you in
26:08 : this case
26:10 : uh it should return an empty list
26:13 : because
26:14 : right okay that's what represents
26:17 : a the end of the
26:20 : list so an empty list is a no
26:25 : okay um so
26:28 : what about if one is no but
26:32 : two is not no what do we do there
26:35 : we go through the ring digit
26:39 : in the number two so we
26:43 : recursively call ourselves
26:47 : okay so we i'm gonna
26:52 : mimic mimic this one
26:56 : so but num1 is no so we're probably just
26:59 : gonna put null here
27:02 : and then num two
27:06 : oh except that uh
27:10 : we want to grab we want we still
27:13 : need to do this stuff
27:16 : oh that's true grab grab the digit out
27:19 : of
27:20 : num2 and then afterwards
27:27 : do that is that right oh
27:31 : that should return that one but here
27:34 : it's just there's no addition needed
27:37 : we're just gonna put digit two here
27:41 : okay i think
27:47 : and then here is just the reverse i
27:50 : think
27:50 : yep
27:57 : well the debugger helps us to see which
28:00 : branch of the if statement we're in
28:03 : yeah yeah okay
28:06 : okay let's see if this works
28:11 : so we're gonna run it
28:19 : [Music]
28:21 : okay so let's see
28:25 : so in the first step uh yeah it's gonna
28:28 : take
28:29 : it for our case it's gonna take the else
28:31 : branch until the very end
28:33 : and then it's it's gonna take okay it's
28:36 : just gonna take this branch
28:38 : it we won't hit the middle two branches
28:41 : for our case um
28:44 : so uh now you can
28:47 : you can sort of search circuit it by
28:50 : just
28:51 : stepping over this and to see what the
28:53 : result was
28:55 : and in this case it said 10
28:58 : and 7. um
29:02 : is that correct uh what would
29:06 : and i guess we're gonna
29:10 : it's it says the result is seven
29:13 : ten and seven is the end result
29:18 : seven ten seven zero and eight
29:21 : oh we we haven't done the carry but
29:23 : other than that i think this is actually
29:26 : correct because three plus four is seven
29:29 : four plus six is ten and two plus five
29:31 : is
29:32 : seven so i think the the result is
29:34 : correct yeah
29:37 : uh and and yeah the result is 7 10
29:40 : and 7. if we had done the carry it would
29:42 : have been correct
29:45 : okay but but we could step through it in
29:48 : more detail
29:50 : to see what actually happened
29:54 : uh so it you can see on the frame
29:57 : we have one the the first frame that
30:00 : calls at two numbers
30:02 : has uh
30:05 : has num1 starting at two
30:08 : num2 starting at five and then the next
30:11 : frame is
30:12 : dealing with four and six
30:15 : and then the the top frame is doing it
30:19 : for three and four so the top frame what
30:22 : is the star
30:24 : oh the star the star is a reference to
30:27 : an object on the heap
30:28 : it's basically what it is i did this
30:30 : feature in a hurry
30:32 : if i were to render the entire object on
30:35 : here
30:36 : it will be very long so like this
30:39 : and i didn't want to put that very long
30:41 : string in in this header here
30:44 : so i just put the reference number to
30:46 : the heap object
30:47 : so but that doesn't tell you all that
30:50 : much
30:52 : but but uh but uh yeah if you want to
30:54 : see the actual value of num1
30:56 : it's actually down here because
31:00 : okay so now that we've gone here
31:05 : it makes one more call with the null
31:07 : values and at this
31:09 : this top stack is now null and we can
31:12 : see we have
31:13 : we have four stacks for
31:16 : these this add two numbers function and
31:20 : at this point we're gonna return null
31:23 : there it is and then this is gonna
31:25 : return back
31:26 : with this result of null here
31:29 : um and then we're gonna make a list note
31:33 : uh here
31:36 : we're gonna make a list now here adding
31:38 : the two digits
31:41 : and oops that's a bug there's a
31:45 : bug in the debugger but uh ignore that
31:48 : when i was scrolling by scrolling
31:51 : left and right uh and then i
31:55 : moved the cursor then then that
31:58 : line get rendered uh out of alignment
32:01 : with the rest of the lines
32:04 : oh okay so so that's a bug in the
32:07 : debugger
32:08 : um so scroll back over there
32:12 : um and wait a question yeah what
32:15 : what's the which that you use to write
32:18 : the debugger
32:19 : like the terminal uh stuff like the ui
32:22 : like this
32:23 : uh yeah so yeah that's actually very
32:26 : interesting um it's the terminal
32:30 : protocol uh it's partly historical
32:34 : and partly standard um
32:37 : goes back to unix where you know
32:40 : you used to be we didn't have graphics
32:43 : programming
32:44 : we have today and people only did
32:46 : terminal
32:47 : text-based programming there's a lot of
32:49 : user interfaces written
32:51 : using text-only terminals
32:54 : and so in order to do anything
32:57 : interesting
32:58 : you needed the ability to tell the
33:01 : terminal hey draw this thing
33:03 : at this cursor location and stuff like
33:06 : that
33:07 : so the terminal actually has the ability
33:10 : to let you do that there's
33:12 : special um escape codes that are almost
33:15 : like
33:16 : you can think of them like tags uh
33:19 : you you put the terminal into this raw
33:22 : mode
33:23 : and then you you tell the terminal hey
33:26 : draw draw this text at this coordinate
33:29 : location of the screen
33:31 : oh interesting is that like so that's a
33:34 : special
33:34 : language it's a language in a sense but
33:37 : it's a protocol
33:38 : that you send special control codes to
33:41 : the terminal
33:42 : this debugger is written using
33:45 : javascript node.js and this is what
33:48 : this is what the control code looks like
33:51 : uh for example
33:52 : this this slash x 1b
33:56 : also known as slash 0 33 uh there
34:00 : they mean the same thing um the
34:04 : most of the terminal control codes start
34:06 : with this
34:07 : control character which if you printed
34:10 : this out
34:10 : it you can't see it um
34:13 : so you that's how colors work as well by
34:17 : the way
34:18 : uh let me show you so if you do
34:20 : console.log
34:22 : hello world then you print hello world
34:26 : but
34:26 : if you put in a control code for a color
34:30 : so node.js has these packages called
34:33 : chalk for example
34:41 : yeah yeah and the boot camp you can use
34:44 : uh
34:44 : there's a colors module or chalk module
34:49 : which will put in these control codes
34:51 : for you without you having to know what
34:53 : they are
34:54 : um so you can you can install chalk
34:57 : require chalk and then chalk that blue
35:00 : and it'll
35:01 : add the control code to make that text
35:04 : blue
35:05 : but but it's actually not that
35:08 : complicated
35:09 : to know what like this is this is the
35:12 : control code for red for example so
35:14 : let's try that
35:16 : it's bracket one semicolon 31m
35:23 : and now that text is red right and then
35:27 : and then i think that
35:28 : persists oh you need to send it back
35:33 : yeah that there's a oh no no it doesn't
35:36 : persist i was expecting it to persist
35:38 : because there's also a reset control
35:40 : code to to make
35:42 : that setting you just put in go away but
35:45 : i don't know maybe with
35:46 : maybe with console.log it somehow resets
35:49 : so
35:49 : this is the colors are the simplest kind
35:52 : of control codes
35:53 : but there's also control codes that are
35:56 : like go to this location
35:58 : on the screen which is this one so like
36:01 : you can say
36:03 : hey i wanna go to
36:07 : go to location say uh
36:10 : how big is this terminal right now like
36:12 : 10
36:13 : 20 30 40 i think
36:16 : 40 is around here maybe so
36:19 : you i'm gonna print it at 41.
36:25 : oh it's actually a semicolon and then
36:28 : i put f here
36:32 : so that that moves the cursor to that
36:34 : coordinate
36:36 : and then and i'm gonna write
36:39 : hello world does that work
36:41 : [Music]
36:43 : no i was expecting that to work oh oh i
36:47 : didn't put it in raw mode that's the
36:49 : problem
36:50 : i need to put the program in raw mode
36:53 : and it will work drop so here
36:56 : i set the standard input to raw mode and
36:59 : then
37:00 : and then all of these other control
37:02 : codes become active
37:04 : um and and and there's also even
37:07 : mouse button tracking that you can
37:09 : actually
37:10 : uh get a mouse event as well
37:14 : um okay and that's which i only learned
37:17 : about
37:18 : like last week which is what allows me
37:20 : to do this kind of scrolling here
37:23 : see i can do scrolling i can do
37:26 : scrolling on the left panel and i can do
37:29 : scrolling on the right panel
37:30 : and i can program that so you write the
37:34 : scrolling functionality pretty much
37:36 : yourself
37:36 : exactly i'm getting the raw mouse event
37:40 : the this in this case is the scroll v
37:43 : scroll wheel event from the mouse
37:46 : and then i'm i'm looking at what what is
37:49 : the
37:50 : position of the pointer right now
37:53 : where the scroll wheel event is coming
37:55 : in and then i map that
37:57 : to figure out whether it's on the left
37:59 : panel on the right panel
38:01 : and therefore i'm going to scroll either
38:02 : the left panel or the right
38:04 : panel up and down so yeah all this ui
38:08 : i wrote all of this in probably the last
38:11 : few weeks
38:12 : and it's pretty fun it was pretty fun
38:14 : learning how to do all of this
38:17 : but yes you can you can you can actually
38:19 : write pretty
38:20 : nice uis i don't know i i like terminals
38:23 : um very cool yeah yeah definitely
38:27 : let's get back to solving this
38:30 : so um at this point so
38:33 : we have so if we step through this line
38:37 : here
38:38 : then we can see the result digit note is
38:42 : seven um okay and
38:46 : and the next is no i think that makes
38:49 : sense
38:50 : like we added three and four together
38:51 : and now we just get a linked list
38:53 : that just has a seven in it and then and
38:56 : then we go
38:57 : to the so we pop that stack so
39:01 : so then the result here is what we saw
39:04 : is this
39:04 : seven list and then
39:08 : uh but we're gonna
39:11 : here we're gonna we're gonna add these
39:14 : two digits together
39:16 : to four and six together to make another
39:18 : list note and then
39:19 : join it to this seven here
39:22 : so the seven
39:27 : this seven from here is gonna go after
39:30 : this four and six
39:33 : this i think that's actually in the
39:35 : right order actually
39:39 : uh okay what is the final order
39:44 : because we because because we added
39:47 : four and three the the rightmost
39:50 : two digits first and then
39:54 : and then after we've done that
39:58 : after we've done that um we got a seven
40:03 : and the seven is the thing that was we
40:06 : want to
40:06 : append to this the result of adding four
40:10 : and six
40:11 : so so we get we get so
40:15 : ten well we're supposed to carry the one
40:17 : over but
40:18 : right now we haven't uh
40:22 : and and we're saying hey a pen this
40:25 : this 10 here this 10 that we're gonna
40:28 : get
40:29 : it's nick's value
40:35 : its next value is this seven
40:39 : right so so this is the correct order
40:42 : in which we're linking together these
40:44 : things
40:46 : and then we're going to end up and then
40:48 : this
40:49 : should be read to interpret the real
40:52 : number it should be read
40:53 : from uh backwards from nowhere
40:58 : we're almost there except for the carry
41:00 : over we have to get the carryover
41:04 : correct
41:06 : in the recursive function you say carry
41:08 : over
41:12 : okay uh just say carry over at a
41:15 : parameter that says carryover
41:17 : okay yeah let's try that so
41:20 : this is if we're not carry over
41:26 : so carry so when we add
41:30 : let me think when we carry
41:33 : over though we actually might need to
41:37 : return a parameter return an extra
41:42 : value to tell whoever called you
41:45 : to carry over because
41:49 : because when we're in here
41:53 : because of the order of things right you
41:55 : you want after you have done this
41:57 : step here we've got ten and seven
42:01 : and then and then it's it's whoever
42:03 : called us when we
42:04 : go back to the previous stack frame
42:08 : we want that code to add one
42:11 : to to their digit so so i think we might
42:15 : instead of adding a input parameter we
42:18 : might need to
42:18 : add an output parameter or out so maybe
42:22 : what we do
42:23 : is um have this return two things
42:26 : instead of one thing and then the the
42:29 : way
42:30 : python has really good feature for doing
42:32 : this uh this language doesn't
42:34 : at the moment so i'm just gonna make it
42:37 : an array that has two things in it
42:41 : let's just say this is the carryover
42:44 : zero means no carryover
42:53 : well then you cannot say number one is
42:55 : no
42:56 : because number one would not be no
42:58 : anymore
42:59 : because you change the structure no we
43:02 : need to change
43:04 : number one is no because
43:07 : the oh the oh okay
43:10 : because we didn't change the data
43:12 : structure that's uh
43:13 : of the argument we just changed the
43:14 : return step okay keep going okay
43:18 : okay so but we do have to
43:21 : change how we handle the result because
43:24 : result is a different thing now
43:27 : and in this case i guess it's
43:30 : okay this is the one where we would have
43:33 : to handle the carry
43:35 : but let's fix the rest of the code first
43:38 : we want to grab
43:39 : the uh zero thing from the result
43:43 : i guess if there is a carry that should
43:46 : be added to digit
43:48 : two and since we're gonna make it a
43:50 : number we're gonna
43:51 : we just always add it how about that
43:57 : like that we're always going to add it
44:00 : and
44:01 : if there's no carry is a zero and that's
44:06 : fine
44:09 : and then here we do the same thing here
44:17 : and here
44:22 : here we have to check for the carry i
44:25 : guess the
44:26 : carry would be we divided by
44:30 : 10 yeah divided by 10
44:35 : you know divided by 10 and
44:38 : we will want to round it down
44:43 : oh do i have this function
44:48 : does the programming language have this
44:50 : function let's see
44:52 : but well we oh but does it have to be
44:55 : that conflict
44:56 : because we're only going to carry one
44:58 : right i mean it's
44:59 : is it possible that we're going to carry
45:01 : like more than one
45:03 : are you using we don't have to do of
45:05 : divided by
45:06 : ten we can just if if it's greater than
45:10 : ten if it's greater than nine or greater
45:14 : or equal to ten
45:15 : yeah i mean we're not gonna carry two
45:19 : so if a result number
45:22 : is greater or equal to ten
45:27 : then carry is one and
45:31 : the result number is
45:34 : result number minus 10.
45:42 : and then okay so so we change the result
45:44 : number
45:45 : now it goes in here all right let's try
45:48 : this
45:53 : get the debugger to help
45:59 : so we're just gonna go over it and see
46:03 : what the result is it's eight zero seven
46:06 : i think that's correct
46:07 : yeah eight zero seven is what it's
46:10 : supposed to
46:12 : be
46:16 : what i like to talk about how i can get
46:19 : the stuff running
46:20 : okay sure this is the open source
46:22 : project
46:23 : play line where uh all of this work is
46:26 : happening right now
46:28 : um so what you do to get started
46:32 : is you clone this repo you click here
46:35 : and you clone it okay and then you
46:38 : go in there and you npm install like you
46:41 : would normally
46:42 : do and then after that
46:45 : oh wait maybe i should write this write
46:48 : it into the readme
46:50 : oh you may need to gen parser actually
46:53 : you i think you need to run this
46:56 : so npm run gen parser run this gen
46:59 : parser script
47:02 : um so so nvm install npm run gen parser
47:06 : and then
47:08 : i believe you can after that you can
47:11 : start using this run script which you
47:14 : would type dot slash
47:15 : run and then the name of one of the
47:20 : examples so you can just try
47:24 : something from the example folder like
47:26 : ex slash fit
47:27 : that play try running that and then if
47:31 : it works then you're ready to go and
47:34 : then you can also
47:36 : you can also start debugging it and when
47:38 : you debug
47:39 : make sure you give the debugger the
47:42 : history file
47:43 : not the code file and if that works then
47:47 : your your
47:47 : your setup there is i will give that a
47:51 : try