Introducing atto: a modern beginner's programming language that runs in the browser
Tags: beginners, webdev, education, programming
Published: 2021-07-10 17:20:51

---
title: Introducing atto: a modern beginner's programming language that runs in the browser
published: true
description: Introducing the new BASIC computer that runs in your browser!
tags: #beginners #webdev #education #programming
cover_image: https://jamesl.me/atto/media/cover.png
---

Designing programming languages for learners is certainly not a straightforward task. As a 17-year-old student, I've witnessed first-hand the joys and frustrations of my fellow classmates when they've begun learning programming languages such as Scratch and Python. The problem is, there is room for improvement in the field of educational programming to make coding more interesting and engaging for students to learn.

Whilst both Scratch and Python are great for beginners — especially with Scratch's appeal to children — there's always been something missing in both of them which either make the language a loose representation of professional programming (such as with Scratch), or that makes the language too dull and uninteresting to learn (as is often the case with Python).

I've set out to explore some sort of potential resolution to these issues. In my discovery, I have concluded that there is a common trade-off among all beginner's programming languages between _realism_ when comparing the language to more advanced languages such as C and C++, and the language's ability to _engage_ the student and capture their interest in coding.

![Graph: Scratch, Scratch Jr and Blockly all have higher engagement levels than realism levels (with Scratch Jr having the highest), and Python, Lua and Java all have higher realism levels than engagement levels (with Java having the lowest)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fujdlgutt6yr71u9f0zl.png)

As with any trade-off, there's bound to be a sweet spot where one can equally compromise on both factors, yet have the best of both worlds in each. My ambition was to create a programming language which hits that sweet spot.

![Continuation of graph: atto appears be equally distributed between realism and engagement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgib96tgajon9keo6qrb.png)

## Back to the 80s
During my research, I took inspiration from the computing era of the 1980s. _Microcomputers_, which were smaller than ever at the time, were personal computers which were connected up to big, heavy CRT displays — which for many, served as devices upon which millions of people around the world met the world of programming.

The computers of that time were extremely simple in usage: the user would plug the computer into the TV or a dedicated monitor, and within seconds of flipping the 'on' switch, the user would be greeted with a programming language called BASIC — or the Beginners' All-purpose Symbolic Instruction Code.

![An example of a BASIC computer, with a CRT display and integrated keyboard](https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Amstrad_CPC464.jpg/800px-Amstrad_CPC464.jpg)

<center><small>Courtesy of [Bill Bertram · CC BY-SA 2.5](https://commons.wikimedia.org/wiki/File:Amstrad_CPC464.jpg)</small></center><br>

BASIC was designed for everyone to use — it's the default programming language whose interpreter would fire up when the machine starts. Fast-forwarding to today, there are thousands of people who have entered careers in computer science and software engineering who were brought up using BASIC.

Though I am evidently too young to even exist in the 80s, having tried out computers of the time myself (in fact, I am the proud owner of a working [Amstrad CPC 464](https://en.wikipedia.org/wiki/Amstrad_CPC)), I am certain that these machines were a brilliant way to introduce novices to coding.

I find it such a shame today that the ease of access to programming on modern systems is significantly worse than computers of the 80s, since programming today usually requires learners to endure the cumbersome process of downloading a code editor and runtime, and then having to wait for the installation to finish. Whereas in the 80s, you could write code within seconds of switching the computer on.

It's pretty safe to say that BASIC was a programming language which hit the sweet spot of both being realistic (it's text-based; and it was one of the few programming languages in existence at the time) and engaging (with its powerful graphical abilities yet easy-to-use syntax).

Armed with my knowledge of BASIC's success, I decided that my programming language would manifest itself as a brand-new, 21st-century BASIC derivative. My rationale was that I wanted my language to be as intuitive as BASIC, but with more up-to-date and modern features included (such as more crisp graphics and editing features which resemble modern IDEs).

Oh, and considering that most people have access to the internet, I wanted to make the language accessible via the browser, too.

## Meet atto
![A screenshot of example code for printing the Fibonacci Sequence in atto](https://jamesl.me/atto/media/promo.png)

This is atto. It's named after the unit prefix in the metric system, [_atto-_](https://en.wikipedia.org/wiki/Atto-), which is equivalent to 10 to the power of -18. It's a play-on-words, because computers from the 1980s through to the 2010s often had 'micro' and 'nano' in their name (with both also being unit prefixes).

As you might expect, atto is simple, but also really fun to use. It features the ability to draw graphics (with even a turtle mode to learn step-by-step graphical drawing included), with much more in the works at the time of writing.

It doesn't stop there, though — it also comes with a beautiful design with syntax highlighting (a rare commodity among BASIC implementations) and a unique, arrow-key-driven editing approach which allows you to modify lines of code in an intuitive way.

One of the more important features includes documentation through the `help` command which shows beginners how to code right from the start, but also accommodates advanced users by providing a rich reference guide of every command available in the language.

Our documentation also includes step-by-step courses which are currently in-development, but we've already released our [turtle drawing](https://jamesl.me/atto/docspopout.html?page=docs/courses/turtle.md) lesson so you can get a taster for what is to come. I might even publish a few of the courses right here on dev.to so that you can keep up-to-date with a series of our guides!

![A screenshot of atto with the turtle function in use, and documentation about the turtle function in a panel to the right](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkyvixkwbygnb834obr6.png)

We've designed our guides to be easily readable for all ages, with simple, well-explained (and sometimes entertaining) vocabulary that makes learning to code a fun experience. Our guides are designed with the style of 80s computer instruction manuals in mind, with as much detail as possible about atto packed into a single place. Those who are running workshops and teaching in classrooms can also choose to print out atto's guides for students to go through.

## There's more‽
The fun doesn't stop there: we also have a Twitter bot which runs any atto code that you Tweet to it! It's a challenge to fit code into a mere 280 characters, but it's rewarding nonetheless. Here's some previous examples of what you can Tweet to it:

{% twitter 1412316607184093187 %}

{% twitter 1412113807535751170 %}

Feel free to Tweet atto code to [@codeurdreams](https://twitter.com/codeurdreams) on Twitter, and follow it to receive the latest news about atto. There's a dedicated button in the atto help guide which will Tweet your code to our bot, too!

## Try atto yourself
Enough talk! To try atto yourself, simply go to:

<center>
<h3><a href="https://jamesl.me/atto">jamesl.me/atto</a></h3>
<a href="https://github.com/James-Livesey/atto">Star atto on GitHub</a>
</center>

Of course, I'd appreciate it if you try out atto and give me your feedback on what you think is really cool about the programming language, but also what you think could be improved to make it better for everyone! Your comments and suggestions are most welcome, and I'll keep your ideas on how to make atto better in mind.

I hope you have fun with atto, and thanks for coming along to learn about my new programming language!

<small>Further discussion around atto is also available on <a href="https://news.ycombinator.com/item?id=27724236">Hacker News</a>.</small>