Shelly – a programming language to draw in the browser

by pjan • 6 years ago

138 40 6 years ago

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!

metalliqaz• 6 years ago

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.

th0ma5• 6 years ago

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.

thesuperbigfrog• 6 years ago

Python has turtle graphics:

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

manojlds• 6 years ago

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

lewisjoe• 6 years ago

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

They were magical back then.

082349872349872• 6 years ago

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

grugagag2• 6 years ago

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

a_imho• 6 years ago

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.

nitnelave• 6 years ago

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

vlz• 6 years ago

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.

piracy1• 6 years ago

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.

Wowfunhappy• 6 years ago

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

aero31aero2• 6 years ago

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!

kashishgrover2• 6 years ago

WHERE IS THE RETURN VALUE, LEBOWSKI?

adamw1pl6• 6 years ago

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.

aero31aero2• 6 years ago

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.

thescribbblr• 6 years ago

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

ntnlabs• 6 years ago

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

shadykiller• 6 years ago

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

adamw1pl6• 6 years ago

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

agigao2• 6 years ago

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

metrokoi2• 6 years ago

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.

agigao2• 6 years ago

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

m-ueberall• 6 years ago

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

adamw1pl6• 6 years ago

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.

metrokoi2• 6 years ago

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.

kwasson• 6 years ago

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]

adamw1pl6• 6 years ago

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

richk449• 6 years ago

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.

bshimmin• 6 years ago

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.

adamw1pl6• 6 years ago

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

mannschott• 6 years ago

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!

BiteCode_dev• 6 years ago

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.

thosakwe• 6 years ago

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

grugagag2• 6 years ago

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

fictorial• 6 years ago

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

Shelly – a programming language to draw in the browser

Related Stories