Show HN: New visual language for teaching kids to code

Oh that's such a good point about the typing speed limitation I never would have thought of that for some reason.

I've been doing super light python lessons with my 3yo and I was wondering why we were moving slower than he seemed capable of in terms of understanding what I was saying but you just made me realize how long it was taking him just to type brackets and quotation marks etc.

I like this project and am looking forward to trying it. I'm starting to adopt a "the more the merrier" mentality with kids programming. Might as well expose them to the dynamic of having a bunch of different languages / workflows to choose from.

I'm curious, why not get a kids sized keyboard?

This has been my experience as well. I introduced my son to Scratch when he was 8 and now, 2 years later, he's creating quite advanced games in it I wouldn't have thought possible.

But whenever I show him "real" programming languages, he's like: I can do all of that with Scratch as well - without having to type all that stuff.

We tried GameMaker and produced some cool results together, but as soon as I turn around, he's back at his Scratch projects.

Sometimes I wonder if it'd have been better had he started with code right away. Like I did back in the days. ;-)

Have you considered a netbook? Small keyboard :)

Limitation-wise I felt that it's not obvious to the kid what to do in Scratch to manage complexity - what to do when the program becomes "too big".

And just pointing out the problem and asking what could be done helped get them on track to think about the issue and ... find several ways that Scratch does allow. Splitting a program into multiple objects / agents for example.

Scratch is way more powerful than first glance or first programs hint at.

GDScript is a surprisingly good language. Better than Python in many ways (e.g. it has `var` and `const`).

The keywords are there on every line to make them easy to verbally read. This is most important in the case of set x = 7, the keyword makes it clear that we're trying to mutate a variable, not assert equality.

Even though technically we could make forward() a method at the top level in the context of a paint program, we chose to make things more OOPy to prepare them for later when students get to the 2D game engine and there can be multiple sprites to control.

The Basic I used had

    LET X=10

When I was first learning to program as a kid I really liked having LET x = 2, or Perl's sigils, etc. It helped remind me of things as simple as assignation being left to right.

I think it is needed for easily moving the code up and down. Notice that the kids don’t have to write the code. So because everything is clickable, it helps to have the keywords there in the design.

I felt like the naming was a little unintuitive here. `forward` and `left` seem to be directions of movement (especially if I want the painter to "move left"). Instead, `forward` means to draw/move, while `left` is a CCW rotation (even though it supports a negative argument)

  call paint.draw(10)
  call paint.rotate(90) // or even rotate("up")

Guess I'm showing my age, but the first version of BASIC that I learned had the "gosub" command [1] for subroutine calls.

N.B.: I'm using one-based indexing for my links here because that's apparently what early BASICs used [2] :)

[1] https://picaxe.com/basic-commands/program-flow-control/gosub...

[2] https://alandix.com/blog/2021/07/27/a-brief-history-of-array...

It will be added as kool syntactic sugar later in v2! Stay tuned for updates!

</s>

Totally agree, it was my first thought too on call/var nonsense.

So "forward" is something you click and it shows all possible expressions for a new line?

Agreed, this was my first impression as well. I spend my whole day in front of much more complex code, but trying to put myself in the shoes of a young kid, I would be really misled by this (unnecessary) noise.

> She can't understand how her classmates can have difficulties understanding

Because most people are completely illiterate with respect to mathematics. I wouldn't hold high hopes on their ... whatever the opposite of "functional illiteracy" is.

One idea in case you talk to that "17 yo" again. Ask her to ask her classmates to compute "{{2} over {3}} over {4} + {5} over {{6} over {7}} = ?", here's a visual view of this operation with fractions: https://imgur.com/IqhEsmX

I bet the discombobulated by "z = x + y" also get flabbergasted by fractions. If so, it's not they have trouble learning programming. They have trouble learning anything, q.e.d.

"how a machine can do that" > "nobody answered" is a really key takeaway here.

Do teachers understand coding enough to answer basic questions like that? I'm curious about whether they do.

I suspect that Assembly doesn't click either if you don't know logic gates. My granddad was an impulse electronics guy, so before receiving a PC I already knew how transistors, triggers, counters, registers, adders work. He built a simple "CPU"-like thing from some journal out of ICs and explained how it works step by step. Later it helped to clear the gaps between `z = x + y`, `adc b` and something =▯- and -|< like.

Scratch has extra blocks for such things as:

set variable to [value]

change variable by [value]

which imo greatly reduce such ambiguities.

I suspect there's some confusion here that it makes sense to iron out instead of jumping to conclusions. Maybe a pedagogical problem. I'm not so sure talking about logic gates or assembly is a good idea as that is an implementation detail. Programming is something you can do on pen and paper; there's a distinction between programming and automation.

What would happen if you take away the computer and speak strictly in the language of arithmetic? It seems they would have no trouble given the the eventual answer of 11. Perhaps they need to hear that that the computer can automate these operations, how it happens under the hood is a separate question that can be addressed separately. It is a valid question, of course, and perhaps its a sign of fascination. That would be good, but needs to be tempered by patience.

I sometimes use a Turing Tumble to demonstrate this: https://upperstory.com/turingtumble/

I've also had occasional success first convincing them they know how to add "mindlessly", by just manipulating symbols, and then explaining that we can have machines do it mindlessly, too. I don't use those words, ofc.

For example, you might ask them "Imagine you had a younger sibling who couldn't add. Maybe they didn't even know what numbers were. Could you teach them how to add by just telling them what symbols to write down as they looked through the symbols in the addition problem? Maybe there's an index card labeled '6+3' and on it is written '9'. You tell them to look for the correct index card and write down the corresponding symbol."

You can also explain binary to any interested student who is 13+ and then the idea that a machine can do it becomes a lot easier.

This video of Richard Feynman explaining how computers works is very good: https://www.youtube.com/watch?v=EKWGGDXe5MA

He uses a metaphor I've gotten a lot of mileage out of. Imagine you have a clerk who can add and multiply like a regular person. Now imagine there's someone else who knows only how to add and count, but have no idea what multiplication is.

If they can add and count fast enough, it'll look to an outsider like they not only know what multiplication is, but they can do any multiplication problem almost instantly.

Computers are like that: dumb but fast.

If they do something fast enough they give the illusion of "understanding", kind of like movies give the illusion of motion by swapping out still images fast enough.

Been an old fart, I started coding on the C64 in 6502.

It wasn’t that hard to learn enough and, given I was cracking writing crack-intros, it has helped me hugely in the modern world. As an example, threading is child’s play because I did VBL interrupts.

However, the institutions today naturally teach something more relevant to getting a job as they did in my day (68k, Turbo Pascal and some C).

My first thought in this context was this is a 9th grade math problem, not programming. If the problem relating it has to do with how a computer can do it - do they not allow calculator use anymore?

I can not imagine that schooling has gone so far backwards with so many advances, or at the least I really hope that it has not. I was not even in advanced math courses and was/am average at best when it comes to math and would have thought the confusion would happen when getting to something like:

    x = "hello" 
    y = "world!" 
    z = x + " " + y

It's funny that you and a sibling have essentially opposite asks [0]. The other commenter's anecdote is about how even the magic of expressions resolving to values goes over some novices' heads— how much more so would a full expression-oriented language!

I'm a fan of functional programming, but I also sympathize with OP's observation that even python might be too far from the CPU to be a good introduction to computing. It probably depends a lot on the child and the teacher—a functional programming language would probably appeal more to older kids (high school) who are comfortable with math.

[0] https://news.ycombinator.com/item?id=38366268

How would that help children? You want to make it easy to get into. I think imperative is simpler than functional. Let them learn to crawl first.

Functions are at least first class! We have map and filter on lists, for example. I'd love to add some more advanced curriculum that focuses on teaching a more functional style.

I dunno, I think teaching functional programming to kids is an awesome goal, but at the same time most "real programming" they'll move on to (javascript, python etc) is going to be imperative.

It's probably a better learning experience for kids to be able to get to a point where they can make fun things like games and websites, and then teach them how to improve the correctness of programs.

(Obviously there are some great options for functional creation like elm, but there obviously isnt the same level of available learning resources yet)

I agree.

Functional programming sits on a difficulty range: spreadsheets on the low-end (debatable but I'll say it!), and on the high-end, well, I think that everything else FP sits there with minor exceptions.

I'm developing a language for numbers that is conceptually closer to spreadsheet formulae than imperative programming or hard-FP, therefore I think hopeful for this kind of task in the long-run. It's "only for numbers", so really think spreadsheet-formula type complexity, but I won't stop anybody from going wild with interpretation.

To see things you pair it with some other language like JS, but code for these "apps" can be simple/declarative and pre-rolled. I have a JS visualization library that will probably be graphical one day.

I'm working on the project website [1]. Following spreadsheet fashion some examples are a little bore, but there is a raycaster rendering to a bar chart and heart shapes, bouncing balls and projectiles, to lighten the mood for early developer-adopters or contributors.

For some more project background: by encapsulating numbers in a language (and not a mad one and one that we can safely and actually run), it can facilitate transparency for numbers. Transparency and education go hand-in-hand. I'm talking about numerical literacy primarily, but I think that too goes hand-in-hand with.. programming on computers.

[1] https://calculang-quarto-site-messing.pages.dev/examples

I built a game you might find interesting. It's basically a visual Lisp wrapped up in the idea of arranging magical cards to build spells.

https://www.bittwiddlegames.com/lambda-spellcrafting-academy...

The demo is playable in the browser too thanks to Rust + WASM.

Many have tried this. It is definitely not in the class of "nobody else has thought of this" so much as "tons of people have thought of this and tried it and smash up against some major problems right away".

AIUI, in this case, the major issue is that it is very tempting to try to impose a constraint that all intermediate states the code passes through are semantically valid. However while superficially appealing this turns out to be a crippling constraint. Even the best of us tend to think in somewhat more sloppy terms and then fix up code after the fact, even on a line-by-line basis. Being forced to be completely valid 100% of the time turns out to be a big mismatch. I am inclined to believe this mismatch is fundamental. Only vanishing fractions of a percent of humans, if any, think this way. Even professional mathematicians report that they tend to work this way in practice, in that they tend to leap ahead and then back-fill the rigor, rather than strictly working forward one step at a time, and if even they don't work in this manner, who does?

Programming has settled on semantically-aware autocomplete and suggestions, and that's probably the actual optimum, not just a symptom of some kind of laziness.

It is possible that if somebody really pushed through the development that the problems are solvable, but I'd advise anyone taking it on that if there's any fruit here, and there may well be, it is not low hanging.

As saurik mentioned, the Lisp world through emacs is the closest you can get to this, but again AIUI you can still do anything you want, it's just that you have a lot of tools that encourage "more" semanticness, not that it is enforced absolutely rigidly.

I am under the impression that this is what people who program in Lisp experience when working with Emacs, where they get to think in and work with forms rather than mere text.

Aren't there quite a few of these? Scratch or its cousin Snap (https://snap.berkeley.edu/snap/snap.html), or even a visual flow editor for React (https://app.flowhub.io/#project/c111454c9fd2f74d37d1e8a4e739...) or the similar https://retejs.org/

You wish there was something like this for adult programmers?

Blythe Omnis 7 in ... (checks CV/resume) ...1996 (and earlier), a 'RAD' platform/solution that worked across Windows and Macintosh... (I landed the job because I was the ONLY candidate who had even heard of this software, because I read a short article in a magazine once...)

https://en.wikipedia.org/wiki/Omnis_Studio

Clicking to program with drop-down lists (and popups) just wasn't all that well thought out. So - you would see your program as a listing. When you tried to edit a line, it would popup a modal dialog box, where you could edit... just that one line... Intellisense/code-completion were of course non-existent... ahahahahaha (laughs maniacally)

Man, I think my PTSD is kicking in, I need a drink/smoke or something.

For example https://github.com/nocode-js/sequential-workflow-designer is designed in this way, that you program some logic by setting predefined actions in a proper order. You program at the high level.

The underlying hardware is mutable / imperative. Load number into register A -- Load number into register B -- Add A B and store result --

Functional and data-driven / declarative interfaces are only made possible because of the imperative "ugliness" (reality) that supports it.

In order for students to understand computing e2e, they need to understand imperative programming.

In order for students to become capable of designing robust, powerful, and elegant systems, they will need to understand functional/declarative programming.

Something like Roc-lang, where it’s a stripped down yet capable language seems to be a good fit. But I agree solving problems with a functional approach would better develop the foundations.

But starting out with something that is not Python, with the goal of ending up doing Python, seems like a funny way to approach things.

Another project in this space is Pyret [0]. The Pyret language has been developed with the express intention of taking completely novice programmers, teaching them how to program in a language with reasonable semantics [1], and progressively add language features until they eventually switch to Python. The language is integrated into the DCIC course [2].

The idea of a language that can progressively gain features was (to the best of my knowledge) pioneered by Racket. The idea is that a particular file can be declared at a specific "language level" (I think that's the terminology), which restricts the set of features available to the user. Over the course of the semester, new features can be added as they are taught. The advantage of this approach is that students do not accidentally encounter surprising semantics that they inadvertently internalize to the detriment of their long-term learning.

The Pyret project is actually spearheaded by Shriram Krishnamurthi at Brown University, who was on the original Racket team. His career has focuses on the application of PL theory and tooling to computer science education. One of his most recent publications is particularly interesting with regard to the present topic, which is an experience report detailing what happens when students move from Racket to Pyret and from Pyret to Python [3].

[0] https://pyret.org

[1] While my use of the word "reasonable" is certainly opinionated, what I mean is that Python's semantics are simply unintuitive to many novices. I've forgotten the title of the paper I read that analyzed this, but a related paper is "Python: The Full Monty", which develops a small-step operational semantics for the core Python language. Many of the specific semantics are surprising even to seasoned Python developers! Direct PDF: https://cs.brown.edu/~sk/Publications/Papers/Published/pmmwp...

[2] A Data-Centric Introduction to Computing is a new introductory course at Brown (which is also now being implemented at a few other schools) that seeks to introduce students to computing through tables and data. There's a lot of research backing up the specific methodologies chosen by the authors. https://dcic-world.org

[3] What Happens When Students Switch (Functional) Languages (Experience Report), direct PDF: https://cs.brown.edu/~sk/Publications/Papers/Published/lkft-...

Following up on my own comment. Others also show changes to text-based code when changes are made to graphical-based [1], but I haven't seen any that allow working backwards, so that clicking or changing graphical highlights and shows how text changes. To me that would enforce how the two fit, rather than a one-way cause-effect.

[1] want to especially mention https://makecode.adafruit.com/, which is really well done as you can even simulate moving the board around to see what accelerometer inputs do in your code.

I don’t know much about this tech, but judging from the screenshot, it looks like a mix of imperative programming and visual editing that is the worst of both worlds.

I’m not surprised you moved to C.

(On the other hand, it looks like a super nifty way of having a primitive interpreted language without a parser/lexer)

I feel like visual programming gets a bad rap because of things like this. As an electronic engineer that used to love LabView and life long user of NI Reaktor and Max/MSP, those tools are fantastic if you don’t approach them with an imperative programming mindset.

Yeah I think block editing is largely aimed at kids who literally wouldn't be able to comfortably type at a keyboard, which definitely wouldn't apply by the time you're 10.

Do you know of a "subset of Python" alternative? Would be interesting to have a natural bridge to "real" programming.

They don’t make syntax error, but they also don’t complaint if something is out of place. Says, you manipulated the blocks and one was popped out, the program will still run but don’t work correctly. When there are a number of blocks, it could be quite hard to spot because the blocks can overlap each other. Then there is also a problem with forgetting arguments for a block. Still runs but don’t work.

Visual programming is definitely better for kids, but I think it requires a more strict approach and a better debugging ability than Scratch.

Another nice thing about Scratch, well actually blocks, is that you can fairly easily adopt it to a new language. We used blocks to allow IoT customers to configure their device to react to events & push events to other devices and this all transformed into a JSON config that was uploaded.

That sentence also seemed awkward to me

It should be possible to auto-generate these block editing UI's starting from an abstract description of the syntax, as used e.g. in a tree-sitter parser. Sometimes this kind of block-based editing is also integrated with type checking to enable smart, query-based filling of "holes", as seen perhaps most prominently in editors for Agda (a pure functional language).

Your post reminded me of how teaching an elm (a functional language) workshop to novices was almost simpler than to professionals. The novice brain wasn't corrupted by imperative C thinking, of sorts.

There is all kinds of drawing and gaming programs in Scratch and its (subjectively) better cousin Snap!

Using Pen (very similar to Turtle drawing) is easy and surprisingly capable. But Pen in Scratch is limiting in term of controlling color and output texts. Snap is much better in this aspect. Blending spites and stamping can result in nice effects as well.

An 8 year old would set the Pickcode record by one year, no reason not to try!

$5/month for unlimited lessons. That fact should be put on the landing page, it's on the todo list

Thanks, tim! charlie@pickcode.io whenever you have feedback

I disagree with this take. I have found immeasurable advantages to working with non-IDE/non-hold-my-hand-editors when programming. The separation of concerns (editing text versus compiling and running a program) are valuable to me as a developer. I remember as a child learning code in environments like BASIC, Pascal, TCL, Inform6, etc. And knowing that I could use my preferred text editor that I had a mental model about was a big win. I could lookup references in a book and learn easily. In contrast to IDEs which always got in my way confusing the heck out of me when really I just wanted to type examples from the books I got from the library.

Call me old fashioned but I have a hunch that the separated and minimalist approach has value in learning programming. To this day I still find doing things with minimalist tools I am far more productive than my counterparts who hunt and peck through menus and mouse clicks. A big advantage I think it this separation and minimalism primmed my brain to see way to compose tools and ideas instead or relying on what the system tells me I can and cannot do.

I can see it. So it is visual for me.

Click the “Home” button on the sidebar while logged in and you’ll see a new project button. The sidebar might be default hidden on mobile

Nice idea! Adding a ticket for it

Will do

Wow, thanks for all the feedback! I agree that expression level editing can get pretty cumbersome at times, it's the biggest design challenge in the editor I think. One thing we may add is a toggle to edit expressions in plain text and parse them back into the visual bubbles.

Re: the fact that syntax errors are possible: it is really really hard to make an editor where invalid states are impossible while trying to make expressions easy to enter. Scratch and other block languages do this by forcing you to write code in prefix order. I want to PLUS 2 and 3, vs in Pickcode where you write 2 + 3, and the expression is in an invalid state before you enter the 3. Rewriting 2 + 3 to 2 + (2 + 1) is really hard when you have to think in prefix notation. One advantage that we have is when there are syntax errors, they are necessarily at the expression level, so in the worst case the student can just scrap the line and start over, vs in plain text where the error message for a mismatched paren could land lines later.