

Show HN: jsdares – learning programming visually - janpaul123
http://www.jsdares.com/

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

~~~
janpaul123
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
How is the localization done? I'd be interested in a german version (and would
contribute).

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

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

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

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

~~~
janpaul123
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?

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

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

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

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

~~~
janpaul123
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>

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

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

------
jmtame
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-...](http://hci.stanford.edu/courses/cs547/speaker.php?date=2013-02-01))
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.

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

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

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

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

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

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

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

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

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

~~~
janpaul123
Thanks Kilian :)

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

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

~~~
janpaul123
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. :-(

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

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

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

~~~
janpaul123
Karel the Robot has definitely inspired the robot interface!

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

------
eccp
Excellent work, congrats!

