Choc: Bret Victor's 'Learnable Programming' implemented in Javascript(fullstack.io)
fullstack.io
Choc: Bret Victor's 'Learnable Programming' implemented in Javascript
http://fullstack.io/choc/
30 comments
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.
Looks neat, but it's very sluggish. I kinda wish that I could just edit the field and type a value myself. Also I somehow got:
shift += --99
It went into minus and I couldn't bring it back.
It went into minus and I couldn't bring it back.
You're right - it is a bit sluggish. That's something we have to work on. We also need to fix the double negative issue.
That said, you should be able to type in a value yourself. The code is completely editable.
That said, you should be able to type in a value yourself. The code is completely editable.
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:
http://research.microsoft.com/apps/pubs/default.aspx?id=2013...
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:
http://www.umut-acar.org/self-adjusting-computation
Its an interesting research area.
http://research.microsoft.com/apps/pubs/default.aspx?id=2013...
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:
http://www.umut-acar.org/self-adjusting-computation
Its an interesting research area.
Incase you haven't seen Bret's talk about Inventing on Principle, here it is: https://vimeo.com/36579366
A very good one is "The future of Programming", http://vimeo.com/71278954.
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).
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.
If you haven't watched it yet, I like Media for Thinking the Unthinkable even better: http://vimeo.com/67076984
Awesome, thanks for the link. I have it queued up--I'm going to watch it after I submit my app to Apple :)
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.
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.
You're missing a quite few updates in LightTabe... Latest builds support python live edit.
I have created a Correspondence example for the first Javascript example at http://pdorrell.github.io/bracketup/correspondence/choc-exam....
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.
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.
#justsaying
[1] - http://rubular.com/
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.
#justsaying
[1] - http://rubular.com/
Have you tried the pry gem? It gets you 90% there and is a useful interactive repl for things outside of iterators.
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.
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.
I have a bit....but it's a little complicated and overkill I think.
But....I may revisit it again.
But....I may revisit it again.
Can't get much more simple than `binding.pry` jumping you into an `irb` at that line.
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.
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)
Reminds me a bit of http://pythontutor.com/
I almost think something like this would be great in an IDE tailored for kids. Maybe something similar to the Scratch project.
However, I think that more visual debugging tools like this actually need to exist for professional developers as well. I think Bret would agree too.
However, I think that more visual debugging tools like this actually need to exist for professional developers as well. I think Bret would agree too.
It looks awesome. Being inspired by one of Bret Victor's videos, I built something similar for my (at that time) 7-8 year old in Lua: http://notebook.kulchenko.com/zerobrane/live-coding-in-lua-b.... Here is another screencast where you can see a game developer (Andy Bower) live-coding a simple app running on iPad in 25 minutes (http://notebook.kulchenko.com/zerobrane/gideros-live-coding-...).
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.
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.
How is this any different from what John Resig already developed for Khan Academy's CSE program?
https://www.khanacademy.org/cs/ants/1744989397
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 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?
Sure thing, what's your email?
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.
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
Really neat concept! The scrubber is a great way to get noobs to fully understand how the concepts actually execute. It's like CodeCademy 102.
[deleted]
I can't help but feel Logo[1] offered a better metaphor. Actually seeing an "actor" that will perform the actions being given is a huge benefit.
[1] http://en.wikipedia.org/wiki/Logo_%28programming_language%29
[1] http://en.wikipedia.org/wiki/Logo_%28programming_language%29
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.
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.
im saying it would be trivial to implement LOGO in choc
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.
This is really neat! Would be a great addition to a cs-tuition program for kids.
Nate and Ari know what they're doing, great guys and great programmers.
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!
Awesome! Since I can't even comprehend how would I start implementing this, and my head is already blocked trying to think about all edge cases :)
This is great! When can we expect the Voxel demo?
I was having some trouble getting CORS working properly from S3 to jsfiddle. I'll link to the voxel jsfiddle once I get that figured out.
[deleted]
Dunno if something is wrong with browser or code, but the webgl demo totally wrecked my Firefox.
This is so awesome. I couldn't possibly think of a better IDE and/or learning tool.
whoa, interactive real time learning. This looks like has it some real potential
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.