For the interested: Jan Paul Posma has done some really awesome stuff with similar inspirations at jsdares (http://www.jsdares.com/) — try dragging around some of the variables in the brick game.
If you're targeting a younger audience flowlab (http://www.flowlab.io/) is a great starter. Compared to Rocky's Boots and Robot Odyssey of my youth, there are so many great tools available to get today's kids into programming.
You'll have to do some more memoization to make the performance reasonable; recomputing and redrawing everything on each change isn't very scalable. I'm working on a programming model for this:
However, when you change something inside the loop, its likely that everything will have to be re-executed. The only way around this is to break up the loop somehow. Or perhaps see Umut's work on self-adjusting computation:
Where he pretends to be in a late 70's conference, discussing how the current ideas about Smalltalk, GUI environments, parallel programming and so forth, can be used and how the computing world might look like in 30 years time (meaning nowadays).
Yeah that was a very good one. I saw that a few days after it came out and he makes some very good points in that talk. I would love to be able to chat with him 1 on 1 and just ask him questions because he seems like he's thinking about problems in very new and exciting ways.
I love this. Sure it might be good for learning, but I really would like something like this for eg IPython. Something that allows me quickly to tweak some parameters until whatever I'm doing looks right. I'm really exited about the possibilities of python-javascript integration coming up in ipython 2.
Another project that this kinda reminds me of is LightTable. I haven't followed how it's shaping up, but the initial concept demo had some similar live editing stuff iirc.
There's no real-time execution, but it does show a (more or less) word-to-word relationship between Javascript and English, which is an alternative (and complementary) way to "explain" code to someone learning Javascript.
Note that my English "translation" is totally hand-crafted. From the description, Choc allows hand-crafted translations of individual library functions, but applying those translations to a program still gives you a mostly automatic translation which is not as easy to understand as a hand-crafted translation would be.
You know....I have wanted to build a Ruby tool like this, but just for iterators. I was going to call it 'eye-terator', because you can see within the iterator.
The idea being that you can step through the iteration (say an each, for, or any other iterator in Ruby) and see the state of all variables/objects at each step in the iteration - and then also allow it to handle nested loops, blocks, etc.
I was thinking a simple site like the Ruby Regex Tool[1] would work wonders.
I just haven't had the time to do something like that - I need to beef up my JS to execute that as elegantly as I would like. But I suspect that would be a very useful tool for Ruby devs.
REPL's aren't really interactive programming. In Bret Victor's demo, he makes a infinite loop and as he is typing, the mistake is immediately clear.
Pry is awesome though, it's just not really close to the things that Bret talks about. In fact, I think in one talk he specifically speaks against REPL's being interactive.
Really very cool. I can't wait to see how these interactive tutor things evolve. Programming is such an abstract thing for many people, something interactive like this is really powerful.
One suggestion: please add some form of code intelligence, so that when I type "pad." a popup appears with all the public pad methods and their descriptors. That would encourage playing around even more imo.
Agreed - this version uses CodeMirror as the editor, but the core of Choc is editor agnostic. Choc isn't really "enabled" when you're editing code, so any plugins that provide browser autocompletion would work. (CodeMirror or otherwise)
I agree. As a parent of a kid interested in programming and math, I would only suggest replacing "for kids" with "for beginning learners." From what I've seen, kids over 7 and grown-ups are pretty much on even footing as beginning programmers. Additionally, "for kids" has a trivializing ring to it, like they're not full humans; my daughter does not like anything with a "for kids" label on it. (If only "Python for Kids" were not called that!)
I totally agree. In fact, I might even go further to say that this is really for anyone to think new thoughts regardless of age. Here's what I mean:
I've been programming for over a decade and the first time I read the code for the bouncing ball example I had basically no idea what it meant. I could sort of tell that there was something drawing circles but that was about it.
By dragging the constants around and seeing every frame change (across time, not just a single frame) you're able to get an intuition about what each line of code is doing.
I'm not a child nor a beginning programmer and using this tool was super useful for me to gain insight on how it works.
The original Learnable Programming article is a response to the work that we did in building the Khan Academy Computer Science platform - which is exactly that. An educational real-time environment for writing and manipulating code: https://www.khanacademy.org/cs
I love Khan Academy and the CS platform in particular. I think it would be amazing if it was possible to put Choc, or a tool like it, on some of the KA lessons. Being able to step through time (or view all of time in the case of animation) and inspect values are both really useful features for helping folks learn to think procedurally. I find that learning to think procedurally is often harder than learning the syntax.
This appears to be working demos of the ideas that Bret Victor brought up when he initially criticized Khan Academy's CSE program -- the ones mentioned at http://worrydream.com/LearnableProgramming/.
I feel like the OP is missing the forest for the trees; the key takeaways from Bret Victor's lamenting seemed to indicate to me that we need Yet Another Programming Language, but one that non-programmers can actually use for "real programming" in conjunction with a "real IDE" (as opposed to one where you just "learn programming" but don't use for "real work").
I'm a teacher and my next term starts in one month. I'm retooling all my lesson plans right now to use this. Thank you so much, I'll be following this project closely.
I work on various open-source learnable programming projects and would like to make myself available to provide support for your lesson plans involving choc. aaron [at] kumavis.me
@idProQuo - Aaron (nullz) is awesome and I'll definitely help you both get this running. I'd love to get some feedback on how to make it more usable. Maybe we could fork http://cljsfiddle.net/ and make chocfiddle?
I'm currently having my mind blown by Bret Victor's "Learnable Programming", but after that I'll send you guys the details of how my class has been working so far.
Also, I started learning Clojure and Clojurescript about a month ago, but I'd love to try my hand at building something nontrivial with them.
Last year (and presumably this year, if the government gets funded) DARPA / US Dept. of Ed. had a Small Business Innovation Research grant solicitation out for the R/R&D of a hybrid videogame/graphic novel to support CS education. Seems like something you might be interested in. http://ies.ed.gov/sbir/2014solicitations.asp
you're seeing the tree and missing the forest -- this isnt about the examples its about the technology they feature. write a LOGO turtle example, then you can scrub its instructions, and execution
I'm not sure I follow. With Logo, I can see what the turtle/pen does at each moment of execution. That was the point, right? (Now, this has the cool slider idea... but really I'm not sure that helps understand any better than just having a reset and stepping each line again.)
Would it be cool to have this "at large" for a full stack of software. Possibly, but I'm not completely convinced yet.
Edit: Seeing how you can "slide" numbers is also kind of neat, but again, I'm not sure it really helps understanding. If anything, I would think this is somewhat confusing, as I have to grasp changing the numbers treats is as if that number was changed on previous iterations.
Fair enough. I should say my comment is not geared to the skill involved with this, which is high. Nor in the capability. Just saying that the odd graph of "making time tangible" just doesn't really do it for me. Whereas the metaphor of a turtle/pen did.
Guys, this is great, thank you for putting your time into it. Any plans on creating courses based on this methodology? I found those on the Khan Academy very interesting but unless you follow the video tutorial, the console is not self explanatory as in your examples.
I love this, I could see this being the next wave of programming tutorials, much simpler and fun way to learn how to program. Could you do one for Python? that would be just brilliant.
Really solid way to learn about Programming. See each step and figure out how conditions work and _why_ things happen, not just _what_ happens. Awesome!
Not to be a smartass but how is this different from hitting F10 over and over? (disclaimer I skimmed the article very quickly). I supposed it is nice that you can go backward also.
