Show HN: PickCode – An educational coding environment for students after Scratch (pickcode.io)
I taught myself to code using MIT's App Inventor, so I have an enormous respect for block based languages like App Inventor, Scratch, Snap!, MakeCode, etc. PickCode is my attempt at adding options for students who want to learn more about programming without making the jump to text, or as an alternative to block coding for beginners coming to programming at an older age.
The visual language is meant to lower the barrier to entry to coding but the far more important aspect for me is giving students the ability to make things they're proud of as quickly as possible. A JS/Python API for controlling the chatbot and game engine are in the works.
As of now, there are sample programs to play with and an editor which saves your programs to local storage. Full user accounts, tutorials and administrator accounts for teachers to organize assignments are on their way soon. If you're interested in using PickCode in a classroom or want to discuss feedback, send me an email at charlie@pickcode.io
38 comments
[ 3.6 ms ] story [ 87.6 ms ] thread- Why have a cursor if you can't type? - No errors for "call paint -> color" - The icons aren't useful. Why not have hover "help" messages on the UI, instead of a separate Keypad help (which you have to hover anyways)
Things like missing parentheses and apostrophes can be really off-putting/confusing to new programmers, and this avoids that while still letting the user type something that's effectively real code.
Often a lot of new developers mistakenly believe the best thing for them to do is learn as many languages as possible, when learning the fundamentals of a single language is usually more useful.
To get a job? Probably. To really understand programming? I think learning a wide selection of different paradigms is more helpful.
We've had a similar goal and were trying to create a tool to help students transition from Scratch to Python using an intermediary structured editor that provides scaffolds such as handling syntax.
Here's a research paper that we published on CodeStruct: https://dl.acm.org/doi/10.1145/3501712.3529733
https://cdn.akamai.steamstatic.com/steam/apps/792100/ss_c8f1...
Really fun puzzle-programming game by the way.
https://store.steampowered.com/app/792100/7_Billion_Humans/
Circuits are basically executable flow-charts built in 3D space on iOS, Android, Consoles, PC, or VR. We have millions of Circuits users already and we are growing rapidly. Please send mail to tyler@recroom.com if you are interested in roles.
Here is a spotlight of some Circuits creators for anyone interested in seeing it in action: https://www.youtube.com/watch?v=ajLn2YHLh6U
Here is a link to some Figma assets for anyone just interested in knowing what it looks like: https://www.figma.com/community/file/1070750698042818512
P.S. We have plenty of other roles open if client game dev isn't your thing but you are looking for a new gig: https://recroom.com/careers#openings
Maybe it’s true that younger children are better at understanding blocks than text, but i believe young children are able to learn how to program in text. Plus, your environment makes the relationship between text and blocks very easy to grasp. Once children do learn how to type their code instead of using blocks they’ll be able to code faster, and it will prepare them for real languages like Python.
1. The chat interface is a great way to make the old-school console programs more contemporary, while keeping the ease of programming that interactive model. Though my daughter's first thought was to make a friendly bot, which is a bit beyond what she's ready for. The interactive games like Blackjack offer a much more well-defined goal.
2. On our first attempt to extend Basic Chat, we created something like `call chat.say("what is your favorite color?")`... of course we wanted to change it to ask and store it in a variable, but there didn't seem to be any way to edit it to achieve that.
3. Variables confused us for a while. There's no tooltips on the insert panel itself (only in the thing in the lower-left). The cursor didn't make sense as a variable. And then it inserts ??? and prompts for the next symbol, instead of asking us immediately what variable we want to insert. So... maybe prompting for the variable immediately, and perhaps a better button symbol would help there.
4. A "full screen" player would be good, my daughter wanted to surprise me with the chatbot she wrote herself but couldn't without putting her hands over the screen.
5. Getting ideas for what to make is really important. The scope of all possible programs is too much for a kid to figure out. And if they do they'll probably decide on something infeasible. While learning to come up with tractable problems is an important part of learning to program... well, kids need some scaffolding. Scratch kind of does this with the gallery, though as people have become more proficient at Scratch the games became too good. A smaller well-curated list is helpful. You have some, which is a good start. But like Tree Painting feels like a clever but inaccessible example. I'd bias towards simple, somewhat enjoyable projects that are just begging to be improved. The kid should see it and think "I can do better than that!"
6. Coming from Scratch kids are going to be thinking about Sprites. I don't think there's anything like a Sprite or an easy way to create such a thing.
7. I really like the idea of microworlds: coding playgrounds that explore a particular concept. You have drawing and the chatbot here, and I'd love to see more. Like one to do probabilities: it could make it easy to show bar graphs of the results, but otherwise it would mostly be traditional programming. You could do that now with drawing, but the drawing becomes a distraction.
8. It would be nice if you could put pictures in the chat (as output, not letting the user upload an image). Just to open up some other storytelling. This would also require an image editor. Though Google Slides has an easy way to insert images from a Google Image search and the kids make a lot of use of that, something like that could make it easy to add visuals. Or just a bunch of preloaded iconography.
Anyway, a few thoughts, good luck on the project!
Admittedly I haven't played around with it too much, but I recently attended a keynote by the love Felienne Hermans that was all about her Hedy (https://www.hedycode.com/) "gradual" programming language. There are essentially progressive levels of the language that require more syntax rules (so in the lowest level `print hello, world!` just works™ and in the highest level, it's a syntactically valid subset of python, so you're expected to write `print("hello, world!")` -- and other constructs like functions and conditionals are introduced along the way).
As a shameless self plug, I've spent the past few years working on Pathbird (https://pathbird.com/) which doesn't use visual programming (it uses Julia/Python/R) but is really designed to let instructors create progressive lessons (a lot of use has been in non-CS courses, so imagine a stats professor using inline R code to visualize the central limit theorem). Happy to chat about it (travis@pathbird.com) if anyone is curious or just wants to shoot the shit.
Crashes with error:
[mobx] uncaught error in 'Reaction[Reaction]' Error: a reference of type 'PCRef/ReferencedDeclaration' could not resolve an object with id '__PCGlobalComponentDeclarationpaint'
And because the program appears stored in localStorage, refreshing the page doesn't help and now I'm "permanently" locked out.
(of course I can clear my LS).
Looks awesome, works so nice and neat! Especially impressive mobile support.