Show HN: jsdares – learning programming visually | Hacker News Reader

Show HN: jsdares – learning programming visually

jsdares.com

177 pointsjanpaul12339 comments

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.

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.

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.

Thanks a lot, great to hear he liked it!

Unfortunately there are not many dares implemented yet, so he will not be able to follow a nice path from playing with robots to writing games. But anyone can create their own dares.

If you would like you could try to recreate the existing dares in Portugese. Better integration of different languages would be great at some point though!

How is the localization done? I'd be interested in a german version (and would contribute).

No support yet for localization at all, unfortunately. Except for creating your own dares in other languages.

It's one of the greater hurdles for teaching kids to code, in non-English countries. Everything is in English, which greatly impacts their ability to figure out most things for themselves. And you can't really expect kids under 12 to meaningfully decipher English (there's exceptions, yes).

That's the first reason I clicked the link--I thought the "visually" part in the title would perhaps be about something doing away with written language entirely, but alas :)

Anyway, if children are important in your audience, please consider (a support framework for) localization. In the technology world, you can usually expect people to be able to read and communicate English, it's the lingua franca. Most software gets diminishing returns for each language you add, many people even prefer English interfaces over their mother language (because so many industry-words are English--looking at you, Photoshop/GIMP). But with children, for every new language you add, it's like opening up an entirely new can of audience that simply wasn't able to work with your software before.

Completely agree with that. I just wanted to spend all my time on other features, but since it is an open source project my hope is that people will help me out with building things like internationalization! :-)

This makes me want to find an old BBC Micro and a LOGO Turtle :)

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.

That's a great point! I've heard that a couple of times actually. For the first couple of dares it would probably be better not to have any tabs, in order to be able to get started right away.

I did want to have the game on the frontpage however, both as a showcase of what's possible with the platform and because making games might appeal to people. But maybe on the frontpage there should be a number of different examples to explore, including some with robots. What do you think?

I also didn't find the actual tutorials below the fold at first. I thought we were supposed to start at the big game, which is rather complex for novices.

Consider placing the main/default path at the top of the page (start your first lesson, a la Codecademy) and below that (but still above the fold) 3 or 4 examples inside small squares of the kind of programs you can write (possibly starting points for more advanced students).

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.

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 (http://en.wikipedia.org/wiki/LabVIEW) 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.

Thanks! The instant gratification was indeed an important part of the design, as it hugely helps the motivation. (Think I've seen studies to that effect, but can't remember exactly.)

My biggest problem with these "visual programming languages" is that they don't scale well to "real-world programming". There's also a pedagogical discussion on whether they are effective for learning, but I don't want to get involved in that. ;-) In practice I've seen though that most children/students don't have a problem writing actual code.

This is awesome. How to make it even better?

1. Add some of the really nice error parsing and automated suggestion heuristics from Khan Academy's JS editor https://www.khanacademy.org/cs (sadly doesn't seem to be on their Github yet)

2. Integrate some of the typechecking features of ternjs to again provide more helpful error messages and suggestions http://ternjs.net/

Thanks!

Great to see a lot of suggestions coming by here, I'll add them later to the existing TODO list: https://github.com/janpaul123/jsdares/issues

Oh, I hadn't noticed that this project is on GitHub. And under a MIT License to boot! Hmmm.... where's my thinking hat?

Reminds me a lot of Bret Victor's Inventing on Principle talk (http://vimeo.com/36579366). I went to the lecture he gave at Stanford back in February (http://hci.stanford.edu/courses/cs547/speaker.php?date=2013-...) 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.

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.

Bret Victor has indeed been my primary inspiration for this project, even before the Inventing on Principle talk (e.g. Ladder of Abstraction, Kill Math, etc). I've written up some more details on the implementation and motivation here, if you're interested: http://www.jsdares.com/blindfold :-)

I agree very impressive. What it resonated with me is its kind of the web 2.0 equivalent of what we called a "programmers console". Classic blinking lights.

IF you follow that analogy, WRT the "Understanding variables" common problem as you state etc, a pretty obvious addition from the front panel area was ways to look at internal state. And breakpoints...

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.

Anyway, great work. I showed it to my girlfriend who wants to learn programming; she finds it way more fun than Codecademy.

[1] http://armorgames.com/play/2205/light-bot

Looks similar to what I've tried to do with Modelian [1].

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.

[1] http://modelian.com

Awesome!

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.

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.

Thanks for your comments! The step bar at the bottom is definitely sub-par, but wanted to have it so quickly hacked it in there :)

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!

Hah, yeah, I put less thought in the second set of exercises. All my exercises are honestly just examples, since anyone can create their own! :-)

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!

(The other main area students struggle is how to fit HTML and JS together into a real project...)

Darrell (http://www.thinkful.com/)

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.

Thanks Kilian :)

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.

Syntax highlighting would be great indeed, I didn't implement it because it didn't seem like the most important thing to do. The project is open source though, so if you would like to implement syntax highlighting or CS support, then that would be superb! :D

How do you feel the extra step of compiling to CoffeeScript would impact performance and response time? I have been considering contributing in that direction.

Probably a limited performance impact. But keep in mind that my current parser doesn't even allow creation of objects, closures, etc., so the value of adding CoffeeScript is also rather limited, at this point. :-(

Is there any reason you didn't use CodeMirror? You'd have gotten completion and syntax-highlighting for free then.

Yes, it would have cost me more time. Would be great to have though. :)

This is so well made. Would be a great intro to programming for kids or newbies of any age. Congrats and great work!

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.

would be great if you integrated syntax coloring, like Codemirror.

The robots remind me of the Karol the robot... Very cool concept though!

Karel the Robot has definitely inspired the robot interface!

This looks very promising. I look forward to seeing what you add.

Excellent work, congrats!

Reply on news.ycombinator.com