13 ms·

Show HN: A modern BASIC-like teaching and learning programming language

76 points by chkas 7y ago

ggambetta 7y ago
Love this! Reminds me of my first attempts at programming on a ZX Spectrum when I was 5 or so. It's hard to beat the simplicity and immediacy of writing a few lines of code and having a simple physics simulation (the bouncing ball example here). I can see this being extremely popular and useful to kids!
- leanthonyrn 7y ago
  Thank you for your work. When trying to teach my child basic coding concepts along with their math homework, the barrier often is the IDE. The web-based staring point is incredibly useful. Fire up the web browser and show the math example is excellent. I have started using the web-based Pyret with my 9-year-old. As we do her math, we mirror the math and geometry problems and solve them in the browser environment. The simplicity to code, run, eval is key. https://www.pyret.org https://www.pyret.org I will give Easylang a try on her next set of problems. Strong Work!
  - buckminster 7y ago
    Paragraphs quoted like this are unreadable. Please don't.
- stevekemp 7y ago
  I started programming on a ZX Spectrum: https://blog.steve.fi/how_i_started_programming.html https://blog.steve.fi/how_i_started_programming.html And I had a lot of fun recently writing a simple BASIC interpreter, largely inspired by Sinclair's basic: https://github.com/skx/gobasic https://github.com/skx/gobasic I'm pretty pleased with the ability to write images, via a browser-editor, even if it is static and not animated.
deleted 7y ago
[deleted]
thewebcount 7y ago
This is a great idea! I wonder, though, if it would be easier if you avoided computerese in your naming? Keywords like "func", "subr", and "str_chars" are part of what makes people's heads spin when they first look at code. If they were just named "function", and "subroutine", and "character_string" (or just "string" or "characters") it would be a little harder to type, but much much easier to read. And you know what they say – you'll read a lot more code than you write. Other than that, this looks really nice. Nice work!
- chkas 7y ago
  For example, "func" is also used in other programming languages. I think frequently used keywords should be shorter. It is then less to type and IMO the code is then also more readable.
  - empath75 7y ago
    Yeah but the point here is to introduce people to programming concepts and using ‘plain English’ words reduces a little friction for people.
    - chkas 7y ago
      Young people quickly find abbreviations for things they often write: BTW, LOL, IMHO... So it should be no problem to understand "func" as "function".
      - empath75 7y ago
        Kids are unlikely to know what a function is, anyway.
      - skanga 7y ago
        Just allow BOTH. In the documented examples shown print the whole word like FUNCTION. But also allow it to be abbreviated to FUNC, FUNCT or FUNCTIO!
ape4 7y ago
Not sure I would use `print` if I was redesigning it. But, of course, its ingrained in countless languages.
- tomcam 7y ago
  May I ask why? To me print is one of the loveliest, most intuitive of concepts in BASIC. I'm guessing it's because there's normally no actual printer involved? Maybe replace it with "text" or something?
  - ape4 7y ago
    Just because there's no printer.
- erezsh 6y ago
  'write' is probably a better term for that
severak_cz 7y ago
looks like modern version of Logo programming language.
- beagle3 7y ago
  Of Basic. One of the example implements turtle graphics (but logo is much more Lispy than basic)
beagle3 7y ago
This is awesome - I just started looking for something like this, for my kid. Having taught programming before, one thing that many people find confusing at first is using "=" for both assignment and equality; statements like "x = x + 1" make no sense as a math equation. I think supporting (but not requiring) "let" (or equivalently "make" or "set") helps go over that hump, although I last taught basic to someone 30 years ago... e.g., if you accept let a = 3 or make a = 3 makes it a little easier to grok let x = x + 1 (although the x on the left is "now" and the x on the right is "before"). Alternatively, using something like "x <- x + 1" is much clearer, and just as clear for "x <- 3" (especially with a right font or glyph). Unfortunately, there is no single ascii character/glyph that intuitively conveys assignment; K uses ':' which is ok, Pascal uses ':=', neither of which is good for Basic and the like, I think.
- chkas 7y ago
  The assignment with a "let" would probably be really easier to understand. On the other hand, in most programming languages today, assignment is done with the "equal" symbol. This makes the code less noisy. Since the comparison operator is only used for "while" or "if", the risk of confusion is not so great.
  - beagle3 7y ago
    Most definitely agree - once you get over it, it's not confusing it all. But statements such as "x = x + 1" ARE confusing to newcomers, from my experience. Essentially all Basic interpreters in the 80s accepted "let" to start assignment, but did not require it. Some (e.g. ZX Spectrum Basic) did require it.
    - K0SM0S 7y ago
      Yes, the problem is not that a seasoned practitioner cannot internalize just about any quirk, typically historical. The problem is that a first-time learner already has their mind full with information (we can only ever hold ~7 items in working memory, cognitively, so make sure each one counts when teaching anything).
erehweb 7y ago
What's the advantage of this over BASIC?
olav 7y ago
Nice! I love the re-invention of Logo-like textual languages. Just a few days ago I came across MOOSE language, used by Amy Bruckman in her online community. A lost art it seems.
DeathArrow 7y ago
This reminds me of Logo: https://turtleacademy.com//lessons https://turtleacademy.com//lessons Logo was invented in 1967
- chkas 7y ago
  The logo turtle uses relative position and orientation for graphics. To do this with easylang you need a bit of trigometry. https://easylang.online/ide/?code=%23%20turtle%20graphics%0A%23%20%0Afloatvars%0Adeg%20%3D%200%0Ax%20%3D%2050%0Ay%20%3D%2050%0Adown%25%20%3D%200%0Amove%20x%20y%0Afunc%20forward%20n%20.%20.%0A%20%20x%20%2B%3D%20cos%20deg%20*%20n%0A%20%20y%20%2B%3D%20sin%20deg%20*%20n%0A%20%20if%20down%25%20%3D%201%0A%20%20%20%20line%20x%20y%0A%20%20else%0A%20%20%20%20move%20x%20y%0A%20%20.%0A.%0Afunc%20turn%20a%20.%20.%0A%20%20deg%20%2B%3D%20a%0A.%0A%23%20%0Acall%20forward%2035%0Acall%20turn%2090%0Adown%25%20%3D%201%0Afor%20i%25%20range%2018%0A%20%20call%20forward%2012%0A%20%20sleep%200.1%0A%20%20call%20turn%2020%0A.%0A https://easylang.online/ide/?code=%23%20turtle%20graphics%0A...
- thesuperbigfrog 7y ago
  Python also has a Logo-like Turtle graphics module in the standard library: https://docs.python.org/3.3/library/turtle.html?highlight=turtle https://docs.python.org/3.3/library/turtle.html?highlight=tu...
  - K0SM0S 7y ago
    It's used in the book Think Python by Allen Downey. https://greenteapress.com/wp/think-python-2e/ https://greenteapress.com/wp/think-python-2e/ (Case Study: interface design http://greenteapress.com/thinkpython2/html/thinkpython2005.html http://greenteapress.com/thinkpython2/html/thinkpython2005.h...) The book is very good for first-time learners IMHO.
- dubya 7y ago
  For anyone looking for logo, FMSLogo seems to work well under Wine, and Racket has a logo available, but I'm not sure how complete. Has anyone looked at Computer Science Logo Style (http://people.eecs.berkeley.edu/~bh/ http://people.eecs.berkeley.edu/~bh/)?
WoodenChair 7y ago
This is very similar to a Mac app I created called SeaTurtle—seems a mesh between BASIC and Logo brings back a kind of nostalgia in people who want to teach programming to kids that learned it in the '80s: https://oaksnow.com/seaturtle/ https://oaksnow.com/seaturtle/
azhenley 7y ago
Nice timing. Last week I made a very simple BASIC compiler to show my undergrad students how to make a compiler: https://github.com/AZHenley/teenytinycompiler https://github.com/AZHenley/teenytinycompiler The write-up is coming in a few days.
- WoodenChair 7y ago
  It's a great assignment. We do almost the same exact assignment in my Emerging Languages class (the grammar is almost identical). We write an interpreter for a version of TinyBASIC called NanoBASIC in Swift.
  - azhenley 7y ago
    Nice! Yep, I started with the Tiny BASIC grammar but modified it to look a bit more modern and to be easy to extend for more complex expressions.
mjbrusso 7y ago
What about compile to LLVM bitcode?
- chkas 7y ago
  It runs in the browser where the code is currently interpreted. I have already thought about compiling "fast functions" to WASM byte code.
_curious_ 7y ago
Neat, thanks for making & sharing!
aldanor 7y ago
Just tried it out, here's a little program that plots a fractal: https://bit.ly/3a5MfaV https://bit.ly/3a5MfaV (shortened the url since it's quite long containing all the code) Few comments: - It would be nice to have a proper full reference of the language (maybe it exists but I couldn't find it), with all details put together in one document. I had to dig through tons of tutorials just to see how floats are defined. - How do you add comments in the code?... - The editor removes empty lines - so if you try to separate logical blocks/paragraphs you can't do it. This coupled with lack of comment support hurts code readability. Maybe it could collapse >1 empty lines to just 1 empty line inside. - Defining floats: if you have a program that deals with both floats and has int-based for loops, you can't use "floatvars" if I understand correctly. Now, having to add "#" as a suffix for each float variable greatly hurts readability since you now have lines like "z# = x# * x# + y# * y#" - Editor - tries to be too smart at times which hurts basic editing functionality like undo; if I add a line and type something, the cmd-z doesn't remove that line, it only removes text in the line. Also, if I type something syntactically wrong, the editor first tries to format/transform the code and only then shows an error but doesn't then return the code to what it looked like; this makes it hard to fix errors. - Re: editor, why just not use a mature engine like CodeMirror? (and add your own syntax highlighting / hints, etc) - Why all those "." instead of "end" in loops/ifs inside functions? This is not explained anywhere and looks a bit obscure in tutorials - Color system with 000-999: a lot of boilerplate to deal with it, troublesome to create palettes and it's only 10 bits of color. Might be helpful to have a color function that takes three separate ints (or even floats 0.0-1.0, opengl-style). But generally, kudos, good job :)
- chkas 7y ago
  Well done, I'm impressed. You raised some important and also some sore points. @documentation: there is still some work to be done. The tutorial "Code snippets" contains most things. @comments, empty lines: lines beginning with # are comments. Empty lines are not possible, but empty comment lines. @floats and ints: by default variables are integer and floats are marked with #. With floatvars variables are floats and integer are marked with % - as in some BASIC variants. @editor: this is a bit strict, but with beginners the concept works quite well. On enter, the code is parsed down to the current line and returned "correctly" formatted. Unfortunately "undo" does not work well. @end: the dot is quickly typed and also makes the code more clear (a bit like in Python) - since the dot seems strange to many people, I added end as an alternative. @color: these 3 digit numbers are short, and sufficient for most cases and more flexible than color names. There are also built-ins to fine-tune the colors (0.0-1.0) (color_red, ...) https://easylang.online/apps/mandelbrot.html https://easylang.online/apps/mandelbrot.html

76 points by chkas 7y ago

Love this! Reminds me of my first attempts at programming on a ZX Spectrum when I was 5 or so. It's hard to beat the simplicity and immediacy of writing a few lines of code and having a simple physics simulation (the bouncing ball example here). I can see this being extremely popular and useful to kids!

leanthonyrn 7y ago
Thank you for your work. When trying to teach my child basic coding concepts along with their math homework, the barrier often is the IDE. The web-based staring point is incredibly useful. Fire up the web browser and show the math example is excellent. I have started using the web-based Pyret with my 9-year-old. As we do her math, we mirror the math and geometry problems and solve them in the browser environment. The simplicity to code, run, eval is key. https://www.pyret.org https://www.pyret.org I will give Easylang a try on her next set of problems. Strong Work!
- buckminster 7y ago
  Paragraphs quoted like this are unreadable. Please don't.
stevekemp 7y ago
I started programming on a ZX Spectrum: https://blog.steve.fi/how_i_started_programming.html https://blog.steve.fi/how_i_started_programming.html And I had a lot of fun recently writing a simple BASIC interpreter, largely inspired by Sinclair's basic: https://github.com/skx/gobasic https://github.com/skx/gobasic I'm pretty pleased with the ability to write images, via a browser-editor, even if it is static and not animated.

deleted 7y ago

[deleted]

thewebcount 7y ago

This is a great idea! I wonder, though, if it would be easier if you avoided computerese in your naming? Keywords like "func", "subr", and "str_chars" are part of what makes people's heads spin when they first look at code. If they were just named "function", and "subroutine", and "character_string" (or just "string" or "characters") it would be a little harder to type, but much much easier to read. And you know what they say – you'll read a lot more code than you write. Other than that, this looks really nice. Nice work!

chkas 7y ago
For example, "func" is also used in other programming languages. I think frequently used keywords should be shorter. It is then less to type and IMO the code is then also more readable.
- empath75 7y ago
  Yeah but the point here is to introduce people to programming concepts and using ‘plain English’ words reduces a little friction for people.
  - chkas 7y ago
    Young people quickly find abbreviations for things they often write: BTW, LOL, IMHO... So it should be no problem to understand "func" as "function".
    - empath75 7y ago
      Kids are unlikely to know what a function is, anyway.
    - skanga 7y ago
      Just allow BOTH. In the documented examples shown print the whole word like FUNCTION. But also allow it to be abbreviated to FUNC, FUNCT or FUNCTIO!

ape4 7y ago

Not sure I would use `print` if I was redesigning it. But, of course, its ingrained in countless languages.

tomcam 7y ago
May I ask why? To me print is one of the loveliest, most intuitive of concepts in BASIC. I'm guessing it's because there's normally no actual printer involved? Maybe replace it with "text" or something?
- ape4 7y ago
  Just because there's no printer.
erezsh 6y ago
'write' is probably a better term for that

severak_cz 7y ago

looks like modern version of Logo programming language.

beagle3 7y ago
Of Basic. One of the example implements turtle graphics (but logo is much more Lispy than basic)

beagle3 7y ago

This is awesome - I just started looking for something like this, for my kid. Having taught programming before, one thing that many people find confusing at first is using "=" for both assignment and equality; statements like "x = x + 1" make no sense as a math equation. I think supporting (but not requiring) "let" (or equivalently "make" or "set") helps go over that hump, although I last taught basic to someone 30 years ago... e.g., if you accept let a = 3 or make a = 3 makes it a little easier to grok let x = x + 1 (although the x on the left is "now" and the x on the right is "before"). Alternatively, using something like "x <- x + 1" is much clearer, and just as clear for "x <- 3" (especially with a right font or glyph). Unfortunately, there is no single ascii character/glyph that intuitively conveys assignment; K uses ':' which is ok, Pascal uses ':=', neither of which is good for Basic and the like, I think.

chkas 7y ago
The assignment with a "let" would probably be really easier to understand. On the other hand, in most programming languages today, assignment is done with the "equal" symbol. This makes the code less noisy. Since the comparison operator is only used for "while" or "if", the risk of confusion is not so great.
- beagle3 7y ago
  Most definitely agree - once you get over it, it's not confusing it all. But statements such as "x = x + 1" ARE confusing to newcomers, from my experience. Essentially all Basic interpreters in the 80s accepted "let" to start assignment, but did not require it. Some (e.g. ZX Spectrum Basic) did require it.
  - K0SM0S 7y ago
    Yes, the problem is not that a seasoned practitioner cannot internalize just about any quirk, typically historical. The problem is that a first-time learner already has their mind full with information (we can only ever hold ~7 items in working memory, cognitively, so make sure each one counts when teaching anything).

erehweb 7y ago

What's the advantage of this over BASIC?

olav 7y ago

Nice! I love the re-invention of Logo-like textual languages. Just a few days ago I came across MOOSE language, used by Amy Bruckman in her online community. A lost art it seems.

DeathArrow 7y ago

This reminds me of Logo: https://turtleacademy.com//lessons https://turtleacademy.com//lessons Logo was invented in 1967

chkas 7y ago
The logo turtle uses relative position and orientation for graphics. To do this with easylang you need a bit of trigometry. https://easylang.online/ide/?code=%23%20turtle%20graphics%0A%23%20%0Afloatvars%0Adeg%20%3D%200%0Ax%20%3D%2050%0Ay%20%3D%2050%0Adown%25%20%3D%200%0Amove%20x%20y%0Afunc%20forward%20n%20.%20.%0A%20%20x%20%2B%3D%20cos%20deg%20*%20n%0A%20%20y%20%2B%3D%20sin%20deg%20*%20n%0A%20%20if%20down%25%20%3D%201%0A%20%20%20%20line%20x%20y%0A%20%20else%0A%20%20%20%20move%20x%20y%0A%20%20.%0A.%0Afunc%20turn%20a%20.%20.%0A%20%20deg%20%2B%3D%20a%0A.%0A%23%20%0Acall%20forward%2035%0Acall%20turn%2090%0Adown%25%20%3D%201%0Afor%20i%25%20range%2018%0A%20%20call%20forward%2012%0A%20%20sleep%200.1%0A%20%20call%20turn%2020%0A.%0A https://easylang.online/ide/?code=%23%20turtle%20graphics%0A...
thesuperbigfrog 7y ago
Python also has a Logo-like Turtle graphics module in the standard library: https://docs.python.org/3.3/library/turtle.html?highlight=turtle https://docs.python.org/3.3/library/turtle.html?highlight=tu...
- K0SM0S 7y ago
  It's used in the book Think Python by Allen Downey. https://greenteapress.com/wp/think-python-2e/ https://greenteapress.com/wp/think-python-2e/ (Case Study: interface design http://greenteapress.com/thinkpython2/html/thinkpython2005.html http://greenteapress.com/thinkpython2/html/thinkpython2005.h...) The book is very good for first-time learners IMHO.
dubya 7y ago
For anyone looking for logo, FMSLogo seems to work well under Wine, and Racket has a logo available, but I'm not sure how complete. Has anyone looked at Computer Science Logo Style (http://people.eecs.berkeley.edu/~bh/ http://people.eecs.berkeley.edu/~bh/)?

WoodenChair 7y ago

This is very similar to a Mac app I created called SeaTurtle—seems a mesh between BASIC and Logo brings back a kind of nostalgia in people who want to teach programming to kids that learned it in the '80s: https://oaksnow.com/seaturtle/ https://oaksnow.com/seaturtle/

azhenley 7y ago

Nice timing. Last week I made a very simple BASIC compiler to show my undergrad students how to make a compiler: https://github.com/AZHenley/teenytinycompiler https://github.com/AZHenley/teenytinycompiler The write-up is coming in a few days.

WoodenChair 7y ago
It's a great assignment. We do almost the same exact assignment in my Emerging Languages class (the grammar is almost identical). We write an interpreter for a version of TinyBASIC called NanoBASIC in Swift.
- azhenley 7y ago
  Nice! Yep, I started with the Tiny BASIC grammar but modified it to look a bit more modern and to be easy to extend for more complex expressions.

mjbrusso 7y ago

What about compile to LLVM bitcode?

chkas 7y ago
It runs in the browser where the code is currently interpreted. I have already thought about compiling "fast functions" to WASM byte code.

_curious_ 7y ago

Neat, thanks for making & sharing!

aldanor 7y ago

Just tried it out, here's a little program that plots a fractal: https://bit.ly/3a5MfaV https://bit.ly/3a5MfaV (shortened the url since it's quite long containing all the code) Few comments: - It would be nice to have a proper full reference of the language (maybe it exists but I couldn't find it), with all details put together in one document. I had to dig through tons of tutorials just to see how floats are defined. - How do you add comments in the code?... - The editor removes empty lines - so if you try to separate logical blocks/paragraphs you can't do it. This coupled with lack of comment support hurts code readability. Maybe it could collapse >1 empty lines to just 1 empty line inside. - Defining floats: if you have a program that deals with both floats and has int-based for loops, you can't use "floatvars" if I understand correctly. Now, having to add "#" as a suffix for each float variable greatly hurts readability since you now have lines like "z# = x# * x# + y# * y#" - Editor - tries to be too smart at times which hurts basic editing functionality like undo; if I add a line and type something, the cmd-z doesn't remove that line, it only removes text in the line. Also, if I type something syntactically wrong, the editor first tries to format/transform the code and only then shows an error but doesn't then return the code to what it looked like; this makes it hard to fix errors. - Re: editor, why just not use a mature engine like CodeMirror? (and add your own syntax highlighting / hints, etc) - Why all those "." instead of "end" in loops/ifs inside functions? This is not explained anywhere and looks a bit obscure in tutorials - Color system with 000-999: a lot of boilerplate to deal with it, troublesome to create palettes and it's only 10 bits of color. Might be helpful to have a color function that takes three separate ints (or even floats 0.0-1.0, opengl-style). But generally, kudos, good job :)

chkas 7y ago
Well done, I'm impressed. You raised some important and also some sore points. @documentation: there is still some work to be done. The tutorial "Code snippets" contains most things. @comments, empty lines: lines beginning with # are comments. Empty lines are not possible, but empty comment lines. @floats and ints: by default variables are integer and floats are marked with #. With floatvars variables are floats and integer are marked with % - as in some BASIC variants. @editor: this is a bit strict, but with beginners the concept works quite well. On enter, the code is parsed down to the current line and returned "correctly" formatted. Unfortunately "undo" does not work well. @end: the dot is quickly typed and also makes the code more clear (a bit like in Python) - since the dot seems strange to many people, I added end as an alternative. @color: these 3 digit numbers are short, and sufficient for most cases and more flexible than color names. There are also built-ins to fine-tune the colors (0.0-1.0) (color_red, ...) https://easylang.online/apps/mandelbrot.html https://easylang.online/apps/mandelbrot.html