Shelly – a programming language to draw in the browser | Hacker News Reader

Shelly – a programming language to draw in the browser

shelly.dev

138 pointspjan40 comments

Ah, this brings back memories from my childhood. The first programming language I ever used was Logo https://en.wikipedia.org/wiki/Logo_(programming_language). This was sometime back in 2002-2003 when I was 7 or 8 years old. We had very basic PCs in my school, many of which were purely DOS based.

This is a great tool to teach kids programming!

I remember the turtle game, as well as lego logo. It must have been something like 1991.

The teachers at my school were just completely clueless at teaching programming or anything to do with computers. We would just run through work sheets that told you what to type. Hardly anyone got any real instruction. It wasn't until DOOM came out that I got motivated to self-teach.

Logo was I think the second language I learned after Commodore Basic but the on the C64. The third was probably Gary Kitchen's Game Maker scripting. This was all mid 80s. Logo though did feel transformative to me.

Python has turtle graphics:

https://docs.python.org/3/library/turtle.html

It was my first programming language as well, here in India. Around 1996s had it in school.

Brings back memories of those huge monitors with the turtle on the screen ;)

They were magical back then.

Not only does "Shelly" reference the LOGO turtle, but LOGO itself was probably referencing Grey Walter's tortoise.

https://www.youtube.com/watch?v=wQE82derooc

Same here. Logo was my first programming language at 9 or 10 back in 1989 in eastern Europe. Long live Logo. Kids nowadays ought to have a similar intro

Logo was such a common denominator when I was in primary. Two decades later I was sent a resume with Logo skills listed, it was an obvious inside joke, but picking up on it ensured we started off on the very right foot.

I remember when teaching a subset of LOGO that we wanted a cool input program for students. So I built reverse logo [1] to turn an image (black-and-white, contiguous) into a logo program that draws it.

[1]: https://github.com/nitnelave/reverse-logo

> This is a great tool to teach kids programming!

One would think so! It was taught at our school (didn't take the course myself, about 15 years old at the time) and I only remember my classmates complaining, that it was boring. Some of them wanted to learn "real programming" instead. Drawing shapes with a turtle felt overly childish and pedagogic even then.

I think it's a good introduction but would be very boring to stay focused on for any length of time. But my first thought upon seeing this was if someone, especially a younger person wanted to go from 0 knowledge of programming to a little bit, just get the idea of what it's like so they can see it's not magic, this would be a great start.

I think 15 is too old to teach Logo. It works better when the kids are ten years old or so.

I was looking to file some issues with the project but couldn't find a repo. Guess I'm too used to expecting things to be open source.

Anyway, I'm hoping the authors see this. I tried Shelly for a while and here's what I think:

1. The tutorial needs background. Its text displayed over more text and that's tough to read. For the first point in the tutorial, I couldn't locate where it was visually and had to carefully read what the various parts of the screen were saying.

2. Make the editor stop complaining while I'm writing something. Its too aggressive and made me immediately think of https://i.redd.it/nygb741tho951.gif.

Overall, I like the concept. I'd have wished the syntax was more like javascript so someone learning this could more easily translate their skills to other parts of the web, but I guess we have to compromise that for the nostalgia and simple commands like `right 90` etc. I love this!

WHERE IS THE RETURN VALUE, LEBOWSKI?

Thanks for the feedback!

1. the background should be almost-opaque, with very little transparency. Can you share which browser/OS? Probably some missing CSS :)

2. Ha :D Maybe a grace period? Did you mostly mind the squiggly underline errors, or the red box that appears at the bottom? Giving feedback soon enough but not being aggressive is a delicate balance, there's probably room for improvement here.

1. FF 77 on Arch, with ublock origin enabled. I'd still say almost-opaque is a bad idea for text-over-text. Were it an image, an opacity: 0.5+ value would be fine, but text is very distracting even at opacity: 0.8 or so.

2. Maybe that could work. A red underline is fine but the error at the bottom is the biggest thing. Instead of switching between neutral/error state, why don't you experiment with working/neutral state? If the code is fine, show a green tick at the bottom, else just show the error with grey color and a grey icon so it's visible but not attention grabbing. On the other hand, you'd get the advantage of getting people hooked with getting the code back to green. Positive reinforcement.

I wonder why there's not a single reference to Logo (see the Wikipedia topic mentioned in another topic) to be found?

No reason :) The language is of course Logo-inspired. Once we'll have an "About" page or sth like that, we'll mention Logo of course.

Shelly looks cool, thanks.

There was a discussion on HN a few years back about Seymour Papert’s Mindstorms: Children, Computers, and Powerful Ideas (1980), which may be relevant if you're interested in the history of Turtle and Logo. [1]

I've been collecting resources for self-directed programming/learning that kids can use for at-home, project-based learning. Some family members are looking for ideas for their children.

I'll playtest it with a young learner and see how far they get through the tutorial.

[1] https://news.ycombinator.com/item?id=18361665

[edited for clarity]

Thanks! Would be great to get feedback once you get an occasion.

The tutorial is only a start for what we are planning, so this is an area we'd like to work on next. Hence any pointers or ideas are welcome :)

Nicely done tool/site. Is there a play button to make the turtle start at the beginning and follow the path? Or pause and speed commands? I'm expecting that watching a turtle move is going to be key to getting my son into this.

Not yet, but that's one of the features we want to add after this initial release. Thanks for the feedback!

What a blast from the past! Logo was my first exposure to programming in elementary school (1981-1986). This was fun to play with and the tutorial is well done. I was surprised by the lack of any kind of "run" button, but I think this was a good choice for this kind of learning environment. Neat!

Looks like a Turtle Zofka I had in my basic school really long time ago :) Even the instructions fit! :D

https://archiv.inet.sk/images/user/pastierik/kancelaria/zofk...

Very interesting! I remember programming Logo turtle instructions on iMac G3s. I do wish the author would have provided a repository or at least some information on how it was built. Usually HN users are more interested in how it works than using the actual tool or application.

This looks really great and obviously brings back lots of happy memories!

One little thing - is the opacity scale the wrong way round? I would expect high opacity to mean it's not very transparent and low opacity to mean it's mostly transparent.

Yes, you are right! Funny how this went unnoticed for so long ;) Fixed now.

Fun! https://shelly.dev/p/0ecb4ea6c4ef It can't go beyond level 5 as it has a cap of 50k instructions.

Remembering my childhood. Shelly looks same as Logo. The second language that I learnt after GW-Basic at my school. Thanks to the creator. Will undoubtedly teach this language to my 8 years old nephew. :)

This is really fun, thanks for sharing this with the world. Kids should find this so I'd try to make sure schools/teachers find out about your product. Thanks

This is awesome !! Are there any cool drawings I can take inspiration from ?

We'll be posting some on our twitter (https://twitter.com/shelly_dot_dev) for a start. Plus we'll be expanding the tutorial/help area. Stay tuned :)

Can we please stop calling every new set of rules “a programming language”?

It would be more accurate to call this a programming based drawing tool or a learning tool. The thing that makes this unique is the features and being able to draw in the browser, not the actual language or rules itself.

Thanks for the right wording.

Yeah, the tool is fine, I got nothing against it, just our attitude makes our world more cluttered and fragmented, we lost the way to communicate in programming world at large.

The Mess We're In - Joe Armstrong - https://www.youtube.com/watch?v=lKXe3HUG2l4

I'm not sure I understand your objection. Shelly is a programming language, inspired by Logo, and it also comes with a browser based environment.

Isn't half of the communication problem you're referring to demanding that others use words the way you want them to, as opposed to listening, understanding that language is fluid, and trying to hear what they're saying instead of tell them they're wrong?

Your last paragraph is very important. Approaching life like this makes things so much easier and enjoyable for me.

I'll make the mandatory comment about how this is a case typically better served by a good library than a DSL.

This language is very niche, it will never get good support, tooling, doc, and maintenance.

I know making languages are fun, but unless fun is the main goal and adoption is not, craft a good lib with a clean and simple API.

Adopting this DSL would not be reasonable on the long run.

Comments like these are absolutely useless and contribute nothing to the conversation at all. There are benefits making a language, and people's goal doesn't always have to be "get as many people to use it as possible."

Reply on news.ycombinator.com