Debug School 1: Incrementalism

This is part 1 of the Debug School video series where the concept of incrementalism is covered. Incrementalism is a strategy for writing code where you make small incremental changes to a piece of code, while testing the code after each change. Using this strategy helps you become aware of your mistakes earlier and be able to recover faster.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : hi welcome to debug school this time
00:03 : we're going to talk about taking small
00:05 : steps also known as incremental ISM when
00:11 : we write programs we have a tendency to
00:14 : write it from start to finish
00:16 : sort of the same way that we might write
00:18 : an essay or an email but then when you
00:22 : finish typing that's when you actually
00:24 : have to run the code and that's the
00:26 : place where you have the potential to
00:28 : run into trouble you might get an error
00:31 : and then when you try to fix that error
00:33 : you might get another error a different
00:36 : one this time and sometimes it might not
00:38 : be an error per se but it could just be
00:41 : a really weird behavior that you are
00:44 : seeing from your code and that's
00:46 : actually even worse basically you're
00:50 : going to have to go back and track down
00:51 : and fix all the bugs that are created by
00:54 : mistakes you made earlier while you were
00:57 : typing up that essay of a program and
01:00 : this process of doing this can sometimes
01:04 : be time-consuming or worse it can be
01:08 : demoralizing luckily there's a different
01:11 : way of going about it you don't have to
01:13 : write a program in a top-down fashion
01:15 : you can take a much more incremental
01:18 : approach and I'm calling it incremental
01:22 : ISM and the way that incrementalism
01:25 : works is that when you write a program
01:27 : you write it in a series of small steps
01:30 : and after each of those steps you run
01:32 : the program in some meaningful way in
01:34 : order to test that it actually works the
01:37 : way you expect it to work and if it
01:40 : doesn't you're going to fix it before
01:42 : moving on to the next step and then
01:44 : rinse and repeat that is basically
01:48 : incremental ism in a nutshell now let me
01:51 : demonstrate I have the CSV file with
01:54 : some people's names in it and the task
01:56 : that's in front of me is to read in this
01:58 : names and sort the names by first name
02:02 : first and then print each name on the
02:04 : line first name and the last name I'm
02:08 : going to use nodejs
02:09 : to write this program but please don't
02:11 : get hung up on the programming
02:13 : which that I'm using or even my coding
02:16 : style the first thing I need to do is to
02:18 : read in the content of the file and in
02:21 : order to do that I'm going to need to
02:22 : require the file system module even at
02:25 : this point I'm gonna run the program
02:27 : really quick to verify that I have done
02:29 : this correctly I'm going to run it using
02:31 : the node command and when I run it I get
02:34 : no output now if I were to require a
02:37 : module that doesn't exist or if I made a
02:40 : syntax error then I would see an error
02:43 : on the screen when I run it but I didn't
02:46 : and that's good that tells me that so
02:49 : far I'm on the right track now I'm going
02:52 : to get the contents of the file by
02:53 : calling the read file sync method and
02:56 : again I'm going to run this to make sure
02:58 : I did this correctly oops I got an error
03:01 : that probably means I made a mistake
03:03 : somewhere can you tell where the mistake
03:07 : is
03:07 : I feel like Dora the Explorer now first
03:12 : thing let's read the error message so
03:14 : the error message says error e n OE NT
03:18 : no such file or directory
03:21 : P post at CSV so it's trying to tell me
03:25 : that it can't find this file why oh okay
03:29 : I see why my file is actually called
03:32 : people dot CSV not peoples that CSV P
03:36 : posters that's not even proper grammar
03:39 : right so let's fix that and then run it
03:43 : again and now I get no output so that
03:46 : means once again we're on the right
03:48 : track let me clear that term now so I
03:50 : don't have to look at that error again
03:53 : now I want to verify that it's actually
03:55 : reading the contents of the file so to
03:58 : do that I'm going to print out the
04:00 : contents variable using console dot log
04:03 : I'm going to run this and okay that
04:07 : looks a little weird oh okay I see so
04:10 : this is a buffer object which is a
04:13 : buffer of binary data but that doesn't
04:16 : help me because it's difficult to work
04:18 : with binary data what I want is a string
04:21 : which will be much easier to manipulate
04:24 : so I'm going to convert the
04:26 : to a string using the two string method
04:29 : now let's see what happens much better
04:33 : that's exactly the content of the file
04:35 : now I'm going to split this content into
04:38 : lines let me run that and see that there
04:42 : are no errors okay let's print the lines
04:46 : and verify that they're correct
04:51 : okay that looks good this is an array
04:54 : and each element of the array is a line
04:57 : in our file now I want to loop through
05:00 : each line using arrays for each method
05:03 : but I'm not going to put anything in the
05:05 : loop body just yet I'm going to verify
05:10 : it and see that there are no errors now
05:13 : in the loop body I'm just going to print
05:14 : out each line
05:19 : again run that to see that it worked
05:22 : next I'm going to split each line on the
05:24 : comma so that I can separate the last
05:27 : name and the first name
05:30 : let me run that and oops okay so object
05:35 : Smith comma drawn has no method spree
05:39 : okay so evidently I have misspelled
05:42 : split so let me fix that and try again
05:48 : okay now let me print the names to see
05:53 : that the split actually worked
05:57 : okay that looks good we have the last
06:01 : and then first name of each individual
06:04 : inside of a two element array and now I
06:07 : can form each person's full name based
06:12 : on that
06:15 : so phone name is the first name plus a
06:19 : space plus the last name
06:23 : run that and no error now let's try to
06:27 : print out the phone name
06:33 : oops I misspelled full name so let me
06:37 : fix it and try again
06:39 : okay well actually that still doesn't
06:42 : look right because I've simply printed
06:45 : the first name twice and looking at this
06:48 : statement here it looks like I used
06:51 : names subscript one both times which
06:55 : would explain it so I think I simply
06:58 : have to change the second one to names
07:01 : subscript zero let's see if that fixes
07:04 : it good now I wonder sort these names
07:09 : and to do that I'll use the arrays sort
07:12 : method but in order to do that I'm going
07:16 : to need an array that contains all the
07:18 : names so let me make an array let me run
07:23 : that oops I have a syntax error so
07:26 : looking closely at this line I see that
07:29 : I forgot an equal sign there so let me
07:32 : fix that really quick
07:35 : okay now inside the body of the loop I'm
07:39 : going to push each full name into the
07:42 : array and I will verify that okay no
07:46 : errors now I want to make sure that the
07:49 : full names array has actually collected
07:51 : all of the names so I'll print it out to
07:54 : verify that that looks good to me but
07:57 : they're not sorted so now let's actually
08:01 : sort the array and that looks sorted to
08:06 : me alphabetically and the last thing we
08:10 : have to do is just to print the names
08:12 : out one on the line so to do that I'll
08:15 : just use the arrays drawing method in
08:18 : order to insert a new line character in
08:21 : between each of the names and then just
08:24 : print the whole thing out all together
08:26 : so let's see if that worked oh that
08:30 : doesn't look right it looks like all the
08:32 : names are jammed together now oh okay
08:35 : this should be /n not just n so that's
08:40 : how you write a newline character so let
08:42 : me fix that and that's much better now
08:46 : so that looks good
08:48 : we have everyone's name here
08:51 : alphabetized and print it out one on the
08:54 : line so I guess we are done here so you
08:58 : just saw the incremental ISM technique
09:00 : in action and this technique is going to
09:03 : allow you to bounce back from mistakes
09:05 : very quickly and for that reason you are
09:08 : going to have a much more smooth and
09:10 : enjoyable experience while you're
09:12 : programming now why does this technique
09:15 : work so well well if you are taking
09:18 : small steps when you're programming when
09:20 : you make a mistake you are going to find
09:22 : out almost immediately an early bug
09:24 : detection is the key to being able to
09:27 : fix books very easily and experienced
09:29 : developers notice why is this the first
09:33 : reason is used to have the understanding
09:36 : of how the code works fresh in your
09:38 : memory and the second reason is that
09:40 : most of the time the mystic that caused
09:42 : the bug in question lies in the thing
09:45 : that you touched last
09:47 : and so if you take small steps you're
09:49 : going to have a much smaller amount of
09:51 : code to sift through in search of that
09:53 : mistake and I'm going to demonstrate
09:55 : this for you further by going back to
09:58 : the beginning of my coding session and
10:00 : I'm going to color any new and untested
10:03 : code in orange I'm going to color a code
10:06 : that's been tested and it works well and
10:10 : behaves expectedly
10:12 : I'm going to call it those green and I'm
10:15 : going to color any code that's been
10:17 : tested but works unexpectedly I'm going
10:20 : to color those red so we're going to
10:23 : start at the beginning
10:24 : I read the first line and it's orange
10:26 : and then when I run it it turns green
10:30 : then I type the second line which also
10:33 : starts out orange when I run at this
10:36 : time though it turns red because I
10:39 : encountered an error when I revised the
10:42 : second line it goes orange again this
10:45 : time when I run it it goes green now I'm
10:49 : going to let it play out to the end and
10:51 : what I want you to notice is how little
10:53 : orange code I will have on the screen at
10:55 : any one time most of the time will have
10:58 : no more than one line of orange when
11:01 : something goes wrong those orange lines
11:02 : will turn red and I'm not so scared at
11:06 : that point because now I only have to
11:07 : look closely at those few red lines in
11:10 : order to find a mistake
11:18 : in the demo I took the small steps
11:21 : concept to the extreme and I literally
11:23 : changed only one line of code in each
11:25 : step in other words I used a very small
11:28 : step size and you might see that and be
11:31 : wondering if doing this might be a
11:34 : little bit too tedious because you have
11:37 : to write extra print statements only for
11:39 : verification purposes and later on
11:41 : you're gonna throw them away anyway and
11:43 : plus having to test the code after each
11:46 : step also adds up over time that is true
11:49 : the more steps you take the more
11:52 : overhead there is but the justification
11:54 : of this overhead is that getting stuck
11:57 : is a really costly thing because
12:00 : difficult books can take an order of
12:02 : magnitude more time than easy books and
12:05 : if taking a lot of little steps helps
12:08 : you avoid even just one difficult book
12:11 : you could get back all the time loss
12:13 : from that added overhead now you don't
12:16 : have to take smallness to the extreme to
12:19 : the degree that I did in the demo you
12:22 : can experiment on your own and adjust
12:24 : the step size to your liking so here's a
12:27 : simple heuristic that you can use to
12:29 : find your optimal step size if you get
12:32 : stuck on debugging then your step size
12:34 : is too big so when this happens you want
12:38 : to back out to the last known good state
12:41 : the last known good state is the last
12:43 : time that your program ran perfectly
12:46 : where everything behaves just the way
12:48 : you expect it and in our demo that
12:51 : corresponds to whenever the entire
12:54 : program was highlighted green once
12:57 : you've backed out to the last known good
13:00 : state you can just start over and try
13:01 : again using a smaller step size the
13:04 : optimal step size is something that
13:07 : you'll find for yourself and it will
13:09 : change depending on your skill level how
13:12 : familiar with the programming
13:14 : environment how well is your brain
13:16 : working for you that particular day and
13:19 : there are definitely other factors too
13:22 : so try out this technique at first it
13:26 : may seem a little unnatural for some of
13:28 : you in order to get a good feel for it
13:31 : you're gonna need some
13:32 : practice so towards that end I have
13:35 : homework assignments laid out for you
13:38 : please take the time to do this because
13:40 : this is really important to get the
13:43 : material to stick with you I'm going to
13:46 : conclude here for this lesson but I'll
13:48 : come back to this topic of
13:50 : incrementalism in later lessons
13:52 : concerning refactoring working with
13:54 : legacy code and more so I'll see you
13:57 : soon