July 2018 Programming Class

Conducted by John Spurgeon from 30 July – 3 August 2018 at MiT School.

Contents

  1. Alumni
  2. Retrospective

0. Alumni

  • What is your name?
  • How would you describe yourself?
  • What is your earliest memory? and/or
  • What is your opinion of black licorice jelly beans?

Kaite Jin
  • “Likes to sleep and swims daily.”
  • blecchh (rhymes with TEX)
Leon Liu
  • I do not like those jelly beans.
  • At preschool, the day my toy car went under the administrator’s door and disappeared forever. It was a sad day.
Kai Pan Sun Rajarsh
  • Haven’t tried black licorice jelly beans.
  • N/A
John Spurgeon
  • Yum!
  • Preschool at a white church in Connecticut. Making a plaster mold of my handprint.
Allam Syahriza (pronounced shi-ra-za)
  • Going to Lego Land.
Justin Xia
  • At preschool I ate a hotdog and threw up.
  • BLJB: Not so great.

1. Retrospective

This was a very memorable class, partly because it was the first time I attempted to introduce students of any age to simulated bare-metal programming. And it went very well!

Numbers

We began the week by discussing number bases, codes, and symbols. We paid special attention to binary, decimal, and hexadecimal numbers. For our first technical exercise of the week, I put a few items in the middle of the table: a short stack of a plain white paper, a stack of lined paper, three colored markers, and a pencil; I also drew a circle and a triangle on a sheet of paper. Then I went around the room, asking each of the six students to give me a number, either a one or a zero, which I wrote down on a piece of paper. Finally, I gave the number to the class and challenged them to figure out what the string of ones and zeros were telling them to do. Of course, it was impossible for them to make heads or tails of the instruction (at least the way I intended it to be interpreted) until I started giving them hints and then outright answers. Eventually, the class came to understand that I had just made up a system that could be used to encode a message instructing someone to draw a shape (either a circle or a triangle) some number of times on either lined or unlined paper, using one of the three markers or the pencil. The point of the exercise was to illustrate how computers interpret instructions and data consisting of sequences of so-called ones and zeros based on a set of rather arbitrary rules associated with a particular machine.

TOY

After the paper-and-pencil/marker activity, we starting looking at a working model of a very simple computer called TOY, which I created using JavaScript and which exists on this blog at http://errless.blogspot.com/p/toy.html. This particular computer is explained in detail in chapter 6 of Computer Science, An Interdisciplinary Approach (Addison Wesley, 2017), the textbook that I used last year when I taught AP Computer Science A at Valley Catholic High School. The authors, Robert Sedgewick and Kevin Wayne, are both professors at Princeton University. Bob is one of only a few students who had the opportunity to earn his Ph.D. at Stanford under the guidance of Donald Knuth before Knuth retired early so that he could work full time on trying to finish his epic multi-volume series of books titled The Art of Computer Programming.

Our first TOY exercise was to simply let the kids play around with the machine and try to figure out how it works. Their initial attempts weren’t very fruitful this time around either, of course, because the language that TOY speaks isn’t any more obvious to the uninitiated than the system of instructions that I made up for telling someone what shapes to draw and how to draw them on paper.

One of the highlights of the week for me was hearing Leon enthusiastically announce, after playing around with the user interface for a little while, that TOY’s ADDR value cycles back to #00 when you increment the value #ff by one. It's important for programmers to understand the limited nature of computers and the consequences of exceeding those limits. Leon discovered this fundamental fact all by himself and was so impressed by it that he couldn't contain his excitement! What more can any teacher ever hope for that that?

Next, we talked about the number of letters in the English alphabet (26) and contrasted that with the total number of characters in the Chinese character set — well over 40,000! That conversation, of course, was intended to help us understand why we now use 16 bits (instead of only 7 or 8) to encode the myriad symbols that we take it for granted that computers recognize and can display today. Several times throughout the week we had opportunities to talk about the numbers 256 (and 255) and 65,536 (and 65,535) as well as their base 2 and base 16 equivalents, of course.

The first fun TOY exercise we performed involved running a JavaScript program called Speak, Memory, which told us what numbers we needed to load into a particular memory location in TOY (address #ff) to get TOY to display a particular character or string of characters. This was a nice way to transition from talking about computers at a very low level to working with and thinking about programs written in high-level programming languages.

On Tuesday, we loaded and ran our first real TOY program by following instructions that Sedgewick and Wayne provide in their book. Once we had the data and instructions loaded in memory, our program moved two positive integers into two of TOY’s registers, added the numbers together, and stored the result in a memory location. This little exercise was especially interesting, because it highlighted a bug in the program as it appears in the textbook, which is the result of small but critical typo. Fortunately, I was familiar with the bug, and we were able to quickly identify the root cause of problem and work around it by finding our result in a different memory location than the one we were instructed to look at.

JavaScript

On Wednesday, we left TOY behind and transitioned to basic JavaScript programming. We took some time to read the extensive comments associated with the Speak, Memory program that we were already somewhat familiar with. This provided the opportunity to talk about the importance of writing programs not only for a computer to execute but also, if not more importantly, for people to be able to read and understand. This was my way of introducing the kids to a style of coding that Donald Knuth calls Literate Programming. After writing a simple Hello, World-like JavaScript program, we wrote some similar programs that did almost the same thing, just more often, which got us thinking and talking about things like subroutines, variables, parameters, even loops.

On Thursday, we really stepped up our JavaScript programming by studying a recursive method called pow that computes the value of an integer raised to some integral power. Justin was familiar with and excited about recursion, but for most of the kids this was their first exposure to this rather sophisticated yet also somewhat simple concept.

Friday’s Finale

On Friday, to wrap up the class, we first went back to programming TOY. This time we created, loaded, and executed a program that we designed together on the fly on a whiteboard. The challenge was to load data and instructions into TOY that would allow us to print the same string of characters ("Some Pig") over and over again as many times as we wanted to, thereby reinforcing the basic notion of a reusable piece of software, similar to a subroutine. We talked about how TOY’s ability to store either data or an instruction in any given memory location is the distinguishing characteristic of von Neumann architecture machines.

Finally, we concluded Friday’s class by reviewing the recursive nature of our pow subroutine and implementing another recursive function called bang that computes the factorial of a number.

Literate Programming

Throughout the week, we had the opportunity to talk about and enjoy listening to stories or parts of stories that were in one way or another related to the programming concepts we were discussing. We read Rudyard Kipping’s Just Story story about the first letter of the alphabet. We talked about the Illiad and the Odyssey and read the opening lines of the latter. We read several chapters of the Hitchhiker’s Guide to the Galaxy. And, mainly before class started in the morning, we made it about half way through Charolette’s Web by E. B. White, which made for some fun conversations about writing, The Elements of Style, and even some of Knuth’s particular ideas about Literate Programming, his implementation of which puts the words “weave”, “tangle”, and “WEB” front and center.

Students

Kai, Leon, Katie, Justin, Sun, and Allam were a very delightful bunch, full of smiles, energy, and enthusiasm. Justin and Leon are both rapidly developing serious programming skills and deep knowledge of computer science principles. But even Kai, the youngest of the group, was able to keep up with most of the conversations and exercises; his programs were just a little abbreviated at times compared to those of students with more typing experience. (That said, Kai really impressed me with the Scratch programs that he was excited to be working on, which in some ways went above and beyond the sorts of programs that we studied this week in class.) Katie was especially fond of TOY, which really made me happy, and her familiar sharp wit took me back to the first summer class I taught about a year ago, which she also attended. Sun’s newly discovered taste for black licorice jelly beans provided some welcome company on this side of the bright line that divided he and I from the rest of the class. And I was very impressed by Allam’s attentiveness and maturity, which reflected very positively on him and his upbringing.

Monday

Introduction. Number bases. Binary. Hexadecimal. Codes. Two type of paper. Two shapes. Four writing implements. TOY. Number of addresses. Number of commands. What does TOY do? Load a value. Look at the value. Donald Ervin Knuth. The Art of Computer Programming. Box of candy.

Tuesday

Started reading C.W. Hello world. In Java. In Toy. Speak, Memory. Input/Output. Zucchini bread. First TOY program to add two Numbers. Rediscovered bug in Sedgewick and Wayne's textbook. Don't pollute the global namespace. Use strict. Illiad, Homer's Odessey. The first letter. Kippling.

Wednesday

Add two numbers using TOY. Hitchhiker’s GTTG. Don't pollute the global namespace.

History

This class began immediately after the June 2018 Programming Class ended and picked up where it left off. I don’t mean that that the last day of the June class was June 30th and the first day of the July class was July 1st. I mean that I immediately began prepare for the next class I wanted to teach as soon as the June class ended and that my thoughts about how to prepare for it were directly related to the experience of teaching that class in June.

One of the things that everyone really liked about our class in June was the frog on this blog’s homepage that could change colors and the fly that would buzz around when you tapped it or hovered over it with your mouse. The random motion of the fly is intended to spark interest in the challenging problem of generating pseudo-random numbers. And the way the frog can change color in response to the execution of a command (or the click of a mouse) is supposed to make coders curious about what all is going on when a command or subroutine is executed.

When the June class ended, my original idea was to extend the capabilities of the frog so that students could make it hop up, down, left and right by invoking JavaScript subroutines that could be strung together in various sequences that would help students better understand the notion of an algorithm as well as basic programming constructs like loops, conditionals, variables and so on, similar to how Richard E. Pattis uses a robot that can move up, down, right, or left (and can “pick” or “put” beepers) to introduce coding concepts to readers in his classic little book, Karel the Robot (Wiley, 1981, 1995).

One of the challenges of doing this sort of thing on the web using JavaScript is that JavaScript programs execute synchronously, which is a fancy way of saying that what you’re looking at on a webpage can’t change until after the currently running program, which might be issuing commands like hop("left"); hop("left"); hop("up"); etc., terminates. And what that means is that if you issued several hop commands in a row in one synchronous program, you would never see the individual hops happening, because the webpage wouldn’t be updated until after all of the hop commands had been executed, at which point the frog would appear to leap, in the blink of an eye, from his previous location to a new, final destination. And that, of course, wouldn’t be nearly as interesting as seeing him move in a series of step-wise hops (or hop-wise steps).