16 ms·
Show HN: Atto – BASIC computer that runs in the browser
- voidnullnil 5y agoGreat, now when I search "atto" the search engine will bring up another thing I'm not looking for.
- gus_massa 5y agoIt'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?
- zupreme 5y agoForgot about 10 goto 10 eh?
- James-Livesey 5y agoYou 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.
- ngcc_hk 5y agoAmazing work. Cheers.
- stevekemp 5y agoNote 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 https://github.com/skx/gobasic Edit: Have reported issue, so it doesn't get lost in this thread.
- James-Livesey 5y agoYeah, I've since fixed that bug when I saw it on GH Issues! Thanks for the bug report.
- tyingq 5y agoLooks like their own basic interpreter. There's a list of keywords here: https://github.com/James-Livesey/atto/blob/main/commands.js#L7 https://github.com/James-Livesey/atto/blob/main/commands.js#... There are some drawing commands, getpixel, etc.
- James-Livesey 5y agoI 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.
- roywiggins 5y agoSomething 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.
- krylon 5y agoSame here on Firefox, I have not tried another browser. Makes me feel all warm and tingly with nostalgia, though.
- James-Livesey 5y agoGlad 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?
- James-Livesey 5y agoInteresting! 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!
- bcrl 5y agoThe 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.
- iddan 5y agoWhen 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!
- montroser 5y agoI 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/ https://xregexp.com/
- jchw 5y agoYou 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.
- James-Livesey 5y agoYup, 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!
- thom 5y agoI 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 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.
- zozbot234 5y agoInterestingly, 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.
- tyingq 5y agoI imagine people would like a jsfiddle style way of saving things with a url that you could share with others though...
- James-Livesey 5y agoHence of course the reason why I implemented `share` to share a link to your code!
- tyingq 5y agoAh, 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.
- James-Livesey 5y agoIt'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!
- mattlondon 5y agoLove the font and colours. Took me right back to the old spectrum days. I assume this was deliberate - good work!
- James-Livesey 5y agoThank 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!
- James-Livesey 5y agoHi 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 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 https://twitter.com/codeurdreams
- ncmncm 5y agoThe 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.
- James-Livesey 5y agoThat'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!
- adamredwoods 5y agoCute, but I am thankful for the modern IDEs. Retyping a full line to fix a line is antiquated.
- marcodiego 5y agoI 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.
- zozbot234 5y ago> 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.
- ngcc_hk 5y agoIf so, can one have a visual block lisp … lisp is building ast as well.
- James-Livesey 5y agoYou'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!
- SamBam 5y ago
- ngcc_hk 5y agoIs 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!”
- James-Livesey 5y agoIt'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!
- marttt 5y agoSame message here, Firefox 71.0 on Linux Mint.
- gerdesj 5y agoI 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!)
- James-Livesey 5y ago> 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!
- networkid 5y agoWorks awfully on mobiles
- James-Livesey 5y agoAgreed, 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!
- euske 5y agoI 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!
- zweifuss 5y agoI 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.
- James-Livesey 5y agoThanks 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)
- SamBam 5y agoVery nice. Someone reimplement that banana-throwing gorillas game that come with QBasic on Windows!
- ilaksh 5y agoYou could probably port it really easily
- James-Livesey 5y agoI'd love to see that! There's plenty of graphics commands in atto, so I'm sure it's possible to recreate.
- ngcc_hk 5y agoSafari, chrome and Firefox of the iOS browsers none worked
- James-Livesey 5y agoUnfortunately, 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!