9 ms·
Choc: Bret Victor's 'Learnable Programming' implemented in Javascript
- replicatorblog 13y agoReally neat concept! The scrubber is a great way to get noobs to fully understand how the concepts actually execute. It's like CodeCademy 102.
- devinfoley 13y agoThis is great! When can we expect the Voxel demo?
- jashmenn 13y agoI 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.
- trombomulin 13y agowhoa, interactive real time learning. This looks like has it some real potential
- Ygg2 13y agoLooks 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.
- jashmenn 13y agoYou'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.
- seanmcdirmid 13y agoYou'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=201333 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 http://www.umut-acar.org/self-adjusting-computation Its an interesting research area.
- mattty 13y agoThis is really neat! Would be a great addition to a cs-tuition program for kids.
- joeblau 13y agoIncase you haven't seen Bret's talk about Inventing on Principle, here it is: https://vimeo.com/36579366 https://vimeo.com/36579366
- dcre 13y agoIf you haven't watched it yet, I like Media for Thinking the Unthinkable even better: http://vimeo.com/67076984 http://vimeo.com/67076984
- joeblau 13y agoAwesome, thanks for the link. I have it queued up--I'm going to watch it after I submit my app to Apple :)
- pjmlp 13y agoA very good one is "The future of Programming", http://vimeo.com/71278954 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).
- joeblau 13y agoYeah 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.
- gum_ina_package 13y agoI 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.
- jedp 13y agoI 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!)
- jashmenn 13y agoI 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.
- jeresig 13y agoThe 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 https://www.khanacademy.org/cs
- jashmenn 13y ago
- scep12 13y agoThis is so awesome. I couldn't possibly think of a better IDE and/or learning tool.
- malkia 13y agoAwesome! 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 :)
- dylanpyle 13y agoFor the interested: Jan Paul Posma has done some really awesome stuff with similar inspirations at jsdares (http://www.jsdares.com/ http://www.jsdares.com/) — try dragging around some of the variables in the brick game.
- slacka 13y agoIf you're targeting a younger audience flowlab (http://www.flowlab.io/ 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.
- zokier 13y agoI 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.
- mrlinx 13y agoYou're missing a quite few updates in LightTabe... Latest builds support python live edit.
- cheery 13y agoThe idea Bret Victor represented is great, but the form of his creations are probably inefficient. Now these guys are trying to imitate that exact form in unusable SVG mess that doesn't work at interactive frame rates. You should concentrate on the concept of interactive debugging and representing data going within the software.
- sloanesturz 13y agoReally solid way to learn about Programming. See each step and figure out how conditions work and _why_ things happen, not just _what_ happens. Awesome!
- marcamillion 13y agoYou 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/ http://rubular.com/
- jyu 13y agoHave you tried the pry gem? It gets you 90% there and is a useful interactive repl for things outside of iterators.
- marcamillion 13y agoI have a bit....but it's a little complicated and overkill I think. But....I may revisit it again.
- christiangenco 13y agoCan't get much more simple than `binding.pry` jumping you into an `irb` at that line.
- minor_nitwit 13y agoREPL'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.
- mwein 13y agoHow is this any different from what John Resig already developed for Khan Academy's CSE program? https://www.khanacademy.org/cs/ants/1744989397 https://www.khanacademy.org/cs/ants/1744989397
- cbhl 13y agoThis 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/ 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").
- makmanalp 13y agoReminds me a bit of http://pythontutor.com/ http://pythontutor.com/
- SchizoDuckie 13y agoReally 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.
- jashmenn 13y agoAgreed - 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)
- shurcooL 13y agoThis is really cool. And way more complete than I expected. I'm working on similar things for Go in my spare time, but I'm not yet that close to having cool results.
- jashmenn 13y agoThanks - Conception is really cool BTW
- deleted 13y ago[deleted]
- eagsalazar2 13y agoNot 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.
- mekarpeles 13y agoNate and Ari know what they're doing, great guys and great programmers.
- pjdorrell 13y agoI have created a Correspondence example for the first Javascript example at http://pdorrell.github.io/bracketup/correspondence/choc-example-1.html 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.
- shire 13y agoI 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.
- LindaWell 13y agomy Aunty Paige just got an awesome yellow Nissan Rogue SUV by working part time from a home computer... find more information ...................http://redir.ec/buzz55 http://redir.ec/buzz55
- taeric 13y agoI 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 http://en.wikipedia.org/wiki/Logo_%28programming_language%29
- nullz 13y agoyou'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
- taeric 13y agoI'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.
- nullz 13y agoim saying it would be trivial to implement LOGO in choc
- taeric 13y agoFair 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.
- idProQuo 13y agoI'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.
- nullz 13y agoI 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
- jashmenn 13y ago@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/ http://cljsfiddle.net/ and make chocfiddle?
- idProQuo 13y agoSure 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.
- MrBra 13y agoDunno if something is wrong with browser or code, but the webgl demo totally wrecked my Firefox.
- deleted 13y ago[deleted]
- ichifish 13y agoLast 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 http://ies.ed.gov/sbir/2014solicitations.asp
- lucabenazzi 13y agoGuys, 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.