Online Apps for Live Code Tutorials/Demos

With Dev8D coming up, here’s a quick round-up/reminder of some tools/techniques for hacking around with code via a browser, or running interactive coding presentations in a browser…

• Advanced Javascript Tutorial – an interactive Javascript tutorial; double click on the code examples to edit them, then run them in the presentation window; (read more about it here: Adv. JavaScript and Processing.js);
• Obsessing – an interactive version of Processing that runs in the browser;
• Hacking with PHP – if you’re looking for ideas about how to present code demos, here’s a good example;
• Codepad – “an online compiler/interpreter, and a simple collaboration tool. Paste your code, and codepad will run it and give you a short URL you can use to share it in chat or email.”
• Yahoo Pipes – online tool for hacking around with RSS feeds, CSV, simple screenscraping;
• Google spreadsheets – 2D programming canvas (honestly!;-)
• Google Code Playground – an interactive playspace for tinkering with Google APIs;
• KML Interactive Sampler – mess around with KML code and see how Google Earth treats it. (NB The Google Earth API is also available in the Google Code Playground… so this sampler may be deprecated?)
• Wonderfl – edit Actionsript and run it live in a browser;
• jsLinux – boot Linux in a Javascript PC emulator
• Codecademy – in-browser, exectuable programming tutorials (with free play support)
• Dabblet – in-browser live previewer for Javascript and css; see also jsFiddle and jsbin
• d3.js live code editor
• CodeBook – JS live code editor
• Khan Academy – live code editor (eg processing) with programme output previewer
• Brackets.io – open source web design editor, maintained by Adobe

And if your presentation includes visits to websites, remember to share the URL via a SplashURL bookmarklet (developed at Dev8D last year; SplashURL screencast.)

PS if you know of any other apps in a similar vein, or links to videos showing really effective ways of presenting code, please add a comment below.

– HTML5 presentation in HTML5

PPS On the notion of live docs/literate programming, see also:
– dexy.it
– Wolfram computable document format (?)

PPPS seems someone is “monetising” interactive coding tutorials… Codecademy

PPPPS sort of related to CDF, the notion of ‘active readers and reactive documents‘ eg as implemented using Tangle Javascript Library

PPPPPS R in the cloud – eg RStudio runs as a cross platform desktop client but can also run as a web service; services such as CloudStat and Jeroen Oom’s hosted ggplot app.