Show HN: New visual language for teaching kids to code

[csmeyer]

Pickcode is a new language and editor for getting kids started with coding. The code editing experience is totally structured, where you select choices from menus rather than typing. I made Pickcode after experiences teaching kids both block coding (Scratch, App Inventor) and Python. To me, block coding is too far removed from regular coding for kids to make the connection. Pickcode provides a much clearer transition path for students to Python/JS/Java. Our target market is middle/early high school kids, and that’s who we’ve tested the product with during development.

On the site, you can do tutorials to make chatbots, animated drawings, and 2D games. We have a full Intro to Pickcode course, as well as an Intro to Python course where you make regular console programs with a regular text editor. There are 30 or so free lessons accessible with an account, and the rest are paywalled for $5/month.

For professional programmers, the editor is probably pretty frustrating to use (no vim keybindings!), but I hope it’s at least interesting to play with from a UI perspective. If you have kids aged 10-14, I’d love any feedback you have from trying it out with them. I love talking to users, reach out at [email protected]!

[layer8]

Is there a good reason to require `var`, `set`, and `call` keywords? BASIC doesn’t have those. From my (admittedly dim) memories starting programming as a kid, those keywords would have been an unnecessary complication.

For example in LOGO, you’d just write

    forward 10
    left 90

In comparison,

    call paint.forward(10)
    call paint.left(90)

seems excessive and noisy.

[csmeyer]

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.

[secret-noun]

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

speaks better to me.

[CoastalCoder]

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

[hurryer]

The Basic I used had

    LET X=10

[jurgenaut23]

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.

[whazor]

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.

[CalRobert]

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.

[zx8080]

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.

[postalrat]

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

[rsweeney21]

I've been introducing my 10yr old to Godot. He's been building games in Scratch for the past 6 months. He loves Scratch, but is also frustrated by it's limitations. I thought he'd be happier with a real scripting language.

When we started writing some GDScript he quickly became frustrated by all the typing! His hands are too small to master touch typing. It takes forever to type a variable name + method call + ...

This looks like the perfect balance. Going to check it out!

[omneity]

Congrats for launching Pickcode! The attention to detail is great and shows that you care.

As an aside on the topic at large, I find there are (at least) two schools of thought in the visual programming space, when intending to make programming more accessible to non-developers.

Some efforts focus on reducing the overhead of learning syntax, by leveraging the visual interface, but do not hide their imperative nature nor the need for an algorithmic mindset. In effect we can think of these as IDEs but with varying levels of accessibility. I surmise that Pickcode and Scratch belong to this category.

Other groups explore different programming paradigms instead, that might fit the visual metaphor to varying levels of success. They also induce different mindsets to their users compared to imperative programming. Node-red is a great example of this, which explores flow based programming (a close relative of functional reactive programming). Another is Labview, a dataflow-based close relative with more magic in it (really rather smart defaults and naming of internal variables). Apple Automator also comes to mind.

I don't think either pattern is necessarily better or worse. I just find it useful to think of this distinction (imperative vs reactive) for visual languages, which leads to very different end-user experiences.

[aragonite]

> The code editing experience is totally structured, where you select choices from menus rather than typing

Very cool! I wish there were something like this for working adult programmers, a general purpose structured editor for programming languages. When I program the intentions I form are in the first instance semantic (define a function here, check a condition there). Why shouldn't I just directly communicate my semantic intentions to the editor? Why do I have to first serialize my intentions into a string for the editor to then parse, in a error-prone process which introduces the possibility of silly syntactic errors like typos, mismatched brackets, operator precedence errors etc, rather than just semantic incorrectness?

Such an editor wouldn't necessarily have to be keyboard unfriendly any more than Excel is keyboard unfriendly. I guess it could also work something like input method editors for East Asian languages where you type into a "composition window" and make selections from a "candidate window" for insertion.

[jerf]

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.

[solardev]

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/

[jjkaczor]

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.

[b4rtazz]

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.

[saurik]

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.

[Retr0id]

One of my favorite features of Scratch is that it's impossible to create syntax errors. The blocks either fit together, or they don't. I think this makes it easier for kids to pick it up and start playing without specific instruction or tutoring.

After following the first couple of steps of the rectangle tutorial, I started clicking around and doing my own thing. I ended up with "call math paint.forward()", giving me a syntax error. Obviously that line is garbage, but I can't figure out how the math instruction is supposed to work. I'm sure if I followed some more of your tutorials I'd have it explained to me, but I think discoverability is important too.

[pamelafox]

Congrats! It looks really nice. It reminds me of when we developed a block-based version of our ProcessingJS editor at Khan Academy. It was a little clunky UI wise and hard to maintain, so we eventually dropped it, but this looks pretty slick. I love that you're giving new programmers more ways to get into typed programming! (I tend to also think most block coding is too far removed).

[hyperthesis]

Reminds me of ZX81's BASIC: you didn't type keywords. There was a key for each one on the specialized keyboard. The editor was context-sensitive - in other words, a parser-driven lexical analyzer was you. At the time, it seemed a little magical to me that it knew whether you wanted to type a word/number versus a keyword, and what kind of keyword (but really, the pedagogically relevant aspect was that I knew).

BTW Significant to the ZX81 was the memory saved by storing tokens instead of their text representation. Yes. It had 1k RAM kids - including display memory (no separate GPU). This parsing when entered would also make runtime faster.

[hnlmorg]

This is a very polished site but I’m not sure I agree with your goals. It’s an impressive IDE however I’d focus on a subset of Python rather than a new language. Otherwise you’ll find people will dismiss it because Scratch is easier to teach (schools where teachers are developers) and Python is more useful to learn (programmer parents teaching kids).

I’m a software developer who has assisted my wife’s primary school / kindergarten with programming classes. So somewhat familiar with the problems that exist in this space.

[n8henrie]

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

[dang]

Related:

Show HN: Pickcode – A new way to introduce programming to kids - https://news.ycombinator.com/item?id=33562193 - Nov 2022 (14 comments)

Show HN: PickCode – An educational coding environment for students after Scratch - https://news.ycombinator.com/item?id=32230329 - July 2022 (32 comments)

Show HN: Pickcode – A graphical code editor for education - https://news.ycombinator.com/item?id=31426331 - May 2022 (4 comments)

(Reposts are fine after a year or so! links to past threads are just to satisfy extra-curious readers)

[chaosprint]

Looks great!

I am working on some similar concepts but for music programming:

https://glicol.org

I feel that it would be great if there could be some examples on the landing page directly.

When I try a lesson, I get stuck; The hint is on the right but it's not very obvious; perhaps you can rearrange it like Svelte Tutorial (https://learn.svelte.dev/tutorial/welcome-to-svelte)

for the syntax I am not sure; have you considered using LOGO?

[canadaduane]

I showed it to my 13yo daughter. Her first question was, "Can you share it with people?" (Her favorite aspect of Scratch is the community). I said I don't know, then clicked on the Try a lesson button. She saw the page and said,"Teachers probably like this" and went back to her book.

[semitones]

As someone for whom programming first really "clicked" after using NetLogo in a CS class in highschool, I love the idea of this project and the interface! For kids the most important thing is to get them _excited_ about programming, and this seems like it could do a good job

[intpx]

This is pretty cool, The UI is a little tough-- deleting code blocks is clunky. its also hard to break out of the type modals there should also be some kind on context aware help dialogue to tell you what operator/type you have active is/does

[jcelerier]

> If you have kids aged 10-14, I’d love any feedback you have from trying it out with them.

I can give you my feedback from when I was 10-11: I was trying to learn RPG Maker 2000 / XP's scripting which was kinda similar to this and got so frustrated by the limitations of the visual editor ( https://steamuserimages-a.akamaihd.net/ugc/27362763067155240... ) that I went straight to learning C and C++, which I pretty much managed to a basic level. trust kids :)

[cbhl]

One quick comment: is there an open-ended sandbox where I can just write whatever code where I want? Even after creating an account I couldn't find such a button, or even the "pay $5/mo upsell" button.

I feel like such a mode would be useful for instructors that are working through a problem with their students, ideally without having to go through all the lessons first.

As for students, once they get proficient in a language they'll want to use it to make things -- from what I've seen in other learn-to-code environments kids end up co-opting the later lessons to do so if you don't give a way for them to create new projects.

[altruios]

My biggest feedback is in the UI information displayed.

Before I try, before I 'log in', I have no way on the landing page - or navigating around a bit - to find out how much it costs. That knowledge up front would make me as a buyer feel much more trust. To hide that behind UI sign-ups always strikes me as underhanded (forcing someone to invest attention as a sales tactic feels too manipulative to me to consider the service helpful and not a money grab).

Easy fix, just display how much it costs upfront.

[csmeyer]

Will do

[qez2]

Languages for "teaching kids how to code" tend to be either:

1. very visual/non-text (eg: scratch)

2. usability IDE/language tools (what this appears to be)

#1 is fine. But #2, these should be present in software the adults use. But it's not, which is an embarrassing indictment of our approach to computing. The fact that we don't have Victor-esque feedback by default in our IDEs is a blight.

____

Tangent: famously, in the US and much of the western world (for some reason... meaning Disney, mostly), the culture got it into its head that animations are cartoons which are exclusively "for kids", and if you watch animation, you're a kid. But in fact, there's nothing inherent about the medium of animation which necessarily makes it just "for kids", and another culture (Japan) which does not have that cultural assumption got some great art out of it (Anime).

It's weird what we decide is "for kids" and limit ourselves.

[sirsuki]

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.

[bennyp101]

Looks pretty cool, I’ll give it a go on a computer tomorrow!

One thing I noticed, when I did the rectangle demo, I’d click on the “123” to input a number, but my phone showed the full keyboard, would be nice if it defaulted to numbers for that. (Obvs it’s not designed for a phone but I assume the same on a tablet?)

[csmeyer]

Nice idea! Adding a ticket for it

[_c3ag]

> Pickcode provides a much clearer transition path for students to Python/JS/Java. Our target market is middle/early high school kids, and that’s who we’ve tested the product with during development

there's any paper backing this claim?

[pmontra]

Well, this is not the n-th visual block language but an IDE with realtime reruns of modified code.

Tangentially, but not so much: I was talking with a 17 yo last weekend. She teached Python herself a couple of years ago and they are teaching it now in her class. She can't understand how her classmates can have difficulties understanding

  x = 5
  y = 6
  z = x + y

I asked the value of z to a 30 yo that was listening to the conversation and he first answered 5 + 6, then looked at us, thought again and said 11.

The student then told me that some of the other students eventually understood that z takes the value of 11 but their question was "how a machine can do that" and nobody answered to them. I wonder if a little of assembler on a toy CPU could be a better starting point. For example this Machine Code for Kids card game [1] They are selling the cards from the home page of the site (I'm not affiliated with them, I just bought a few decks.)

Or a two bits binary adder with logic gates.

[1] https://punkx.org/4917/guide.html

[jfarmer]

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.

[MichaelRo]

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

[badcppdev]

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

[lo_zamoyski]

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.

[OnlyMortal]

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

[1659447091]

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

where it stops looking like something your entry level high school math class has you doing 30 odd problems a day on.

[wruza]

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.

[sinuhe69]

Scratch has extra blocks for such things as:

set variable to [value]

change variable by [value]

which imo greatly reduce such ambiguities.