Show HN: Atto – BASIC computer that runs in the browser
jamesl.me
jamesl.me
You can get help by using the `help` command, and we have many tutorials to get you started with, in addition to a command reference. Whilst our documentation is still work-in-progress, your feedback is most welcome — let me know what you think is good about the documentation, but also what you think could be improved, too.
atto is open source, so feel free to check out (and maybe star‽) the GitHub repo: https://github.com/James-Livesey/atto
There's also an official Twitter account (with a bot coming very soon™ — edit: it should all work now), so be sure to follow it for updates: https://twitter.com/codeurdreams
I've been very impressed with Gambas if anyone's looking for a more mature BASIC environment on Linux or elsewhere:
http://gambas.sourceforge.net/en/main.html
Bindings and UIs enough that it'd be a while before you really needed to break out into another language.
I was thinking it would be quite fun to hook up a USB floppy disk reader to my computer and save/load atto programs the oldscool way... Possibly could use one of those backup tape drives, too!
eg. https://jamesl.me/atto/?code=10%20print%20%22Hello%2C%20Hack...
Edit: Funny to hear that you still read $ as string! Still kept that tradition in atto, though the use of $ on the end of variables is optional (variables with $ on the end will be casted to string, but sigil-less variables can be any type. % is used to cast to a number).
In my language it is a string, too. But otherwise it is only widely related to BASIC. It is also child-friendly and runs in the browser.
atto can't run in this browser :(
Unfortunately, your browser doesn't support the features that are required to run atto. If you're on mobile, try using atto on a desktop computer. Otherwise, please use the latest version of Chrome or Firefox, which are known to work with atto.
If you're using Safari, then it's doubtful that Apple will ever implement the required features due to their constant reluctance to modernise their browser. If you work for Apple/are on the WebKit dev team, please implement lookbehind in regex so we can make atto work for everyone!
The XRegExp[1] library can be a great option in these situations if you're okay adding another dependency to your project to make up for Apple's negligent shortcomings...
[1]: https://xregexp.com/
edit: To be clear: I get not supporting ridiculous stuff like WebMIDI or WebBluetooth and maybe more obscure WebAudio features. But not supporting free formats? Not supporting WASM streaming, regex features, lagging on object insertion order for years? Safari feels like it only ever follows standards begrudgingly.
This is on Firefox. It doesn't seem to have those problems on Chrome.
Makes me feel all warm and tingly with nostalgia, though.
Testing atto myself in Firefox seems to be consistent when I type in sentences, just that there's a bit of rendering delay which may feel a bit unnatural. Of course, it's hard for me to investigate how the problem manifests for you; but is it basically like this for you?
Doing that on one list as 10 print "Hello world" ; goto 10 doesn't work as the semicolon seems to be misinterpreted as part of the PRINT statement rather than separating multiple statements as most BASICs did. Edit: my memory was wrong - it should be :. It's been a while...
The END keyword seems to be missing. Simple loops using IF don't seem to work, and I'm not sure why.
`if`/`end` _should_ work; try out this demo to see it in action:
https://jamesl.me/atto/?code=10+num%3D0%0A20+if+num+mod+2%3D...
If you press Esc and then run `list`, you should be able to see the code behind this demo. More info about `if` and many other control flow statements are available under `help` > Command reference > Control flow commands.
You can also do some one-liners, too: https://jamesl.me/atto/?code=10%20num%3D0%0A20%20if%20num%20...
Though not precisely the same as some of the original BASIC syntax, I've made adaptations so that `if` works on multiple lines (instead of having to make multiple `goto` statements), much like modern PLs.
10 i = 0 20 print "i =", i 30 i = i + 1 40 if i < 20 then 20
I note that if I use i% to force it to be an integer, then it works. Quite a few BASIC implementation defaulted to floating point back in the '80s if the type wasn't explicitly specified.
This has brought back some memories. =-) AmigaBASIC was rather nice as it had primitives for dealing with the creation of windows and dealing with mouse input events. That and QuickBASIC kept me occupied for many, many hours as a kid.
* It's simple, really simple. No fluff.
* Help in RH margin still leaves enough room for the main event whilst being available
* The main interface is reminiscent of prior BASICs but has been modernised
* Is the cursor too cool ... ?
* Overall, it looks gorgeous and is a pleasure to use
When you pick a Help path, there is a hyperlink "Guide" to return at the top but I think you need a really obvious Help navigation thing with buttons. You click a big coloured button to pick a Help path so a button should return you to the start. To be fair once you get it, the return links are tiny and unobtrusive.If Help could be popped out into a new tab/window then that would make multi-screen use work well.
BASIC is a bit odd nowadays but it is all starting to come back. The "I've never" guide could do with how to delete a line (type the number and hit enter)
Great job.
(I still have my original C-64. It now has a USB interface!)
Yeah, I do agree that some of the navigation can be quite confusing! As you say, I might add buttons to go to the guide's root or to close the guide and get back to coding.
> If Help could be popped out into a new tab/window then that would make multi-screen use work well.
That's not a bad idea! I might even add a print button so you can browse the guide old-school style!
> BASIC is a bit odd nowadays but it is all starting to come back. The "I've never" guide could do with how to delete a line (type the number and hit enter)
That's some good advice, too. I did mention it in the Scratch/Python howto, but it's definitely a good idea to introduce that one to new coders, too! Having done a bit of UX testing (AKA letting my friends who've never used BASIC before use atto), there have been moments where they have wondered things such as, "why does it go 10, 20, 30...?" and "how do I delete a line?".
> Great job.
Thanks for your compliments and feedback!
> (I still have my original C-64. It now has a USB interface!)
Very nice! I've got an old Amstrad CPC 464 lying around somewhere. Hours of fun (especially with loading times), and we've got a whole tub of cassettes with games/programs which may or may not still work!
---
PS. Fun fact — the caret changes colour depending on the context. It's pink when you're editing your program, and it's blue when your atto program's asking for input!
The BASIC line numbering thing is really odd these days and it may be time to consider putting BASIC to bed. There are several other interpreted languages these days that do a far better job of doing the programming thing for newcomers.
Given how fast machines are these days, the gap between compiled and interpreted (etc) is quite small for trivial programs/apps.
You say caret, I say cursor! I've also just noticed your spelling of colour and that probably explains the ill advised Amstrad confession.
I'm based in Somerset.
It's true that BASIC is aging, however, as we've seen on this HN thread, people do enjoy the nostalgia and it's a great way to introduce newcomers to what it was like in the early days of computing!
Yup, I do say 'cursor'! But I'm British, hence the spelling of colour. I did take extra care to avoid ambiguous command naming in atto by having `bg` and `fg` instead of a `colour` command.
Unfortunately, your browser doesn't support the features that are required to run atto. If you're on mobile, try using atto on a desktop computer. Otherwise, please use the latest version of Chrome or Firefox, which are known to work with atto.
If you're using Safari, then it's doubtful that Apple will ever implement the required features due to their constant reluctance to modernise their browser. If you work for Apple/are on the WebKit dev team, please implement lookbehind in regex so we can make atto work for everyone!”
The editor is in need of some improvement here and there, including times when pressing Home/End doesn't scroll the line to where the caret's at. These are definitely things I'm planning to fix sooner or later! I do agree that there should also be a keyboard shortcuts table, but just FYI, here's a few that exist in atto already:
Ctrl + S: Save program
Ctrl + O: Open program
Esc: Interrupt running program
F1: Open/close help guide
F5: Execute current program
F11: Enter/exit fullscreen (interface will be adapted for fullscreen viewing by setting pillarboxing/letterboxing background to be black instead of white)
I don't know the name for that sort of completeness.
The interface of some 80's home computers was surprisingly productive. A primitive form of completion was already implemented on ZX Spectrum (I think): you simply pressed a key and it automatically completed the BASIC command starting with the corresponding character.
That was more than completion, you were actually entering program tokens directly with no lexing at all. A bit like programming in Scratch today where you're actually building an entire AST visually by snapping blocks together, so you can also dispense with parsing because only certain block shapes will "fit" visibly in a given role.
- Syntax highlighting, to make code easier to read
- Typing `edit` followed by the line number, and then pressing Enter, will bring up the line you wish to edit. Press Enter to then save that line
- Use the Up/Down arrow keys to go to previous lines and edit them. Moving off the line will save it. This can also be used after running your program since it'll skip past the output and find the previously-entered program line. Using arrow keys will also scroll the screen up/down, too
- Typing `list` will bring up the full program, and you can specify a range of lines to list, such as `list 20-100`
- The `renum` command will renumber all program lines as multiples of 10, and additionally will modify all references to lines in `goto` and `gosub` commands
It is also possible to use the `import` and `export` commands (or Ctrl+O and Ctrl+S) to save/load your program to a .atto file. That way, you can edit your code in your favourite text editor!
10 print "Hello, world!"
20 goto 10
run
Also: What is the tech stack? Which basic version are you emulating?But it should be 20 goto 10 if you want to print the same text again and again.
10 PRINT "OK"
20 GOTO 1
That reports an error "Cannot go to a nonexistant line". I think "real" BASIC interpreters would fall-through to the 10-line. I know my own toy BASIC does:https://github.com/skx/gobasic
Edit: Have reported issue, so it doesn't get lost in this thread.
There are some drawing commands, getpixel, etc.