Show HN: jsdares – learning programming visually

http://www.jsdares.com/

by janpaul123 • 13 years ago

177 39 13 years ago

chrisfarms• 13 years ago

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.

janpaul12314• 13 years ago

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?

facorreia3• 13 years ago

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).

jmtame• 13 years ago

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.

janpaul12314• 13 years ago

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 :-)

VLM• 13 years ago

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...

jonahx• 13 years ago

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

darrellsilver• 13 years ago

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/)

kilian• 13 years ago

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.

janpaul12314• 13 years ago

Thanks Kilian :)

facorreia3• 13 years ago

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.

janpaul12314• 13 years ago

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!

dirkk0• 13 years ago

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

NuZZ• 13 years ago

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.

janpaul12314• 13 years ago

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

goldfeld• 13 years ago

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.

iso8859-1• 13 years ago

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

asb• 13 years ago

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/

janpaul12314• 13 years ago

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

facorreia3• 13 years ago

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

eddyystop• 13 years ago

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

whoeverest• 13 years ago

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

scottfr• 13 years ago

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

leeoniya• 13 years ago

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.

brokentone• 13 years ago

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.

janpaul12314• 13 years ago

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.

ivan_ah• 13 years ago

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!!

eccp• 13 years ago

Excellent work, congrats!

TheSilentMan• 13 years ago

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.

janpaul12314• 13 years ago

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 :)

sfeats• 13 years ago

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!

janpaul12314• 13 years ago

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! :-)

spydum• 13 years ago

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

janpaul12314• 13 years ago

Karel the Robot has definitely inspired the robot interface!

Show HN: jsdares – learning programming visually

Related Stories