17 ms·

Show HN: New visual language for teaching kids to code

420 points by csmeyer 3y ago

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 charlie@pickcode.io!

bitwize 3y ago
Saw the domain, held out a glimmer of hope it had something to do with the PICK System or PICK BASIC: https://en.wikipedia.org/wiki/Pick_operating_system https://en.wikipedia.org/wiki/Pick_operating_system
- deleted 3y ago
  [deleted]
pmontra 3y ago
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 https://punkx.org/4917/guide.html
- badcppdev 3y ago
  "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.
  - OnlyMortal 3y ago
    From experience, no. When you have to correct their code you know their ability.
  - indigochill 3y ago
    Maybe some if you get lucky and find someone who's really into the subject, but it certainly wouldn't be a requirement because the people hiring for that position don't think that way. And I imagine the Venn diagram of people who know that and people who are willing to put up with how high school teachers get treated by The System (assuming we're talking about the US and not Finland) instead of getting a job in tech is pretty small.
  - codingdave 3y ago
    Not really. But based on conversations I've had with folks who have worked on staffing such classes in schools, it is a known trade-off: A teacher who cannot answer all tech questions is better than a tech person who cannot teach. If someone exists who can do both, that is wonderful, but if you have to choose... choose a teacher.
- OnlyMortal 3y ago
  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).
- jfarmer 3y ago
  I sometimes use a Turing Tumble to demonstrate this: https://upperstory.com/turingtumble/ 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 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.
sssilver 3y ago
How I wish these "for children" programming languages were more focused on functional programming, rather than being so imperative.
- csmeyer 3y ago
  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.
  - pamelafox 3y ago
    If you want inspiration, we created a (mostly) functional-first curriculum for Snap (like SCRATCH) which still has highly visual output. https://bjc.berkeley.edu/bjc-r/course/sparks.html https://bjc.berkeley.edu/bjc-r/course/sparks.html It's definitely trickier to bring functional programming into these sorts of environments, but I think we came up with some nice compromises there.
- benrutter 3y ago
  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)
  - hnlmorg 3y ago
    This is the first time I’ve seen JavaScript not being described as a functional language :) As for your more general point: it’s easy to go from functional -> imperative. It’s a lot harder to do the same thing in reverse. Source: anyone who learned LOGO before BASIC in the 1980s.
- deleted 3y ago
  [deleted]
uticus 3y ago
> To me, block coding is too far removed from regular coding for kids to make the connection...provides a much clearer transition path for students to Python/JS/Java. Personally I wonder what the ultimate goal is. I appreciate furthering education, making connections between different concepts, etc. 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. So Pickcode has some value, but not enough that I'm willing to transfer my educational time (and dollars) from other options giving my children the critical thinking skills & love of learning that let them explore and make the connections naturally. Educational materials are in a competitive space!
- deleted 3y ago
  [deleted]
- uticus 3y ago
  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/ 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.
- DonaldPShimoda 3y ago
  > 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 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/pmmwplck-python-full-monty/paper.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 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-switch-fun-lang/paper.pdf https://cs.brown.edu/~sk/Publications/Papers/Published/lkft-...
pamelafox 3y ago
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).
- zozbot234 3y ago
  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).
  - pamelafox 3y ago
    Yeah, we actually took that approach for the block-based experiment for Khan Academy. I think we ran into issues with auto generating the blocks for JS prototype based classes, if I recall correctly, but I can't remember exactly what the issues were. I don't know what approach OP is using.
qez2 3y ago
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 3y ago
  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.
deleted 3y ago
[deleted]
- deleted 3y ago
  [deleted]
chaosprint 3y ago
Looks great! I am working on some similar concepts but for music programming: https://glicol.org 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 https://learn.svelte.dev/tutorial/welcome-to-svelte) for the syntax I am not sure; have you considered using LOGO?
altruios 3y ago
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 3y ago
  Will do
intpx 3y ago
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
westurner 3y ago
awesome-python-in-education > Interactive Environments: https://github.com/quobit/awesome-python-in-education#interactive-environments https://github.com/quobit/awesome-python-in-education#intera...
cbhl 3y ago
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.
- csmeyer 3y ago
  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
rsweeney21 3y ago
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!
- latchkey 3y ago
  I'm curious, why not get a kids sized keyboard?
  - rsweeney21 3y ago
    I didn't know there was such a thing. :) Might need to get him one for christmas.
    - DonHopkins 3y ago
      Commodore PET! ;) https://commons.wikimedia.org/wiki/File:Commodore_PET_keyboard_and_storage_-_Retrosystems_2010.jpg https://commons.wikimedia.org/wiki/File:Commodore_PET_keyboa...
      - 867-5309 3y ago
        pretty sure my PET had a chunky black keyboard and the tape drive was separate
        DonHopkins 3y ago
        You and Pete Shelley. https://www.youtube.com/watch?v=2HwmO_GZfzI https://www.youtube.com/watch?v=2HwmO_GZfzI
        867-5309 3y ago
jcelerier 3y ago
> 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/6C090E9E921C34F65A3F49EE250A76AF57BAD802/ 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 :)
- zozbot234 3y ago
  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.
- whstl 3y ago
  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.
  - jcelerier 3y ago
    > 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. aha, in the long run I ended up making https://ossia.io https://ossia.io which is as VPL as it can get. Yet it still embeds multiple textual languages.
    - whstl 3y ago
pass_the_salt22 3y ago
I personally wouldn’t teach children mutable imperative programming. I think functional, data driven, declarative, “data first” programming would be a better introduction to the subject. We’ve essentially broken our own brains training ourselves to think the imperative/mutable style is normal
- semitones 3y ago
  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.
  - hk__2 3y ago
    OP is talking about children, not computer science students.
    - erikerikson 3y ago
      "students" doesn't exclude children.
  - pass_the_salt22 3y ago
    I agree with you. I probably wouldn’t invest much time learning patterns for solving higher level problems in an imperative way, but spending some time with a breadboard, then some circuit emulators, then machine code -> assembly -> systems programming will definitely give kids (a bit older than the target for this tool perhaps?) an important basis in the underlying physical reality of their programs.
  - maweki 3y ago
    The children know school math. And their blackboard is declarative and not imperative. Why would you suddenly introduce implicit state? i=i+1 is just confusing without a good and formal introduction. And once you have that introduction, your most of the way to modelling state in a functional declarative computing model.
hnlmorg 3y ago
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 3y ago
  Do you know of a "subset of Python" alternative? Would be interesting to have a natural bridge to "real" programming.
  - danybittel 3y ago
    I think this is exactly what you're looking for: https://youtu.be/fmF7HpU_-9k?si=YkEBUIJNshdujAW5 https://youtu.be/fmF7HpU_-9k?si=YkEBUIJNshdujAW5
    - hnlmorg 3y ago
      wow that’s a really well presented talk! Best I’ve seen in a long while. I found myself getting excited about the subject matter like I was a child. She definitely knows how to engage her audience. Thanks for sharing
    - 123pie123 3y ago
      thanks my 10yo who is in to scratch really likes that (hedy.org)
semitones 3y ago
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
hyperthesis 3y ago
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.
aragonite 3y ago
> 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.
- saurik 3y ago
  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.
  - hyperthesis 3y ago
    ASTs
- jerf 3y ago
  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.
account-5 3y ago
This looks cool. I've been looking for something for my son. How much will this cost in the future? I'm assuming there's a subscription model round the corner.
- csmeyer 3y ago
  $5/month for unlimited lessons. That fact should be put on the landing page, it's on the todo list
  - account-5 3y ago
    Yeah that should be upfront. I've no hassle paying but do like to know how much without having to go searching or finding out during the sign up. Thanks for the quick reply.
sitkack 3y ago
I think the "real" programming part should be removed. All programming is real programming and this encourages throwing shade on languages and people that are not deemed "real".
- deleted 3y ago
  [deleted]
- NeuroCoder 3y ago
  That sentence also seemed awkward to me
  - sitkack 3y ago
    Awkward in the way you don't put a dig against the other when talking about your new thing. I am particularly cognizant of othering and language that puts people at odds.
bennyp101 3y ago
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 3y ago
  Nice idea! Adding a ticket for it
Karliss 3y ago
Few observations from playing around with the demo: * you claim that code editing is totally structured, but at the same time it is possible to delete one of the two parentheses thus creating broken expression, and no straight forward way to add the missing parenthesis since writing of them happens only in pairs. It feels like with exception to top level statements. * when editing it's easy to end up with stray empty tokens which result in confusing syntax errors (that's even worse than significant whitespaces in plaintext editing) Overall it fells like this feels like worse parts of both sides: syntax errors of traditional plaintext code editing, and constrained editing ability of structured code editing. > For professional programmers, the editor is probably pretty frustrating to use (no vim keybindings!) It is not the lack of vim keybindings that's causing frustration, it's the lack of almost any keyboard input or ability to type in if you know what you are trying to enter and being forced to search for operators within tiny scrollable 3x3 grid. Either the editing should be a lot more constrained with clearly displayed placeholder slots like it is in scratch, or the editor should allow typing in expressions using keyboard. Consider that the goal of project is helping transitioning from block editing to more practically used programming languages -> I would suggest exploring the second approach. Keep the current menu input method, but when a user presses a key insert or start editing appropriate type token. That is if the expression insertion menu is open and user presses a number key just start editing a number, they would have to use keyboard for entering it anyway if they clicked on number input button in the dropdown. Similar if you press + key, and + is token that's currently available in the insertion dropdown just insert '+'. Other pain point was editing. At statement level I would say it's reasonable, but expression level any editing felt miserable. In some cases it felt like simplest way of editing is erasing everything, in other moments it felt like some kind of bad Levenshtein distance code golfing. Lets say you have expression `a+b` and you later decide to change it to `(a+b)*c`. Your options are either erase everything and rewrite from scratch or insert '()' before a+b, insert '()' after a+b, erase ) from first parentheses pair, erase ( from second parentheses pair, add * and c. Neither plaintext editing nor good block based code editing have this problem. Also you can't select and copy or move anything except whole statements. Overall with exception of top level statements, it hardly enforces any structure of code and you can enter almost arbitrary sequence of expression tokens forming an invalid expression.That kind of defeats the point of having somewhat structured non typing based input. Bug: In chromium the insertion dropdown shows 3x3 grid, but scrolling with mousewheel scrolls by 4 lines. Meaning you can't easily select anything from 4th row like '*'. Can't you just show all the operators? Even on mobile phone there should be enough space to show 3x9 or 5x5 grid. Bug2: drag and dropping an if statement inside itself caused the page to hangup. Infinite loop? While dragging a statement with nested statements like if or while should highlight the whole block not just the first line.
layer8 3y ago
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.
- postalrat 3y ago
  So "forward" is something you click and it shows all possible expressions for a new line?
- csmeyer 3y ago
  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.
  - deleted 3y ago
    [deleted]
  - wruza 3y ago
    I always wanted `set` in regular languages instead of (or in addition to) =/==. Edit: well actually, I want a whole development studio like this for professional development. You are the closest of anything else to my vague idea of what programming should look like. I feel bad for the kids who later will have to move from this to what we call "our software development stacks".
    - mikeravkine 3y ago
      Pascals := is concise and intuitively obvious, so obviously it never caught on.
timClicks 3y ago
Hey Charlie, love this. I would rename 'call' to 'make', or perhaps 'do', but this concept likes really neat. Will give this a whirl with my girls, who are a little bit younger than your target market, and will flick you through any useful feedback.
- csmeyer 3y ago
  Thanks, tim! charlie@pickcode.io whenever you have feedback
omneity 3y ago
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.
- matsemann 3y ago
  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.
  - omneity 3y ago
    Yeah, functional and/or declarative programming can be surprisingly easy for beginners. They can just describe what they want and then see the magic unfold.
dang 3y ago
Related: Show HN: Pickcode – A new way to introduce programming to kids - https://news.ycombinator.com/item?id=33562193 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 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 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)
dgudkov 3y ago
It's not visual.
- chrisjj 3y ago
  I can see it. So it is visual for me.
  - dgudkov 3y ago
    You can see C# or Java code as well. It doesn't make them visual programming languages.
mortallywounded 3y ago
I see the target market is middle/high school kids. Any tips for younger kids? I've been trying to get my daughter (8) to enjoy coding more. She does code.org and Scratch a bit, but we've been experimenting with Python/PyGame. She really likes drawing and games, but it's pretty difficult to teach.
- csmeyer 3y ago
  An 8 year old would set the Pickcode record by one year, no reason not to try!
- sinuhe69 3y ago
  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.
_c3ag 3y ago
> 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?
swayvil 3y ago
I was writing pretty cool stuff in c64 basic when I was 10. Just write it (on the dirt-primitive text editor) and run. This seems relatively troublesome.
n_plus_1_acc 3y ago
How dies it compare to https://hedy.org/ https://hedy.org/?
Retr0id 3y ago
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.
- sinuhe69 3y ago
  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.
  - creer 3y ago
    Yeah certainly Scratch is a bit light on debugging support. Or was 6-8 yrs ago.
- JCharante 3y ago
  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.
e12e 3y ago
Why would I teach this rather than a FOSS platform?
ChilliaDay 3y ago
[dead]
__MatrixMan__ 3y ago
Rather than multiple calls to random, have you considered picking the x and y offsets randomly and then picking the color based on them? It seems like one could tell a better story about why-that-color? If it were a function of the other random choices.
MichaelMoser123 3y ago
Looks great, congrats! I made a small interpreted language on top of nodejs, for the same customers. https://github.com/MoserMichael/jscriptparse https://github.com/MoserMichael/jscriptparse However it turns out that you can't draw too much with node, so I didn't manage to add turtle graphics.
sagarpatil 3y ago
This is awesome. Congratulations. I wanted to introduce my kids to programming so this is very timely. Thanks for building it.
xigency 3y ago
As someone who has worked in this space before, using Blockly to help teach Arduino coding to kids, this looks fantastic! Keep up the good work.
hasoleju 3y ago
My kids don't have English as their native language. Does anyone have experience with teaching kids how to code if they don't speak English yet? Do you only change the variable names to their native language or do you use a language where you can also translate the commands? My assumption is that starting with English commands should work, but I don't know.
drsopp 3y ago
Looks very interesting! An annoying coincidence, however, is that in norwegian, "pick" is a homophone to a vulgar form of the word penis.
somebodythere 3y ago
I'm interested in a direction like this but along the lines of allowing adept programmers to write real programs on a mobile device. Using touchscreen keyboards to write real code is pretty unwieldy.
julia_dor 3y ago
Congratulations on the launch!
canadaduane 3y ago
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.
sirwhinesalot 3y ago
> structured code instead of blocks or node graphs. THANK YOU. I thought I was insane, nobody understood me. I know which tool I'll give my daughter.

420 points by csmeyer 3y ago

bitwize 3y ago

Saw the domain, held out a glimmer of hope it had something to do with the PICK System or PICK BASIC: https://en.wikipedia.org/wiki/Pick_operating_system https://en.wikipedia.org/wiki/Pick_operating_system

deleted 3y ago
[deleted]

pmontra 3y ago

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 https://punkx.org/4917/guide.html

badcppdev 3y ago
"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.
- OnlyMortal 3y ago
  From experience, no. When you have to correct their code you know their ability.
- indigochill 3y ago
  Maybe some if you get lucky and find someone who's really into the subject, but it certainly wouldn't be a requirement because the people hiring for that position don't think that way. And I imagine the Venn diagram of people who know that and people who are willing to put up with how high school teachers get treated by The System (assuming we're talking about the US and not Finland) instead of getting a job in tech is pretty small.
- codingdave 3y ago
  Not really. But based on conversations I've had with folks who have worked on staffing such classes in schools, it is a known trade-off: A teacher who cannot answer all tech questions is better than a tech person who cannot teach. If someone exists who can do both, that is wonderful, but if you have to choose... choose a teacher.
OnlyMortal 3y ago
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).
jfarmer 3y ago
I sometimes use a Turing Tumble to demonstrate this: https://upperstory.com/turingtumble/ 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 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.

sssilver 3y ago

How I wish these "for children" programming languages were more focused on functional programming, rather than being so imperative.

csmeyer 3y ago
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.
- pamelafox 3y ago
  If you want inspiration, we created a (mostly) functional-first curriculum for Snap (like SCRATCH) which still has highly visual output. https://bjc.berkeley.edu/bjc-r/course/sparks.html https://bjc.berkeley.edu/bjc-r/course/sparks.html It's definitely trickier to bring functional programming into these sorts of environments, but I think we came up with some nice compromises there.
benrutter 3y ago
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)
- hnlmorg 3y ago
  This is the first time I’ve seen JavaScript not being described as a functional language :) As for your more general point: it’s easy to go from functional -> imperative. It’s a lot harder to do the same thing in reverse. Source: anyone who learned LOGO before BASIC in the 1980s.
deleted 3y ago
[deleted]

uticus 3y ago

> To me, block coding is too far removed from regular coding for kids to make the connection...provides a much clearer transition path for students to Python/JS/Java. Personally I wonder what the ultimate goal is. I appreciate furthering education, making connections between different concepts, etc. 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. So Pickcode has some value, but not enough that I'm willing to transfer my educational time (and dollars) from other options giving my children the critical thinking skills & love of learning that let them explore and make the connections naturally. Educational materials are in a competitive space!

deleted 3y ago
[deleted]
uticus 3y ago
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/ 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.
DonaldPShimoda 3y ago
> 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 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/pmmwplck-python-full-monty/paper.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 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-switch-fun-lang/paper.pdf https://cs.brown.edu/~sk/Publications/Papers/Published/lkft-...

pamelafox 3y ago

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

zozbot234 3y ago
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).
- pamelafox 3y ago
  Yeah, we actually took that approach for the block-based experiment for Khan Academy. I think we ran into issues with auto generating the blocks for JS prototype based classes, if I recall correctly, but I can't remember exactly what the issues were. I don't know what approach OP is using.

qez2 3y ago

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 3y ago
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.

deleted 3y ago

[deleted]

deleted 3y ago
[deleted]

chaosprint 3y ago

Looks great! I am working on some similar concepts but for music programming: https://glicol.org 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 https://learn.svelte.dev/tutorial/welcome-to-svelte) for the syntax I am not sure; have you considered using LOGO?

altruios 3y ago

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 3y ago
Will do

intpx 3y ago

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

westurner 3y ago

awesome-python-in-education > Interactive Environments: https://github.com/quobit/awesome-python-in-education#interactive-environments https://github.com/quobit/awesome-python-in-education#intera...

cbhl 3y ago

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.

csmeyer 3y ago
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

rsweeney21 3y ago

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!

latchkey 3y ago
I'm curious, why not get a kids sized keyboard?
- rsweeney21 3y ago
  I didn't know there was such a thing. :) Might need to get him one for christmas.
  - DonHopkins 3y ago
    Commodore PET! ;) https://commons.wikimedia.org/wiki/File:Commodore_PET_keyboard_and_storage_-_Retrosystems_2010.jpg https://commons.wikimedia.org/wiki/File:Commodore_PET_keyboa...
    - 867-5309 3y ago
      pretty sure my PET had a chunky black keyboard and the tape drive was separate
      - DonHopkins 3y ago
        You and Pete Shelley. https://www.youtube.com/watch?v=2HwmO_GZfzI https://www.youtube.com/watch?v=2HwmO_GZfzI
        867-5309 3y ago

jcelerier 3y ago

> 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/6C090E9E921C34F65A3F49EE250A76AF57BAD802/ 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 :)

zozbot234 3y ago
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.
whstl 3y ago
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.
- jcelerier 3y ago
  > 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. aha, in the long run I ended up making https://ossia.io https://ossia.io which is as VPL as it can get. Yet it still embeds multiple textual languages.
  - whstl 3y ago

pass_the_salt22 3y ago

I personally wouldn’t teach children mutable imperative programming. I think functional, data driven, declarative, “data first” programming would be a better introduction to the subject. We’ve essentially broken our own brains training ourselves to think the imperative/mutable style is normal

semitones 3y ago
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.
- hk__2 3y ago
  OP is talking about children, not computer science students.
  - erikerikson 3y ago
    "students" doesn't exclude children.
- pass_the_salt22 3y ago
  I agree with you. I probably wouldn’t invest much time learning patterns for solving higher level problems in an imperative way, but spending some time with a breadboard, then some circuit emulators, then machine code -> assembly -> systems programming will definitely give kids (a bit older than the target for this tool perhaps?) an important basis in the underlying physical reality of their programs.
- maweki 3y ago
  The children know school math. And their blackboard is declarative and not imperative. Why would you suddenly introduce implicit state? i=i+1 is just confusing without a good and formal introduction. And once you have that introduction, your most of the way to modelling state in a functional declarative computing model.

hnlmorg 3y ago

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 3y ago
Do you know of a "subset of Python" alternative? Would be interesting to have a natural bridge to "real" programming.
- danybittel 3y ago
  I think this is exactly what you're looking for: https://youtu.be/fmF7HpU_-9k?si=YkEBUIJNshdujAW5 https://youtu.be/fmF7HpU_-9k?si=YkEBUIJNshdujAW5
  - hnlmorg 3y ago
    wow that’s a really well presented talk! Best I’ve seen in a long while. I found myself getting excited about the subject matter like I was a child. She definitely knows how to engage her audience. Thanks for sharing
  - 123pie123 3y ago
    thanks my 10yo who is in to scratch really likes that (hedy.org)

semitones 3y ago

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

hyperthesis 3y ago

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.

aragonite 3y ago

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

saurik 3y ago
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.
- hyperthesis 3y ago
  ASTs
jerf 3y ago
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.

account-5 3y ago

This looks cool. I've been looking for something for my son. How much will this cost in the future? I'm assuming there's a subscription model round the corner.

csmeyer 3y ago
$5/month for unlimited lessons. That fact should be put on the landing page, it's on the todo list
- account-5 3y ago
  Yeah that should be upfront. I've no hassle paying but do like to know how much without having to go searching or finding out during the sign up. Thanks for the quick reply.

sitkack 3y ago

I think the "real" programming part should be removed. All programming is real programming and this encourages throwing shade on languages and people that are not deemed "real".

deleted 3y ago
[deleted]
NeuroCoder 3y ago
That sentence also seemed awkward to me
- sitkack 3y ago
  Awkward in the way you don't put a dig against the other when talking about your new thing. I am particularly cognizant of othering and language that puts people at odds.

bennyp101 3y ago

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 3y ago
Nice idea! Adding a ticket for it

Karliss 3y ago

Few observations from playing around with the demo: * you claim that code editing is totally structured, but at the same time it is possible to delete one of the two parentheses thus creating broken expression, and no straight forward way to add the missing parenthesis since writing of them happens only in pairs. It feels like with exception to top level statements. * when editing it's easy to end up with stray empty tokens which result in confusing syntax errors (that's even worse than significant whitespaces in plaintext editing) Overall it fells like this feels like worse parts of both sides: syntax errors of traditional plaintext code editing, and constrained editing ability of structured code editing. > For professional programmers, the editor is probably pretty frustrating to use (no vim keybindings!) It is not the lack of vim keybindings that's causing frustration, it's the lack of almost any keyboard input or ability to type in if you know what you are trying to enter and being forced to search for operators within tiny scrollable 3x3 grid. Either the editing should be a lot more constrained with clearly displayed placeholder slots like it is in scratch, or the editor should allow typing in expressions using keyboard. Consider that the goal of project is helping transitioning from block editing to more practically used programming languages -> I would suggest exploring the second approach. Keep the current menu input method, but when a user presses a key insert or start editing appropriate type token. That is if the expression insertion menu is open and user presses a number key just start editing a number, they would have to use keyboard for entering it anyway if they clicked on number input button in the dropdown. Similar if you press + key, and + is token that's currently available in the insertion dropdown just insert '+'. Other pain point was editing. At statement level I would say it's reasonable, but expression level any editing felt miserable. In some cases it felt like simplest way of editing is erasing everything, in other moments it felt like some kind of bad Levenshtein distance code golfing. Lets say you have expression `a+b` and you later decide to change it to `(a+b)*c`. Your options are either erase everything and rewrite from scratch or insert '()' before a+b, insert '()' after a+b, erase ) from first parentheses pair, erase ( from second parentheses pair, add * and c. Neither plaintext editing nor good block based code editing have this problem. Also you can't select and copy or move anything except whole statements. Overall with exception of top level statements, it hardly enforces any structure of code and you can enter almost arbitrary sequence of expression tokens forming an invalid expression.That kind of defeats the point of having somewhat structured non typing based input. Bug: In chromium the insertion dropdown shows 3x3 grid, but scrolling with mousewheel scrolls by 4 lines. Meaning you can't easily select anything from 4th row like '*'. Can't you just show all the operators? Even on mobile phone there should be enough space to show 3x9 or 5x5 grid. Bug2: drag and dropping an if statement inside itself caused the page to hangup. Infinite loop? While dragging a statement with nested statements like if or while should highlight the whole block not just the first line.

layer8 3y ago

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.

postalrat 3y ago
So "forward" is something you click and it shows all possible expressions for a new line?
csmeyer 3y ago
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.
- deleted 3y ago
  [deleted]
- wruza 3y ago
  I always wanted `set` in regular languages instead of (or in addition to) =/==. Edit: well actually, I want a whole development studio like this for professional development. You are the closest of anything else to my vague idea of what programming should look like. I feel bad for the kids who later will have to move from this to what we call "our software development stacks".
  - mikeravkine 3y ago
    Pascals := is concise and intuitively obvious, so obviously it never caught on.

timClicks 3y ago

Hey Charlie, love this. I would rename 'call' to 'make', or perhaps 'do', but this concept likes really neat. Will give this a whirl with my girls, who are a little bit younger than your target market, and will flick you through any useful feedback.

csmeyer 3y ago
Thanks, tim! charlie@pickcode.io whenever you have feedback

omneity 3y ago

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.

matsemann 3y ago
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.
- omneity 3y ago
  Yeah, functional and/or declarative programming can be surprisingly easy for beginners. They can just describe what they want and then see the magic unfold.

dang 3y ago

Related: Show HN: Pickcode – A new way to introduce programming to kids - https://news.ycombinator.com/item?id=33562193 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 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 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)

dgudkov 3y ago

It's not visual.

chrisjj 3y ago
I can see it. So it is visual for me.
- dgudkov 3y ago
  You can see C# or Java code as well. It doesn't make them visual programming languages.

mortallywounded 3y ago

I see the target market is middle/high school kids. Any tips for younger kids? I've been trying to get my daughter (8) to enjoy coding more. She does code.org and Scratch a bit, but we've been experimenting with Python/PyGame. She really likes drawing and games, but it's pretty difficult to teach.

csmeyer 3y ago
An 8 year old would set the Pickcode record by one year, no reason not to try!
sinuhe69 3y ago
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.

_c3ag 3y ago

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

swayvil 3y ago

I was writing pretty cool stuff in c64 basic when I was 10. Just write it (on the dirt-primitive text editor) and run. This seems relatively troublesome.

n_plus_1_acc 3y ago

How dies it compare to https://hedy.org/ https://hedy.org/?

Retr0id 3y ago

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.

sinuhe69 3y ago
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.
- creer 3y ago
  Yeah certainly Scratch is a bit light on debugging support. Or was 6-8 yrs ago.
JCharante 3y ago
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.

e12e 3y ago

Why would I teach this rather than a FOSS platform?

ChilliaDay 3y ago

[dead]

__MatrixMan__ 3y ago

Rather than multiple calls to random, have you considered picking the x and y offsets randomly and then picking the color based on them? It seems like one could tell a better story about why-that-color? If it were a function of the other random choices.

MichaelMoser123 3y ago

Looks great, congrats! I made a small interpreted language on top of nodejs, for the same customers. https://github.com/MoserMichael/jscriptparse https://github.com/MoserMichael/jscriptparse However it turns out that you can't draw too much with node, so I didn't manage to add turtle graphics.

sagarpatil 3y ago

This is awesome. Congratulations. I wanted to introduce my kids to programming so this is very timely. Thanks for building it.

xigency 3y ago

As someone who has worked in this space before, using Blockly to help teach Arduino coding to kids, this looks fantastic! Keep up the good work.

hasoleju 3y ago

My kids don't have English as their native language. Does anyone have experience with teaching kids how to code if they don't speak English yet? Do you only change the variable names to their native language or do you use a language where you can also translate the commands? My assumption is that starting with English commands should work, but I don't know.

drsopp 3y ago

Looks very interesting! An annoying coincidence, however, is that in norwegian, "pick" is a homophone to a vulgar form of the word penis.

somebodythere 3y ago

I'm interested in a direction like this but along the lines of allowing adept programmers to write real programs on a mobile device. Using touchscreen keyboards to write real code is pretty unwieldy.

julia_dor 3y ago

Congratulations on the launch!

canadaduane 3y ago

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.

sirwhinesalot 3y ago

> structured code instead of blocks or node graphs. THANK YOU. I thought I was insane, nobody understood me. I know which tool I'll give my daughter.