I showed it to my 12-yo son. He wants to learn programming. Right now he's able to create complex machines in Minecraft, which are similar to programs and to electronic circuits.<p>Anyway, he was thrilled by jsdares because of the gaming approach. He was excited to do the first 3 robots tutorials, and then he got tired but asked me to send him the link to the site. Those were the first programming lines he wrote.<p>So, the overall experience of jsdares is awesome. As a suggestion to Jan Paul and team, please make it translatable so kids from around the world can benefit of it. There's already a few good introductions to programming in JavaScript in English, but very few ones in Portuguese using this new approach.
This makes me want to find an old BBC Micro and a LOGO Turtle :)<p>I Think the initial page has too many paths that I can start on. I think it needs a single clear starting point (higher up the page) that lets one get used to the UI... for instance it took me a while to work out how to 'start', then a while before I noticed that there was a tab for the 'robot' I was controlling.
This is very cool, we need more things like this in the industry. Easy entry, and instant gratification. The question that gets asked by every beginner in any field is "okay, but am I ever going to use this?" and instant gratification and identifying concepts in the context of a greater whole are crucially important.<p>However, the title makes me think more of actual visual programming "languages" or interfaces. Much like minecraft as is being pointed out here, or the National Instruments project, LabView (<a href="http://en.wikipedia.org/wiki/LabVIEW" rel="nofollow">http://en.wikipedia.org/wiki/LabVIEW</a>) which uses a language "G" ... a graphical representation of inputs, outputs, logical operators and translators that all get connected via "wires" in a flowchart. I was playing with this at 10 or 12 and I think engaging my visual-spacial skills early in something entirely logical and non-visual dominated greatly helped me. I have to think that kids playing minecraft now will be great programmers were they to go that direction.
This is awesome. How to make it even better?<p>1. Add some of the really nice error parsing and automated suggestion heuristics from Khan Academy's JS editor <a href="https://www.khanacademy.org/cs" rel="nofollow">https://www.khanacademy.org/cs</a> (sadly doesn't seem to be on their Github yet)<p>2. Integrate some of the typechecking features of ternjs to again provide more helpful error messages and suggestions <a href="http://ternjs.net/" rel="nofollow">http://ternjs.net/</a>
The robot dares reminded me of "Lightbot"[1], a game which I admire and think gives a great introduction to programming concepts, without going into the details of a programming languages' syntax.<p>Anyway, great work. I showed it to my girlfriend who wants to learn programming; she finds it way more fun than Codecademy.<p>[1] <a href="http://armorgames.com/play/2205/light-bot" rel="nofollow">http://armorgames.com/play/2205/light-bot</a>
Reminds me a lot of Bret Victor's Inventing on Principle talk (<a href="http://vimeo.com/36579366" rel="nofollow">http://vimeo.com/36579366</a>). I went to the lecture he gave at Stanford back in February (<a href="http://hci.stanford.edu/courses/cs547/speaker.php?date=2013-02-01" rel="nofollow">http://hci.stanford.edu/courses/cs547/speaker.php?date=2013-...</a>) and meant to ask him what ever happened to that editor he demonstrated. He's working on new software right now now that lets you take datasets (think plaintext CSV files) and programmatically construct new visual displays of those data (so perform this set of actions on each item, and repeat that through the entire set with this one change, which the software will learn to repeat through the rest of the data). That new software is web-based, but again, didn't hear anything from him about when to expect it to be released.<p>Very cool to see this stuff moving in the direction of being responsive inside the browser, and actually working. Understanding variables is one of the most common problems for beginners, and being able to change the variables and see the immediate effects in existing code is compelling.
Looks similar to what I've tried to do with Modelian [1].<p>With Modelian, I went the route of developing a Domain Specific Language designed to be simple to learn (which has an interpreter built all in JS). It has things like case-insensitivity that I think make learning simpler.<p>[1] <a href="http://modelian.com" rel="nofollow">http://modelian.com</a>
Awesome!<p>From Jan Paul's thesis:
> The syntax tree can be used to generate back the original code, be it in normalised form, but also to generate the safe runtime. For every Javascript operation a wrapper function is provided, which sanitizes the input and output, and restricts the operation if necessary.<p>Like I said, awesome!!
Very nice over all. Some parts definitely need some polish, though. I get what you're going for with the player-piano type dots crossing the line, but I really couldn't tell what was going on the first few times I brought it up. It was just too busy with the current line of code in it's own highlighted box and the line and the dots. I also accidentally clicked one of the numbers and didn't know why all the dots and stuff wouldn't get off the screen.
This is so great! We find our students want help with only a small number of large concepts as they learn. Mostly, these are the basics of programming (conditionals, loops, control flow). This looks like a great tool!<p>(The other main area students struggle is how to fit HTML and JS together into a real project...)<p>Darrell (<a href="http://www.thinkful.com/" rel="nofollow">http://www.thinkful.com/</a>)
I really enjoyed these exercises. One bug I found: for the "Find the Largest" dare the solution only allows 10 lines of code- but the test code takes up 9 lines! Since I was unable to solve the problem by creating and implementing a function (not enough line allowance) I found that was able to complete the dare by simply printing out the test answers. Only bug I found, though!
Jan Paul showed me this at Fronteers last year. It's super impressive and works incredibly fluid. I hope this gets a bunch of attention and gets incorporated into a lot of curriculums. Even the first example offers more insight that the entire javascript/programming courses i had in college.
I just wish it featured some JS syntax highlighting, true to spec JS linting (drop a semicolon and the parser errors) and perhaps CoffeeScript support. Not sure what the implications would be with learning CS before JS or during, but I support its presence none the less.
this is sweet. i was recently throwing around the idea of a visual code progression alongside the actual execution as a form of tute/documentation (sort of like docco w/execution) and this is pretty damn close.<p>would be great if you integrated syntax coloring, like Codemirror.