Posts tagged ‘JavaScript’

Inverse Live Coding: A practice for learning web development

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.

February 4, 2019 at 7:00 am 20 comments

Computer science education is far bigger than maker education: A post in lieu of a talk #InfyXRoads

I was scheduled to speak this Thursday in the final plenary panel of the Infosys Foundations USA CrossRoads 2018 conference (see program here). My father passed away on May 10, and we just had the funeral Friday May 18, so I apologized and cancelled the trip. I had already thought about what I wanted to say, so here’s a blog post in lieu of a panel presentation.

The session is “Why Teach CS? Why Teach Making?” with Yasmin Kafai, Quincy Brown, and Colleen Lewis. The session was inspired in part by my blog post listing the reasons for teaching programming, and was framed in our preliminary discussions as a debate. Is there a difference between CS education and Maker education? Yasmin was tasked with making the argument that they are pretty much the same. I disagree with that position. Colleen was moderating, and Quincy was still keeping her cards close to her chest — I don’t know what position she’s going to take Thursday.

If our goal is to teach the basics of programming, sure, maker education (where we teach students to make physical devices with embedded computation, such as e-textiles, robotics, or Lego Mindstorms devices) and the kind of computing education that I see reflected in the K-12 CS Framework is pretty much the same. There’s some CS education in there. Students learn the basics of sequential execution, conditionals, and looping. But that’s not the same as computer science education.

If our goal is to change students attitudes towards technology, then sure, maker education may be even more effective than computing education for getting students to see the technology in their world. By making their own technology, students may increase their self-efficacy, and help them to feel that they can and should have control over the technology in their lives. But again, that’s not the same as teaching students computer science.

The big ideas of computer science are much bigger than maker education. Here are three examples.

The questions that Alan Turing was trying to answer when he invented the Turing Machine were “What is computable? What are the limits of mathematics? What is not computable? Is even human intelligence computable?” These are as meta as you can get. This is the heart of computer science, as the science of abstraction. These aren’t ideas students currently explore in maker education. Maybe they could, but certainly don’t require a maker context.

One of the most powerful ideas associated with Turing Machines is that any computer can simulate any other computer, including being many other computers with many processes. That’s the big idea that Alan Perlis was talking about in 1961 when he talked about computer science as the study of process. That’s one of the big ideas behind object-oriented programming as Alan Kay defined it.  We don’t explore simulation in maker education, and it’s hard to imagine how we might.

 

Ada Lovelace was the world’s first computer programmer. More than that, she was the first to realize that computers were about programming anything. Quoting from her Wikipedia page:

Ada saw something that Babbage in some sense failed to see. In Babbage’s world his engines were bound by number…What Lovelace saw—what Ada Byron saw—was that number could represent entities other than quantity. So once you had a machine for manipulating numbers, if those numbers represented other things, letters, musical notes, then the machine could manipulate symbols of which number was one instance, according to rules. It is this fundamental transition from a machine which is a number cruncher to a machine for manipulating symbols according to rules that is the fundamental transition from calculation to computation—to general-purpose computation—and looking back from the present high ground of modern computing, if we are looking and sifting history for that transition, then that transition was made explicitly by Ada in that 1843 paper.

Maker education isn’t about general computation. It’s about computing associated with sensors and actuators. Computer science education is about computing everything, from numbers to letters to musical notes. Having to connect the computation to a device made by the student limits the space of what you might compute. Computer science is about representation and abstractions on representations. Everything can be defined in terms of bits. That’s a big idea.  You can probably teach that concept in maker education, but it can be taught (and more easily) without tying it to maker education.

Most of us know Grace Hopper’s name today, but probably more for her iconic status and as the namesake for the Grace Hopper Conference than for what she actually did. Admiral Grace Hopper led the effort to create compiled programming languages, including (eventually) COBOL. There are so many big ideas in here, but let’s just take two.

  • Automatic programming means that you have a program specified in one language (like COBOL or Java or Scratch) and you use that as input to a program that generates another language written in another language (used to be machine language, but JavaScript is probably more common today). A compiler is a program that inputs a program and generates another a program. That is a powerful, meta idea that students do not typically see in maker education. Could we teach about compilers in maker education?  Maybe, but “making” is certainly not the easiest and most obvious way to talk about compilers — it’s another way computing education is bigger than maker education.
  • COBOL was about making programming accessible by using words and concepts familiar to the end users. (It was also about designing a compiled language that would work on any underlying computer, which connects back to Turing’s machine.) Designing for others who are not you and have different expertise than you is one of the most fundamental ideas of human-computer interface design today. Do we get to that in maker education? That big idea occurs more often in non-maker contexts, e.g., making apps for others and using user-centered design to get there.

Bottomline: CS education is so much bigger than maker education. You can explore a lot of computer science using student-made devices as a context. Ben Shapiro has shown that he can have kids playing with powerful modern-day computing ideas from networking to machine learning, all using student-made devices. That’s serious CS education. But it’s not all of CS education, and you can do CS education apart from student-made devices. Maker and CS education are not one-to-one.

There is an equity component here. We often talk about Ada Lovelace and Grace Hopper when we talk about the women who were part of the creation of computer science. We do them a disservice if we only remember them as early members of a category “women in computing.” It’s important to recognize what they actually did, what they contributed to computer science — and we should teach that. What Lovelace and Hopper did mattered, and we demonstrate that it mattered by teaching it and explaining why it’s important.  Ideas like data representation and compilers are not today taught in maker education, are not easily taught in maker education, and can certainly be taught without maker education.

The big ideas that Turing, Lovelace, and Hopper created and explored are not new. This shouldn’t be the realm of advanced CS any more.  An important goal of computer science education should be to teach these foundational ideas of computer science.  I don’t think we know how to get there yet, but that should be our goal. We should be teaching the computer science developed by the people we hold up as heroes, leaders, and role models.

We can teach a lot with maker education, but let’s make sure that we don’t miss out on what CS education is about. Maker education is a great idea. It’s a terrific context for learning some of CS. If we only focus on the intersection of maker and CS education, we might miss the other, far bigger ideas that are in computer science.

May 21, 2018 at 7:00 am 19 comments

Stanford is NOT switching from Java to JavaScript: I was mistaken

Last April, I wrote a blog post saying that Stanford was abandoning Java for JavaScript in their intro course (see post here).  The post was initiated by an article in the Stanford Daily. The post caused quite an uproar, way more than I expected. More than one Stanford faculty member reached out to me about it.  In particular, Marty Stepp told me that I was definitely wrong, that Stanford would mostly be teaching Java in a year. I promised that if I was wrong a year later, I would write another post correcting my first post.

It’s been a year, and I was wrong. Stanford is NOT abandoning Java for JavaScript.

I’m glad I was wrong, but it has nothing to do with Java or JavaScript.

I heard about the possible switch to JavaScript several months before from a Stanford faculty member.  When I saw the Stanford Daily article, I thought it was okay to talk about it. Marty told me at the time that I was wrong, and that the article was ill informed.  Still another Stanford faculty member wrote me about the tensions over this issue.

A lesson I learned from Mike Lach and others involved in the NGSS roll out is that all curricular decisions are political decisions.  A framework might be based on scientific expertise, but what is actually taught is about choice and vision — different opinions of how we interpret where we are now and what we want in the future.  If you haven’t heard about the politics of curricular choices before, I highly recommend Schoolhouse Politics.

I am not at Stanford, so I don’t know how curricular decisions have been made and were made here. I based my post on talking with some Stanford faculty and reading the Stanford Daily article.  I predicted that the forces pushing for JavaScript would end up changing the curriculum. They didn’t (or haven’t so far).  The Stanford lecturers are excellent, and they are the ones actually teaching those classes. I’m glad that they get to continue teaching the classes the way that they think is most valuable.

Below is what Marty wrote me about the courses at Stanford, and a link to the Stanford course offerings, showing that Stanford is still primarily a Java house:

This calendar year our CS1 Java course is still quite clearly the dominant course. Nick Parlante is also teaching two smaller experimental offerings of a Python class in our winter and spring quarters. There may be another experimental JavaScript and/or Python course on the books for fall, but it certainly will not be the main class; the CS1 in Java will continue to be so throughout all of the next academic year. Currently no plan is under way to change that, though we certainly are open to evolving our courses in the long term like any other school would be. I would like to note that the state of intro at Stanford is exactly as was described to you by myself and others 10 months ago.

http://explorecourses.stanford.edu/search?q=cs%20106a&view=catalog&academicYear&catalog&page=2&filter-coursestatus-Active=on&collapse

February 19, 2018 at 7:00 am 3 comments


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

Join 6,297 other followers

Feeds

Recent Posts

Blog Stats

  • 1,672,121 hits
August 2019
M T W T F S S
« Jul    
 1234
567891011
12131415161718
19202122232425
262728293031  

CS Teaching Tips