Posts tagged ‘live coding’

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 21 comments

Georgia Tech’s EarSketch Uses Music To Teach Students Coding

Pleased to see that my colleagues are getting recognition for their cool work.

The White House recognized Georgia Tech last Monday for a coding program that uses music to teach code. It was recognized as part of its national initiatives for Computer Science Education Week.EarSketch is a free online tool that uses music to teach the programming languages of Python and JavaScript.Georgia Tech professors plan to expand the program to more than 250 middle and high schools nationwide next year.

Source: Georgia Tech’s EarSketch Uses Music To Teach Students Coding | WABE 90.1 FM

February 10, 2017 at 7:00 am 2 comments

International Conference on Live Coding (ICLC), 13-15 July, Leeds, Registration open

On my recent trip to Germany, I got to connect to live coding again.  At the Dagstuhl Seminar I attended, I visited with Alan Blackwell who organized the live coding Dagstuhl Seminar I attended and has been doing live coding with Sam Aaron (of SonicPI fame). When I got back to Oldenburg, I visited with Graham Coleman, a Georgia Tech alum who is completing a PhD in computer music and who was an active live coder in Atlanta.  Great to see the first international conference happening soon!

First International Conference on Live Coding

ICSRiM, School of Music, University of Leeds

13th-15th July 2015

http://iclc.livecodenetwork.org/

We are happy to announce that registration for ICLC2015 is now open. Live coding turns programming languages into live interfaces, allowing us to directly manipulate computation via its notation. Live coding has great potential, being used for example to create improvised music and visuals, to allow developers to collaborate in new ways, to better understand computational models by making fundamental changes to them on-the-fly, and to find new ways to learn and teach programming.

Since the beginning of the TOPLAP movement in 2003 (building on an extensive but hidden pre-history), live coding has grown fast, attracting interest from many people in artistic, creative, scientific, educational, business and mixed contexts. After a good number of international events, the time is right to bring these people together for an academic conference, exchanging ideas and techniques, and enjoying dozens of peer reviewed papers and performances. The conference will also open up the field for people new to live coding, so they may develop and contribute their own perspectives on this emerging field. Join us!

Registration is £80 (£50 concessions) for the three day conference

including lunches, evening events, and more.

See the website for details of the developing programme:

http://iclc.livecodenetwork.org/

And register here, completing both the on-line payment and registration forms.

http://iclc.livecodenetwork.org/registration.html

ICLC is organised by the Live Coding Research Network, which is funded by the Arts and Humanities Research Council.

June 15, 2015 at 7:08 am Leave a comment

How to Teach Computer Science with Media Computation

In the Preface to the new 4th ed book, I wrote a bit about what we know about how to teach computer science using Media Computation.  These are probably useful in most CS classes, even without Media Computation:

Over the last 10 years, we have learned some of the approaches that work best for teaching Media Computation.

  • Let the students be creative. The most successful Media Computation classes use open-ended assignments that let the students choose what media they use. For example, a collage assignment might specify the use of particular filters and com- positions, but allow for the student to choose exactly what pictures are used. These assignments often lead to the students putting in a lot more time to get just the look that they wanted, and that extra time can lead to improved learning.
  • Let the students share what they produce. Students can produce some beautiful pictures, sounds, and movies using Media Computation. Those products are more motivating for the students when they get to share them with others. Some schools provide online spaces where students can post and share their products. Other schools have even printed student work and held an art gallery.
  • Code live in front of the class. The best part of the teacher actually typing in code in front of the class is that nobody can code for long in front of an audience and not make a mistake. When the teacher makes a mistake and fixes it, the students see (a) that errors are expected and (b) there is a process for fixing them. Coding live when you are producing images and sounds is fun, and can lead to unexpected results and the opportunity to explore, “How did that happen?”
  • Pair programming leads to better learning and retention. The research results on pair programming are tremendous. Classes that use pair programming have better retention results, and the students learn more.
  • Peer instruction is great. Not only does peer instruction lead to better learning and retention outcomes, but it also gives the teacher better feedback on what the students are learning and what they are struggling with. We strongly encourage the use of peer instruction in computing classes.
  • Worked examples help with learning creativity. Most computer science classes do not provide anywhere near enough worked-out examples for students to learn from. Students like to learn from examples. One of the benefits of Media Computation is that we provide a lot of examples (we’ve never tried to count the number of for and if statements in the book!), and it’s easy to produce more of them. In class, we do an activity where we hand out example programs, then show a particular effect. We ask pairs or groups of students to figure out which program generated that effect. The students talk about code, and study a bunch of examples.

May 13, 2015 at 8:09 am 5 comments

First International Conference on Live Coding in July 2015

First International Conference on Live Coding
13-15th July 2015, University of Leeds, UK
http://iclc.livecodenetwork.org/

With pleasure we announce the initial call for papers and performances for the
first International Conference on Live Coding, hosted by ICSRiM in the School
of Music, University of Leeds, UK.

This conference follows a long line of international events on liveness in
computer programming; the Changing Grammars live audio programming symposium in
Hamburg 2004, the LOSS Livecode festival in Sheffield 2007, the annual Vivo
festivals in Mexico City from 2012, the live.code.festival in Karlsruhe, the
LIVE workshop at ICSE on live programming, and Dagstuhl Seminar 13382 on
Collaboration and Learning through Live Coding in 2013, as well as numerous
workshops, concerts, algoraves and conference special sessions. It also follows
a series of Live Coding Research Network symposia on diverse topics, and the
activities of the TOPLAP community since 2004. We hope that this conference
will act as a confluence for all this work, helping establish live coding as an
interdisciplinary field, exploring liveness in symbolic abstractions, and
understanding the perceptual, creative, productive, philosophical and cultural
consequences.

The proceedings will be published with ISSN, and there will also be an
follow-on opportunity to contribute to a special issue of the Journal on
Performance Arts and Digital Media; details will be announced soon.

Timeline

* Templates available and submissions system open: 8th December 2014
* Performance submissions deadline: 16th February 2015
* Paper submissions deadline: 1st March 2015
* Notification of results: 10th April 2015
* Camera ready deadline: 10th May 2015
* Conference: 13-15th July 2015

Submission categories

* Long papers (6-12 pages)
* Short papers (4-6 pages)
* Poster/demo papers (2-4 pages)
* Performances (1 page abstract and technical rider)

ICLC is an interdisciplinary conference, so a wide range of approaches are
encouraged and we recognise that the appropriate length of a paper may vary
considerably depending on the approach. However, all submissions must propose
an original contribution to Live Coding research, cite relevant previous work,
and apply appropriate research methods.

The following long list of topics, contributed by early career researchers in
the field, are indicative of the breadth of research we wish to include:

* Live coding and the body; tangibility, gesture, embodiment
* Creative collaboration through live code
* Live coding in education, teaching and learning
* Live coding terminology and the cognitive dimensions of notation
* Live language and interface design
* CUIs: Code as live user interface
* Domain specific languages, and the live coding ecosystem
* Programming language experience design: visualising live process and state in
code interfaces
* Virtuosity, flow, aesthetics and phenomenology of live code
* Live coding: composition, improvisation or something else?
* Time in notation, process, and perception
* Live coding of and inside computer games and virtual reality
* Live programming languages as art: esoteric and idiosyncratic systems
* Bugfixing in/as performance
* Individual expression in shared live coding environments
* Live coding across the senses and algorithmic synaesthesia
* Audience research and ethnographies of live coding
* Live coding without computers
* Live coding before Live Coding; historical perspectives on live programming
languages
* Heritage, vintage and nostalgia – bringing the past to life with code
* Live coding in public and in private
* Cultural processes of live programming language design
* General purpose live programming languages and live coding operating systems
* Connecting live coding with ancient arts or crafts practice
* Live coding and the hacker/maker movement: DIY and hacker aesthetics
* Critical reflections; diversity in the live coding community
* The freedom of liveness, and free/open source software

Submissions which work beyond the above are encouraged, but all should have
live coding research or practice at their core. Please contact us if you have
any questions about remit.

Contact

Please email feedback and/or questions to livecodenet@gmail.com

http://iclc.livecodenetwork.org/

January 5, 2015 at 7:54 am 1 comment

Come visit the CS Education Zoo from Steve Wolfman and Will Byrd

Post to SIGCSE-members, re-posted here with Steve’s permission.

TL;DR version: Watch Will&Steve interview interesting CS Ed folks on the CS Ed Zoo at http://webyrd.net/zoo.html.  Most recent episode with Mark Guzdial at https://www.youtube.com/watch?v=z1oTtPECHZI

Full version:

It’s a common lament that CS education is an isolated practice. You teach in your own classroom, a colleague drops by once a year for performance review, and otherwise only your students know what you do.

We know what you’re thinking:

I wish there were a place where CS educators were kept on 24-hour public display (locked securely behind iron bars, of course).

Well, now there is!

Announcing the CS Education Zoo http://webyrd.net/zoo.html, a bi-weekly-very-ish interview series where CS educators (and people with animal-themed last names) Will Byrd and Steve Wolfman interview interesting people involved in CS education (even if they lack animal-themed last names).

So far, we’ve posted six episodes:

+ Mark Guzdial extols the power and potential of live coding (and MUCH more): https://www.youtube.com/watch?v=z1oTtPECHZI

+ David Nolen ponders the impact of a programmer’s first language on their learning (and MUCH more): https://www.youtube.com/watch?v=WxR-AjRZUrQ

+ Becky Bates shares how to craft a large, heterogeneous project course (and MUCH more): https://www.youtube.com/watch?v=8QSOHDo4pVA

+ Jeff Forbes explains why “rapid feedback is better than good feedback” (and MUCH more): https://www.youtube.com/watch?v=mJVoPE7IeaI

+ Rob Simmons discusses the subtleties of teaching formal reasoning about programming in intro courses (and MUCH more): http://www.youtube.com/watch?v=b2xd5Bc_-Os

+ Kim Voll tells us what to tell our students interested in gaming careers (and MUCH more): https://www.youtube.com/watch?v=4JcNHHSPMzE

And in the works: a chat with some of the people behind Hacker School.

P.S. Drop us a line (wolf@cs.ubc.ca or tweet like the cool kids apparently do to @steve_wolfman and @webyrd) if there’s some person, group, or other amorphous-but-audible entity you think we should invite!

November 11, 2014 at 8:51 am Leave a comment

A stunningly beautiful connection between music and computing: Jason Freeman’s “Grow Old”

My eldest child graduated from college this last year, and I’m feeling my first half-century these days.  That may be why I was particularly struck by the themes in Jason Freeman’s beautiful new work.  I recommend visiting and reading the page, and you’ll get why this is so cool, even before you listen to the music.  It’s not live coding — it’s kind of the opposite.  It’s another great example of using music to motivate the learning of computing.

Why can’t my music grow old with me?

Why does a recording sound exactly the same every time I listen to it? That makes sense when recordings are frozen in time on wax cylinders or vinyl or compact discs. But most of the music I listen to these days comes from a cloud-based streaming music service, and those digital 1s and 0s are streamed pretty much the same way every time.

In this world of infinitely malleable, movable bits, why must the music always stay the same? From day to day and year to year, I change. I bring new perspectives and experiences to the music I hear. Can my music change with me?

This streaming EP is my attempt to answer these questions. Once a day, a simple computer program recreates each track. From one day to the next, the changes in each track are usually quite subtle, and you may not even notice a difference. But over longer periods of time — weeks, months, or years — the changes become more substantial. So when you return to this music after a hiatus, then it, like you, will have changed.

via Jason Freeman: Grow Old.

May 26, 2014 at 8:25 am 1 comment

Older Posts


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

Join 6,309 other followers

Feeds

Recent Posts

Blog Stats

  • 1,681,484 hits
September 2019
M T W T F S S
« Aug    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

CS Teaching Tips