Scott Hanselman

The Joy of Live Coding - CodePen, REPLs, TOPLAP, Alive, and more

February 17, 2016 Comment on this post [29] Posted in Open Source
Sponsored By

A few weeks ago I talked about Interactive Coding with C# and F# REPLs. There's a whole generation that seemingly missed out on LIVE CODING. By that, I mean, writing and running code at the same time.

Lots of folks used C, C++, Delphi, C#, Java, etc over the last 15-20-30 years and had a pretty standard Write, Compile, Walk Away, Run process working for them. Twenty years ago I was often waiting 30 min or more for stuff that takes seconds now. Many of you today may have to wait hours for compilation.

However, there's so many environments available today that can allow us to write code while it runs. Instant satisfaction...and the browser is becoming a fantastic IDE for Live Coding.

When I use the term "Live Coding" though, there's actually a couple of definitions. I'm conflating them on purpose. There's Live Coding as in "coding LIVE while people watch" and there's "coding and watching your program change as you type." Of course, you can do them both, hence my conflating.

Live Coding - Music and Art

Mike Hodnick mentioned Live Coding to me in the context of music and art. Live Coders use a wide array of languages and tech stacks to make music and art, including JavaScript, Ruby, Haskell, Clojure, and a number of DSL's. Here is a YouTube video of Mike - Live Coding music using Tidal, a language for musical improvisation.

Resources

  • Overtone - Collaborative Programmable Music.
  • TOPLAP - An organization dedicated to live coding.
  • Cyril - Live Coding Visuals
  • SuperCollider - Real time audio synthesis
  • Tidal - Live Coding Music

Some prominent live coders:

Live Coding - JavaScript and Experimentation

There's another kind of live coding that makes me happy, and that's things like CodePen. Sometimes you just want to write some HTML, CSS, and/or some JavaScript. No IDEA, no text editor...AND you want it to be running as you type.

Code and Watch. That's it.

Some of you LIVE in CodePen. It's where most of your work and prototyping happens, truly. Others who read this blog may be learning of CodePen's existence this very moment. So don't knock them! ;)

CodePen is lovely

CodePen is a "playground for the front-end side of the web." There have been a number of Live Coding Playgrounds out there, including...

But it's fair to say that CodePen has stayed winning. The community is strong and the inspiration you'll find on CodePen is amazing.

Oh, and just to end this blog post on a high note, ahem, and combine Live Coding of Music with  ahem, here's a Roland 808 (that's a Rhythm Controller) written entirely in CodePen. Ya, so. Ya. And it works. AWESOME. Here's the code you can play with, it's by Gregor Adams.

Magical Roland 808 written in CodePen

There's even Live Coding in Visual Studio now with the "Alive" plugin at https://comealive.io.

What kinds of Live Coding tools or experiences have YOU seen, Dear Reader? Share in the comments!


Sponsor: Thanks to my friends at Redgate for sponsoring the blog this week! Have you got SQL fingers? Try SQL Prompt and you’ll be able to write, refactor, and reformat SQL effortlessly in SSMS and Visual Studio. Find out more with a free trial!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
February 17, 2016 14:25
Talking about "playground for the front-end side of the web", you missed out "jsfiddle.net". It is the simplest/cleanest you could get with UI. Nevertheless, yes making HTML, CSS, and JS come together live is great. I can't imagine how I lived so many years without these "live" tools. I still remember the days of three notepad instances opened up along with a browser (all local), and keep hitting a combination of ctrl-S and F5.
February 17, 2016 14:42
JS Bin is another great 'tool' that I often use whenever I need to write or quickly test JS. And in cases where we interview candidates who are from another city we use that as well as a way to check out their code!
February 17, 2016 14:45
I agree with the previous comment about jsfiddle - and not just for JS but all the fiddle family - see "There's a fiddle for that" website (https://fiddles.io/).

But also - live coding - isn't this what we've been doing for years in the Visual Studio Immediate Window?
February 17, 2016 14:54
Visual Basic, live coding since 2001.
February 17, 2016 15:53
@ Abhitalks & H@RoLD: jsfiddle is one of the oldest and most popular, but it does not give you LIVE output, hence why it is not mentioned I beleive. You have to hit the run button every time, which is quite annoying to be honest.
February 17, 2016 19:12
Thanks for the mention, Scott. One of the best things about modern live coding systems is being able to make changes to a _running_ application (not recompile and re-run) and immediately get feedback about your change. Musical live coding environments, and that type of immediate feedback, are what made electronic music performance tangible to me (rather than just DJ'ing and tweaking completed tracks).

A few other musical live coding environments:
- Sonic Pi http://sonic-pi.net
- Gibber http://gibber.mat.ucsb.edu
- Live Code Lab http://livecodelab.net
- Wavepot http://wavepot.com/

And my favorite visual live coding environment:

- The Force http://shawnlawson.github.io/The_Force
February 17, 2016 19:21
Cloud9 (c9.io) and CodeAnywhere are full-featured online IDEs with built in terminals. They're definitely work a look.
February 17, 2016 19:24
Another live music example...

http://extempore.moso.com.au/
Rob
February 17, 2016 20:31
I felt pretty okay about my JavaScript coding skills and then I saw the Roland 808 demo.
February 17, 2016 22:38
Recently I discovered Tonic, which is a what they call notebooks (dev environments) that are interactive and a fully node environment right in your browser. Looks pretty awesome what they build. https://tonicdev.com/
February 17, 2016 23:15
This is sort of a rabbit trail, but I've had this idea I've wanted to bounce off of smart developers for a while. The idea is a development style or methodology centered around live coding right in front of stakeholders. My thinking is that so much time is wasted in the back-and-forth with stakeholders. Our typical flow- even in agile- separates coding from getting requirements, user stories, change requests, etc. The main reason we do this, ultimately, is because developing is harder and slower than talking. So we talk, take notes, then go translate into Nerd. But what if our tools, script-fu, code gen, mad skills, etc. were _so_ fast that we literally build some large percent of an app or system with the stakeholders in the room (or on a remote session) providing instant feedback?

It sounds nerve-wracking for both developer and stakeholder at first, and I think realistically there will always be some amount of work that is best _not_ to make the stakeholder suffer through. That said, 5 years ago it was absurd to think a developer could spin up a scalable 10-server load balanced web farm in minutes (thanks, Azure). Chunks of time where they are in the same room working together to translate the stakeholders' minds into actual product could really speed things up and cut out some of the heartburn common to projects.

Thoughts? Has anybody done similar? Am I nuts?
February 17, 2016 23:18
I love CodePen!

I've experimented with https://repl.it which has a long list of supported languages. One of them being Forth! (https://repl.it/languages/forth)

I had to try program something (FizzBuzz) in Forth when I learned that Rosetta's lander, Philae, was programmed in Forth (https://en.wikipedia.org/wiki/RTX2010).

http://sqlfiddle.com/ is also cool.
February 18, 2016 1:58
It may be stretching your definition of 'coding' slightly but I wrote a tool (www.textdistil.com) specifically to experiment with a more interactive approach to the kind of batched text processing traditionally done with grep/findstr.

It's interesting that we've gone from a place where almost all operations were performed only in response to a specific user-request to one where we have enough spare CPU cycles that some fairly significant things (spell-checking, syntax-checking, unit-testing) are being run in the background with short feedback cycles. I remember when a 20 minute build time was not unusual - nowadays a couple of minutes is a 'long' build. I look forward to the day that Visual Studio simply updates my target exe as I'm typing without a noticeable build step!
February 18, 2016 4:56
Frank Krueger had this nifty post recently
http://praeclarum.org/post/132881570743/live-coding-with-xamarin-ios
PT
February 18, 2016 8:05
Daniel has a great point about getting stakeholders better connected with developers and speaking less Nerd in the process. I believe we are getting much closer to "developing faster than talking".

Here is a demo I did 3 years ago to show off interactive charting and data exploration with F# and our online IDE we were developing at the time. It starts off by showing a basic REPL that talks F#, then some basic SQL data access and charting in the same REPL. I talk to a lot of customers and bring this video (and a few more advanced ones) with me, and I can never finish describing what's happening in the video without replaying it a few times. And people love that.

I guess the point is that some languages really make you more productive, and F# is definitely one of those languages. And having a "live coding" environment for it that integrates well (hooks into various JavaScript libraries, data sources, etc.) can be a killer combo. For demoing our F#+web work, I use Try WebSharper, a mini online IDE we developed. It makes live coding a breeze with full code assistance, I can use dozens of JavaScript libraries without coding in JavaScript, share my snippets on my blog or on Twitter, and get people interested in using F# and WebSharper together.

Here is a World Tour D3 demo and a live query to the World Bank database, with dozens more on the home page.
February 18, 2016 10:01
I often drop into http://dotnetfiddle.net if I just want to test out some syntax or something.
February 18, 2016 11:42
It's amazing what some people can do with this, using a code editor as a musical instrument. There are entire festivals around live coding music, Algorave for example.
February 18, 2016 12:08
My thinking about live coding and coding in general was heavily shocked when I stumbled upon the work of Bret Victor at http://worrydream.com
"Stop drawing dead fish" as to live art coding, and I think the guys from the Alive plugin had a look at "Learnable Programming".

I found it quite... transformative.

Don't think this topic is complete without at least mentioning it.
February 18, 2016 13:16
I also want to add a name: LinqPad.
February 18, 2016 21:58
What's pretty neat is to connect Linqpad to anapplication using Deleporter.

Deleporter is a project written by Steve Sanderson which lets you serialize delegates and send them (and their required assemblies) over to another application and execute them there.

What this lets you do is interact with your application in real-time from Linqpad, without needing an API. My plan is to use this to interact with a multiplayer game world, but you could use this to trigger functions in a webapp if you prefer, e.g. to create data.

I'm going to miss Remoting whe it's gone :)
February 19, 2016 1:27
Thanks for making me waste half an hour at work playing with the Roland synth app... It's awesome :)
February 20, 2016 8:30
I first saw 'edit running code' with the Supercede Java compiler in 1996. Replacing squares with circles while they're bouncing around.
February 20, 2016 8:36
I really like VS feature for edit-continue while debugging, which qualifies as live coding :) except that it does not work with attaching to processes.

Jupyter project advanced beyond REPL for interactive coding and computations with over 50 languages.

Another useful experiment is live stepping (time machine :) through code using projects such as this, which works with java, javascript, typescript, ruby, c/c++:

http://www.pythontutor.com/visualize.html#mode=display






DTA
February 20, 2016 20:29
Anyone interested enough to read the comments here shouldn't miss Miguel de Icaza's recent blog post: The Evolution of Interactive C#.

Special mention is given to Continuous, a "live coding environment for .NET [...] iOS and Android apps using Xamarin".
Jed
February 20, 2016 21:53
http://glslsandbox.com/ for live coding WebGL fragment shaders. The gallery is worth scrolling through...
February 20, 2016 22:27
thanks
February 22, 2016 13:21
What about JsFiddle (https://jsfiddle.net/) ?
February 25, 2016 8:24
A few more...
Plunker - http://plnkr.co/
Feditor - http://feditor.io/
CSSDeck - http://cssdeck.com/
Dabblet - http://dabblet.com/
Liveweave - http://liveweave.com/
SQLFiddle - http://sqlfiddle.com/
ReactJS Playgrounds - https://react.rocks/tag/Playground
D3 Playground - http://phrogz.net/JS/d3-playground/
rCharts - http://rcharts.io/viewer/live/

Regex
- http://www.regexpal.com/
- http://regexr.com/
- https://regex101.com/
- https://www.debuggex.com/
March 02, 2016 6:52
RE: Alexander Gayko

We definitely looked at Bret Victor, Chris Granger (Light Table) and Sean McDirmid (MSFT Research) as sources of inspiration.

We actually wrote a post you might be interested in regarding Bret's Learnable Programming essay: Working toward Bret Victor's "Learnable Programming.

Cheers,
Josh

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.