Inverse Live Coding: A practice for learning web development

February 4, 2019 at 7:00 am 21 comments

I finished my first semester teaching at the University of Michigan. I taught EECS 493 User Interface Development all on the Web. It was a tough class for me since I had never before this class used JavaScript, jQuery, or CSS. I learned a lot, but I also had to teach it.

As readers of this blog now, I am a fan of live coding (see blog post here) where a teacher writes code live in front of the class. The positive aspects of live coding include that the teacher will likely make mistakes, so students see that (a) mistakes are common and expected, (b) mistakes can be corrected, and (c) there is a process to recover from mistakes.

I could not live code in this class. I didn’t know the material well enough. It took me too long to code, and I couldn’t recover from mistakes in front of the class.

It was also so hard in the context of a Web-based user interface course. I had the advantage that I could watch videos of Mark Ackerman and Walter Lasecki teach the course before me. Both of them know JavaScript and Web technologies well enough that they could live code in front of the class. I couldn’t understand what they were doing. Part of it was the low-resolution of the video — I couldn’t read the screens well. But a bigger part of it was the cognitive load of remembering the HTML and the CSS while writing the jQuery code. I couldn’t figure out the code while also remembering the names of the divs and how they were nested, and what CSS formats were being applied to which divs and classes. Maybe the younger kids fare better than me in my mid-50’s.

So, I tried a different practice. Maybe call it Inverse Live Coding.

  • I wrote programs (HTML, CSS, plus JavaScript with jQuery) before class.
  • I demoed and lectured on those programs (briefly — maybe 10-15 minutes).
  • Critical: I gave the students the code and all the associated files (HTML, CSS, and JavaScript).
  • Then, live in-class, I had students pair up to make small changes to the code.

This is like in-class coding or a lab session, but short — like 8-10 minutes of coding. We can do three of these in a lecture period. It’s more like a Peer Instruction (PI) session than a traditional laboratory coding activity.  I typically put 2-3 of these in a 90 minute class, as part of a lecture. I have students use iClickers to “click in” when they’re successfully done with the change, so we’re using PI practices to make clear what kind of activity this is. That ritual (clicking in then re-joining the class session) helps with bringing people back to the whole-class context after the pair-programming activity.

Here’s an example: I wrote a small JavaScript/HTML/CSS project that had a balloon slowly float upward, and could be steered left or right with arrow keys. (Why yes, that is a Smalltalk balloon in the example.)

I explained the code, introducing ideas like closures and the ready() method in jQuery.

Then I gave them a challenge. In this case, make the balloon also drift to the left, or drift in different directions based on the time or a random variable.

Different kinds of questions: I was pleased by how well this worked. First, it didn’t take much time. 80% of the teams solved at least one of the challenges in less than 8 minutes. Second, the teaching assistants and I got tons of questions. Many of the questions were fundamental ones — things I never would have even thought to talk about in class if I was live-coding. These are (paraphrased) actual questions that I got during the inverse live-coding sessions.

  • “Okay, I made the changes in the JavaScript. Now, how do I compile it?”
  • “I made the changes using the debugger in Chrome. How do I make this work in the CSS, HTML, or JavaScript files?”
  • “So, the jQuery is changing the HTML or the CSS, right? How come my file isn’t changing?”

These were pretty easy questions to handle in class, but one could imagine that those could stymie a student working alone. When I got one of these questions 1:1 or 2:1 during the pair-programming/live-coding, I made sure I answered the question for the whole class, too. These were questions about the fundamental nature of how Web technologies work (e.g., that the interpreter/compiler is the browser itself, and that jQuery says it’s changing CSS/HTML, but it’s really changing the DOM tree, etc.). It was much better to push the students to do the programming, and thus face these questions, than for the teacher to do the programming. The teacher would have an expert blind spot and may not even think to explain those parts that are invisible and confusing.

Miranda Parker suggested a variation of this practice. I could invite students to come up to the front of class to solve the problem, or to explain their solution after the session. That could be helpful in making sure that everyone sees something that works.

I would still use live coding in an intro course, when there aren’t invisible other files involved in the task and increasing cognitive load. In classes like Web Design, I will use inverse live coding more in the future.

Entry filed under: Uncategorized. Tags: , , .

Come to my workshop on CS Education at ASEE June 16! Higher Ed and the Role of a Computing Culture: Interview on No Such Thing Podcast

21 Comments Add your own

  • 1. alfredtwo  |  February 4, 2019 at 10:10 am

    I’ve been using live coding for a while. This year I have been having more and more students come up to do the coding in front of the class. It appears, though I can’t prove it, that students pay more attention to their peers live coding than they do to the instructor. Some of that may be because they are concerned that they may be called next and some of it may be that they are just more interested in their peers than they are in me.

    I feel like this helps me understand what students are and are not understanding about what I am trying to teach.

    Obviously I try to provide encouragement and positive feedback to the student working in front of the class to minimize discomfort.

  • 2. gflint  |  February 7, 2019 at 10:49 am

    “Live coding” And all these years I just thought I was terrible at programming on the fly. I still think I am terrible at programming on the fly but now I will just claim it as live coding. For my Math classes can I call it “live mathing”? I make a lot of mistakes there also that the kids point out. Realistically I do not put much code on the board, I go more the pseudo code route and then some examples from books that are relevant to the problem they are coding. My typing is so slow that the kids fall asleep while I type in code on the computer. I do you the “small changes” route regularly. I give them a block of code that almost does what we want it to do and then modify it. My biggest problem lately is I have a couple of kids that really enjoy Java and programming. They have a tendency to “help” the others in the class a bit too much. I want the class to dig through the resources (textbooks, Google) for the solutions to their coding questions which forces them to learn to read but the two good coders are messing that plan up. I need to put those two in a separate room but they often show the others alternate solutions that are great. So I like them in the room at times. Nuts. No rest for the wicked.

    • 3. gasstationwithoutpumps  |  February 7, 2019 at 11:20 am

      I call it “live-action math”. See my post
      or the full version of the essay at

      • 4. gflint  |  February 7, 2019 at 2:00 pm

        “I can’t do live-action math at 8 in the morning”. I love it. No wonder my 8:00 Stats class is so confused!

        • 5. gasstationwithoutpumps  |  February 7, 2019 at 10:38 pm


          Our faculty have been pressured in recent years to teach at non-prime times (we don’t have enough classroom seats for the number of students we have, even after shrinking class times to squeeze in an extra time slot). I have volunteered to do late classes in order to avoid early morning ones. My class times this quarter are MWF 4–5:05, TTh 1:30–3:05 and TTh 3:20–4:55 (that’s all for one course: MWF lecture and TTh lab sections).

          Last year the lab sections were TTh 5:20–6:55 and TTh 7:10–8:35pm, which made for very long days when someone scheduled a committee meeting early in the morning.

          • 6. Bonnie  |  February 8, 2019 at 8:27 am

            I feel your pain. We run courses from 7am until 11pm at night. We are so squeezed for space that we have to do this. This semester, on Mondays my schedule calls for me to be on campus for 13 hours, because I have a morning class and a night class.

            • 7. gasstationwithoutpumps  |  February 8, 2019 at 3:11 pm

              The overcrowding at public universities makes me not feel much sympathy for the frequent posts on IHE about the shrinking numbers of high-school graduates causing under-enrollment problems in colleges. We could do with a return to a sane enrollment level, so that we no longer need permission from the fire marshall to overenroll classrooms by 10% (under the assumption that not everyone will show up).

  • 8. Bonnie  |  February 8, 2019 at 8:25 am

    I do not care for instructor-driven live coding. When I worked in industry, people leading training sessions would sometimes attempt it, and between the typos, simple mistakes, long silences while the instructor attempted to carefully type complicated sequences, and frequent changes, I would become simultaneously bored and confused. It was hard to keep focused. When I see people do it with students, I always notice there are a few students in the front really paying attention, and the rest are surfing the web on their phones.

    On the other hand, student driven live coding – having them make changes in pairs – works really well for me. I have been doing this for years. In fact, all of our faculty who teach CS1 and CS2 do this. It forces students to engage. There are still problems – often the 8 to 10 minutes stretches into 15 or 20 minutes because students take so long to start focusing. But I think it works far better than having an instructor stand in the front erasing typos while the students doze.

    • 9. gasstationwithoutpumps  |  February 8, 2019 at 3:14 pm

      I have done live coding in lectures occasionally, mainly for gnuplot scripts to show how to do function fitting or show how to get a particular effect. Generally this is in response to a question in class, not a pre-planned lecture. I regard my lecture time as primarily a time to answer questions from students, as their first source of information should be the textbook and most of their learning comes from doing homework and labs.

  • […] Inverse Live Coding: A practice for learning web development 3 by Oatseller | 0 comments on Hacker News. […]

  • […] Inverse Live Coding: A practice for learning web development 3 by Oatseller | 0 comments on Hacker News. […]

  • […] Inverse Live Coding: A practice for learning web development 3 by Oatseller | 0 comments on Hacker News. […]

  • […] Inverse Live Coding: A practice for learning web development 3 by Oatseller | 0 comments on Hacker News. […]

  • […] Inverse Live Coding: A practice for learning web development 3 by Oatseller | 0 comments on Hacker News. […]

  • […] Inverse Live Coding: A practice for learning web development 3 by Oatseller | 0 comments on Hacker News. […]

  • […] Source: […]

  • […] February 4, 2019 at 7:00 am […]

  • […] I finished my first semester teaching at the University of Michigan. I taught EECS 493 User Interface Development all on the WEb. It was a tough class for me since I had never before this class use…Read More […]

  • […] February 4, 2019 at 7:00 am […]

  • […] Inverse Live Coding: A practice for learning web development […]

  • […] Something I heard students ask: If my JavaScript changed the DOM, how come my HTML file didn’t change? […]


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Trackback this post  |  Subscribe to the comments via RSS Feed

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 10,184 other subscribers


Recent Posts

Blog Stats

  • 2,053,614 hits
February 2019

CS Teaching Tips

%d bloggers like this: