5 ms·

Inverse Live Coding: A practice for learning web development

127 points by Oatseller 8y ago

deevolution 8y ago
I really enjoyed this method and feel that I benefitted alot from the peer programing aspect - that part was key.
hairui 8y ago
I had exactly one prof who would live code in class, and I learned the by far the most in his classes. Highly recommend this approach to anyone teaching anything code related.
- fourbits 8y ago
  Yeah that's my experience as well. I went for a B.A. so I was able to take a larger variety of CS courses than the average B.S. student and it still was only my Web Applications professor that did live coding with web2py and Vue.js
- ionforce 8y ago
  Do you attribute your learning the most to the live coding? If so, what was it about it that helped you?
robert_tweed 8y ago
This is a format that I've thought for some time would work exceptionally well in technical interviews: rather than ask a bunch of questions, have a small set of problems that start from a working piece of code in need of work. This removes some of the subjectivity from a completely open-ended coding assignment, as well as reducing the amount of effort required, because you can do a few small problems rather than a single huge one that typically involves working over a weekend. The only downside is it's a lot more effort to set up than either an open assignment or a standard Q&A-based interview. You don't want to throw anyone into real production problems for a variety of reasons. The initial setup has to be understandable within a few minutes of code review.
- meowface 8y ago
  Everything I've ever read or heard about technical interviewing in the past 5 years basically says your idea (and other work sample-type things) is the way to go. And it's kind of obvious when you think about it. Seeing how someone works in practice is almost always going to tell you a lot more about their potential effectiveness as an employee compared to only asking them a bunch of questions or having them solve a puzzle or whiteboard a CS algorithm.
qwerty456127 8y ago
I can only adore live-coders. If somebody watches my screen I get paralyzed.
JamesBarney 8y ago
I really think the inverse model of teaching is a great one. The classic model just seems so turned around. Using class time for live teachers to deliver static content seems insane. And then making sure during the time when students have the most questions(at home doing the work) is also the time when they it's the hardest to ask teacher's questions.
travisjungroth 8y ago
> 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. > 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. Does it bother anyone else that the author was teaching something they weren't proficient in? Is this normal for colleges?
- adamisom 8y ago
  In this case we can probably assume the author is proficient in several other languages, as well as in pedagogy, so nah.
- wizzard 8y ago
  Yes, this bothers me greatly, particularly since in 2018-19 you could throw a pebble in any direction and hit someone who knows JS/jQuery/CSS/HTML. You almost have to go out of your way to find someone who doesn’t. I’m sure this guy is great at other things but students are paying thousands of dollars for this education. I only remember having one prof who clearly didn’t know the material. He spent most of every class just copying code onto the board by hand, then trying to talk about it a bit. I really didn’t learn much in that class. Unfortunately it was the foundational C++ class at my university and really kind of handicapped me in successive classes that were also taught in C++. My alma mater? The University of Michigan.
  - imgabe 8y ago
    > in 2018-19 you could throw a pebble in any direction and hit someone who knows JS/jQuery/CSS/HTML. You could, but they all have jobs doing actual programming. Universities pay sub-poverty wages to adjuncts to teach most of their classes and so this is what they get. It sounds like this person at least cares and is working hard to teach the material.
- lol768 8y ago
  >Does it bother anyone else that the author was teaching something they weren't proficient in? Is this normal for colleges? Yes, it concerns me - but it doesn't really surprise me (my own UG CS experiences have really disillusioned me with regard to how much of a priority teaching quality really is, particularly in research-intensive institutions). It doesn't sound like the author had much say in the situation "I also had to teach it", so unsure if the department is the root problem here. But it's doing a disservice to students - particularly given in the US they'll be paying much, much more than the tuition fees here in the UK (which I think are excessive as it is). It's not good enough. If you're going to offer a class that's more practical, covering real web technologies, do it properly or don't offer it at all. We risk teaching poor practices otherwise and I've seen these lead to real security issues when students enter industry and want to put these skills to use.
jfarmer 8y ago
I've been involved in coding education for about 7 years and this is the approach I've always taken. It works! At https://www.missionbit.com/ https://www.missionbit.com/ I taught a web development class for a while and we'd start with a pre-built but very simple web application. It was a "social wall" that displayed a list of messages and had a textbox that let people create new messages. It used a real database, was ready to deploy on day 0, but did only that one thing (two endpoints, one database table, etc.). Over the class students would add new features (liking, sorting, user authentication, etc.). It works well if the project(s) connect!
markm208 8y ago
I have struggled with the speed at which I can write code live in class. It is hard to do it fast enough to keep students interested. It is also difficult to show even moderately complex programs from start to finish. I have created a tool that allows me to move quickly through my code where students can still see how the solution evolves. I can comment at interesting points in the development of the code and attach hand drawn pics and screenshots. Here are some examples: https://ourcodestories.com/markm208/Playlist/All https://ourcodestories.com/markm208/Playlist/All (Click on the >> button to move from comment to comment. These work best on a big screen) I show some of these in class before asking the students to work on a related problem. I require the students to view the rest outside of class. My students really like these. They prefer them to textbooks (no surprise) and videos covering similar material. The tool to create these 'playbacks' is free and open source (currently a VS Code plugin). I have also created the site to share these with others. I am looking for feedback.
- delinka 8y ago
  What’s the name of this VS Code plugin?
  - detaro 8y ago
    https://markm208.github.io/storyteller/install.html https://markm208.github.io/storyteller/install.html
mcnichol 8y ago
Not meant to be an attack and possibly I am missing something but if I paid to take a course at a university and the person teaching it was only ever a step ahead of me at any time... I'd have never taken the course. This style of teaching (I feel) gives the illusion of confidence that the student is on the right track although its barely more than blind leading the blind. Possibly an unpopular opinion but I have been tricked by folks like this in the working world and academia...I feel it is the source of much of my frustration with CS as a profession.
revskill 8y ago
In college: They give me options for the implementation (theory first, then practice based on that theory). In real world: They give me the goal, let me find the theory. It's the finding the right theory for the implementation a goal is the toughest part here for a graduated.
markguzdial 8y ago
Thanks for all the great comments! It's true that I was just a step ahead of the students. However, I was using course materials designed by people who knew the material, I had veteran TA's (who could answer the questions), and I do have over 30 years of teaching experience. This was an advantage when teaching this class. I could figure out when the lecture slides weren't enough for me to understand, so I added more to them to make them understandable for the students. My expertise is in teaching: Figuring out how to make things learnable by students. In the end, the Web programming part was only a portion of the course -- the rest of it was on design and development process, architecture, and issues like accessibility, all of which I am more familiar with. (For example, because I'm an old Smalltalk programmer, I can explain where MVC came from and strengths/weaknesses better than many.) The course evaluations were very positive. I think the class worked.

127 points by Oatseller 8y ago

I really enjoyed this method and feel that I benefitted alot from the peer programing aspect - that part was key.

I had exactly one prof who would live code in class, and I learned the by far the most in his classes. Highly recommend this approach to anyone teaching anything code related.

fourbits 8y ago
Yeah that's my experience as well. I went for a B.A. so I was able to take a larger variety of CS courses than the average B.S. student and it still was only my Web Applications professor that did live coding with web2py and Vue.js
ionforce 8y ago
Do you attribute your learning the most to the live coding? If so, what was it about it that helped you?

robert_tweed 8y ago

This is a format that I've thought for some time would work exceptionally well in technical interviews: rather than ask a bunch of questions, have a small set of problems that start from a working piece of code in need of work. This removes some of the subjectivity from a completely open-ended coding assignment, as well as reducing the amount of effort required, because you can do a few small problems rather than a single huge one that typically involves working over a weekend. The only downside is it's a lot more effort to set up than either an open assignment or a standard Q&A-based interview. You don't want to throw anyone into real production problems for a variety of reasons. The initial setup has to be understandable within a few minutes of code review.

meowface 8y ago
Everything I've ever read or heard about technical interviewing in the past 5 years basically says your idea (and other work sample-type things) is the way to go. And it's kind of obvious when you think about it. Seeing how someone works in practice is almost always going to tell you a lot more about their potential effectiveness as an employee compared to only asking them a bunch of questions or having them solve a puzzle or whiteboard a CS algorithm.

qwerty456127 8y ago

I can only adore live-coders. If somebody watches my screen I get paralyzed.

JamesBarney 8y ago

I really think the inverse model of teaching is a great one. The classic model just seems so turned around. Using class time for live teachers to deliver static content seems insane. And then making sure during the time when students have the most questions(at home doing the work) is also the time when they it's the hardest to ask teacher's questions.

travisjungroth 8y ago

> 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. > 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. Does it bother anyone else that the author was teaching something they weren't proficient in? Is this normal for colleges?

adamisom 8y ago
In this case we can probably assume the author is proficient in several other languages, as well as in pedagogy, so nah.
wizzard 8y ago
Yes, this bothers me greatly, particularly since in 2018-19 you could throw a pebble in any direction and hit someone who knows JS/jQuery/CSS/HTML. You almost have to go out of your way to find someone who doesn’t. I’m sure this guy is great at other things but students are paying thousands of dollars for this education. I only remember having one prof who clearly didn’t know the material. He spent most of every class just copying code onto the board by hand, then trying to talk about it a bit. I really didn’t learn much in that class. Unfortunately it was the foundational C++ class at my university and really kind of handicapped me in successive classes that were also taught in C++. My alma mater? The University of Michigan.
- imgabe 8y ago
  > in 2018-19 you could throw a pebble in any direction and hit someone who knows JS/jQuery/CSS/HTML. You could, but they all have jobs doing actual programming. Universities pay sub-poverty wages to adjuncts to teach most of their classes and so this is what they get. It sounds like this person at least cares and is working hard to teach the material.
lol768 8y ago
>Does it bother anyone else that the author was teaching something they weren't proficient in? Is this normal for colleges? Yes, it concerns me - but it doesn't really surprise me (my own UG CS experiences have really disillusioned me with regard to how much of a priority teaching quality really is, particularly in research-intensive institutions). It doesn't sound like the author had much say in the situation "I also had to teach it", so unsure if the department is the root problem here. But it's doing a disservice to students - particularly given in the US they'll be paying much, much more than the tuition fees here in the UK (which I think are excessive as it is). It's not good enough. If you're going to offer a class that's more practical, covering real web technologies, do it properly or don't offer it at all. We risk teaching poor practices otherwise and I've seen these lead to real security issues when students enter industry and want to put these skills to use.

jfarmer 8y ago

I've been involved in coding education for about 7 years and this is the approach I've always taken. It works! At https://www.missionbit.com/ https://www.missionbit.com/ I taught a web development class for a while and we'd start with a pre-built but very simple web application. It was a "social wall" that displayed a list of messages and had a textbox that let people create new messages. It used a real database, was ready to deploy on day 0, but did only that one thing (two endpoints, one database table, etc.). Over the class students would add new features (liking, sorting, user authentication, etc.). It works well if the project(s) connect!

markm208 8y ago

I have struggled with the speed at which I can write code live in class. It is hard to do it fast enough to keep students interested. It is also difficult to show even moderately complex programs from start to finish. I have created a tool that allows me to move quickly through my code where students can still see how the solution evolves. I can comment at interesting points in the development of the code and attach hand drawn pics and screenshots. Here are some examples: https://ourcodestories.com/markm208/Playlist/All https://ourcodestories.com/markm208/Playlist/All (Click on the >> button to move from comment to comment. These work best on a big screen) I show some of these in class before asking the students to work on a related problem. I require the students to view the rest outside of class. My students really like these. They prefer them to textbooks (no surprise) and videos covering similar material. The tool to create these 'playbacks' is free and open source (currently a VS Code plugin). I have also created the site to share these with others. I am looking for feedback.

delinka 8y ago
What’s the name of this VS Code plugin?
- detaro 8y ago
  https://markm208.github.io/storyteller/install.html https://markm208.github.io/storyteller/install.html

mcnichol 8y ago

Not meant to be an attack and possibly I am missing something but if I paid to take a course at a university and the person teaching it was only ever a step ahead of me at any time... I'd have never taken the course. This style of teaching (I feel) gives the illusion of confidence that the student is on the right track although its barely more than blind leading the blind. Possibly an unpopular opinion but I have been tricked by folks like this in the working world and academia...I feel it is the source of much of my frustration with CS as a profession.

revskill 8y ago

In college: They give me options for the implementation (theory first, then practice based on that theory). In real world: They give me the goal, let me find the theory. It's the finding the right theory for the implementation a goal is the toughest part here for a graduated.

markguzdial 8y ago

Thanks for all the great comments! It's true that I was just a step ahead of the students. However, I was using course materials designed by people who knew the material, I had veteran TA's (who could answer the questions), and I do have over 30 years of teaching experience. This was an advantage when teaching this class. I could figure out when the lecture slides weren't enough for me to understand, so I added more to them to make them understandable for the students. My expertise is in teaching: Figuring out how to make things learnable by students. In the end, the Web programming part was only a portion of the course -- the rest of it was on design and development process, architecture, and issues like accessibility, all of which I am more familiar with. (For example, because I'm an old Smalltalk programmer, I can explain where MVC came from and strengths/weaknesses better than many.) The course evaluations were very positive. I think the class worked.