73 comments

[ 4.5 ms ] story [ 136 ms ] thread
It's nice that it has instructions, but nobody read the instruction. tl;dr: type "run" to run the program.

  10 print "Hello, world!"
  20 goto 10
  run
Also: What is the tech stack? Which basic version are you emulating?
Forgot about 10 goto 10 eh?
You should find it works! Once you type run, the caret will disappear as the program does nothing infinitely. Press Esc to break the program to carry on!

But it should be 20 goto 10 if you want to print the same text again and again.

Note that there is a bug:

    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.

Yeah, I've since fixed that bug when I saw it on GH Issues! Thanks for the bug report.
I wanted it to be as lightweight as possible, with only a few support libraries to show the Markdown content for docs etc. It's all done with vanilla HTML/CSS/JS and I put the new JavaScript modules functionality to good use to make my project less messy/more maintainable. The BASIC version is actually all custom; it's my own style with a few additions/changes to normal BASIC, and it's all tokenised/parsed/evaluated/executed in my JS code.
Something has gone terribly wrong with the keyboard-handling, half the time it misses a keystroke, or doubles a keystroke, or has very noticeable delay.

This is on Firefox. It doesn't seem to have those problems on Chrome.

Same here on Firefox, I have not tried another browser.

Makes me feel all warm and tingly with nostalgia, though.

Glad to hear that despite the weird behaviour with Firefox, you enjoy the nostalgia! If it helps, if you want to write really long programs, it's possible to create .atto files in a text editor and then import them into atto by pressing Ctrl+O. Writing long programs in atto is nice, too (since you get the syntax highlighting), but of course it's somewhat hard in Firefox at the moment. Chrome/Chromium-based browsers work well with atto, though, since that's my primary testing target (Firefox second, then Safari third if I can be bothered with it!).

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?

Interesting! I've just loaded it up on my latest Firefox and I see what you mean -- there's quite a lot of input lag going on there. I mainly develop in Chrome but I've tested this in Firefox before and it was alright. I better do a bit of bug fixing tomorrow!
The non-display of spaces in Firefox is disconcerting. CTRL-C doesn't work on the quintessential test of 10 print "Hello world" 20 goto 10

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.

I can't help with the IF without seeing what you're trying, but for your other points, press Escape to interrupt a running program, Semicolons are used as string concatenation but you can use colons to separate statements, and STOP is used to halt execution
The spaces issue should now be fixed (see GH PR #7)! If you do a hard reload, it should be much easier to edit now.

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

Thanks... The code I was trying was:

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.

I think it's not lag -- it's that on `keydown`, the value of `hidInput` doesn't yet reflect the new input from the pressed key. Seems like on `input` would do better for that event listener...
Should all be fixed now! See https://github.com/James-Livesey/atto/pull/7 for more details. In the end, using `input` still wasn't sufficient to fix the lag, so instead I 'bodged' the delay before rendering happens by adding a 10 ms wait between keydown and render. But yes, you were right in thinking that `hidInput` wasn't 'ready' for the renderer to get the value of!
On Chrome Mobile it's inputting characters right to left instead of left to right. Bizarre.
When opening in iOS I get this great thoughtful message:

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!

I share the frustration about lookbehind regex not being supported in WebKit.

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/

You just keep running into BS when it comes to supporting Safari. It’s the only browser I’m aware of that’s still maintained that has WebAssembly support but doesn’t support streaming. It’s been years. Not to mention terribly lagging support for free formats. I’ve heard the argument over and over that Safari is good because it’s one of the main remaining contenders to Chrome, but as an iOS user, I’m just about done using Apple products on the whole due to Safari alone. It really does feel like the modern Internet Explorer; that thing you have to support that is consistently worse than its peers. And I don’t even want to bother with its extension ecosystem.

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.

Yup, you've pretty much summed up Safari really well there. I've come across sooo many annoyances when supporting Safari that I do wonder how the developers of the Apple website etc. don't get annoyed at the lack of useful support of their own browser themselves!
I don't imagine they have much say in the matter, alas.
(comment deleted)
Implements BASIC… whines about not having regex features.
It is a modern basic with a ‘80 feel to it.
I dunno about anybody else, but I still read $ in my head as 'string'. Anyway, this is nice, not sure I can quite work out saving and loading, but there's enough here to be nostalgia- and kid-friendly.

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.

Interestingly, the basic CLOAD and CSAVE instructions (load and save to tape) could perhaps be implemented most easily. You don't need anything other than the simple file handling you get in all browsers, via "open" and "save" dialogs.
I imagine people would like a jsfiddle style way of saving things with a url that you could share with others though...
Hence of course the reason why I implemented `share` to share a link to your code!
Ah, that's nice, though a "share" button would make it clear that exists. It's also not mentioned in the guide, so there's not an easy way to know it exists.
It's all there! Try the `import` and `export` commands. Ctrl+O and Ctrl+S work as well, provided that the files end with .atto (unless you set your file open dialog to search for all files). `share` also lets you distribute your code via a copyable link, too!

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!

Try using Ctrl+S and Ctrl+O for file save/load. There's `import` and `export` commands as well to do this, and there's even a `share` command to share your code via a URL!

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

Awesome stuff, just stumbled on your Twitter bot too (apologies if that was premature!)
Yeah, hopefully am going to get it working again today, so fingers crossed there'll be more fun along the way!
Gambas is a good visual/RAD environment, but for more general development you might want to try FreeBASIC, which has very good compatibility with well-known basic's, combined with modern extensions and good interoperability with C-like languages.
You'll feel right at home in Nim, then, where "$" is the "convert to string" operator - "$x" means "a string formatted version of x" regardless of x's type.
Ha, that had never occurred to me but I actually do enjoy Nim. Feels sort of joyful in a way some of the other recent systems languages aren’t, perhaps it’s my nostalgia.
> I still read $ in my head as 'string'

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.

https://easylang.online/ide/

Nice language! Love the syntax too; quite similar to atto, but with a few unique features which really does make it easy to use!
Great, now when I search "atto" the search engine will bring up another thing I'm not looking for.
Love the font and colours. Took me right back to the old spectrum days. I assume this was deliberate - good work!
Thank you! That was exactly what I was opting for — I was looking for a good terminal font for this project which is nice and rounded, and I came across Brass Mono, which seems to fit the job really nicely. Though it unfortunately doesn't contain all of the lovely characters from 80s machine charsets, it'll fallback to your system's monospace font so you can use any Unicode character you like!
Hi there! I'm the creator of this programming language. I've designed this language to resemble the style of the BASIC programming languages of the 80s, but with the modern functionality of today (syntax highlighting, rich editing, fast runtime, runs in browser etc.). It's a bit of a side project of mine, but ultimately I think it's a great way for beginners to learn programming, and for more advanced users to tinker with!

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

The only things you really need to implement in a browser BASIC are PRINT, GOTO, and FOR, because that is all anybody will type into it to try it out. (Some use GOTO, some FOR.)

I don't know the name for that sort of completeness.

That's very true; they're definitely the essentials to any BASIC interpreter! `if` is also very useful as well to do conditional jumps, and so is `input`. With those commands, the possibilities are endless!
Cute, but I am thankful for the modern IDEs. Retyping a full line to fix a line is antiquated.
I remember on the MSX that you could simply scroll up the cursor to the line that must be fixed, re-type just what was need to change and press enter.

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.

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

If so, can one have a visual block lisp … lisp is building ast as well.
You'll find it's very similar in atto! Use the Up/Down arrow keys to go to previous lines, and you'll be able to edit those lines directly. The currently-edited line will be saved when you go to a different line. The display will also scroll if your caret goes past the top/bottom of the terminal, which is handy for editing large atto programs!
This supports a cursor. Press your up arrow to the line you want to edit, and edit in place.
I agree, which is why I have implemented some useful editing features that might make it easier to enter your programs:

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

Yeah, three cheers for modern IDEs like edlin.
You mean modern like Turbo Basic, QuickBasic, HiSoft BASIC, AMOS? :)
Is it only one feature that is missing in safari ? “ 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!”

It's mainly regex lookbehind, but there can also be many other side effects of using Safari over Chrome or Firefox (such as page zooming issues and other rendering stuff, and their disappointing lack of good support for PWAs). The regex lookbehind support problem is the main blocker, though; and really, it should have been implemented _ages_ ago (the WebKit issue for it was made in 2017, and has been open ever since). It's a shame that Safari's the only modern browser which lacks the support for it!
Same message here, Firefox 71.0 on Linux Mint.
I love it!

  * 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!)

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

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!

You have a working Amstrad? I worry for your sanity mate - Ok you didn't mention "working", so I hope it is sleeping with the Old Ones in a safe place and can't do any harm.

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 all working! Well, apart from the reset button for the cassette tape's counter, but that's what inevitably happens with mechanical parts after time.

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.

Works awfully on mobiles
Agreed, however, programming on mobile isn't the most optimal experience in general. atto was mainly built for the desktop, so I'd suggest you try it out on a computer instead of a phone!
I really wish that you explained how to stop the execution. especially when you mentioned the "20 goto 10" example. Also, if possible, please support Ctrl+C to break too (maybe this isn't a good idea because it's used for copy-to-clipboard). I expected the editor works in a standard way (e.g. going back to the end of the previous line by hitting the left arrow at the beginning of a line) but it didn't, so a quick key binding table would be nice. Thanks for sharing!
I concur. It took me too long to figure out that ESC does the trick. Also, the help pane needs navigation at the bottom too. Was looking for the key binding table too. It would be nice if keybindings can be remapped.
Thanks for your feedback! It seems I did miss some instructions about how to break the program on a specific help page in my guide, but I've now mentioned it. Considering that atto is designed to accommodate beginners, I didn't want newcomers to get confused between copying and breaking, so I opted for the Esc key to interrupt instead.

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)

Very nice. Someone reimplement that banana-throwing gorillas game that come with QBasic on Windows!
You could probably port it really easily
I'd love to see that! There's plenty of graphics commands in atto, so I'm sure it's possible to recreate.
Safari, chrome and Firefox of the iOS browsers none worked
Unfortunately, all iOS browsers must be WebKit-based due to the limitations imposed on App Store apps. The problem is, WebKit doesn't support regex lookbehind which is an extremely useful feature for tokenising atto programs. Hopefully, one day, the WebKit devs will implement it, and then everyone will be able to use atto!