Picture this. It’s a Saturday afternoon and you don’t have work or school to contend with today. On a day like this you might visit family, talk with friends, maybe play some games online, etc. But for some reason you feel compelled to use this free time to learn programming.

Maybe you want to build a game. Maybe you want a change of career. Or maybe you just wanted to learn something new. Regardless of the reason, you google “learn to code”. What comes up? Hundreds of results that say something like “Coding Bootcamp: 100 days of learning code”.

Is that what you wanted?

This was the question I asked the development team at our weekly meeting. If any of you are like me then the answer is not a simple yes or no. You want to learn code, but a bootcamp isn’t how you want to learn and committing to 100 days isn’t something you feel comfortable with. We decided to make our own answer.

Learning in Bits and Bytes

Learning code can be like learning an instrument. If any of you have ever picked up a guitar from a garage sale and thought “why not?”. The first thing you want to do is learn a song you like. You don’t want to learn scales, you don’t want to learn theory, you just want to try and fail at something. This is often parroted in the programming community as “the best way to learn code is to just do it”, the problem is that a newbie would take this advice as callous and dismissive. Similar to saying “just be a doctor, it’s not that hard” to a med student.

The funny thing about programming is “just do it” is some pretty good advice, but there’s nothing that makes it feel approachable enough to dive into. Programming needs its “Smoke on the Water”, something that anybody can try to learn while making good progress on, and we believe the solution is Bytes.

Manifesting a Crazy Idea

We decided that Bytes need to solve three big problems with current coding resources. Firstly, the projects need to be “Bite-sized” meaning that they can teach valuable information about programming in a short amount of time. We decided that 10 minutes or less was an ideal time chunk for people that want to learn. Second, Bytes need to have variable difficulty because what can be completed in 10 minutes for us is not the same as someone that just started programming. Finally, we needed a way to assist users when they feel stuck as the most common quitting point for people learning programming is early in their development.

Solving all of these problems came down to solving the final problem: “How do we help a struggling programmer?”. Luckily, we already had a solution in the form of an AI tutor on GIGO called CodeTecaher. The approach is simple: make an editor that feels like a programming tutor is helping you as you program. So we mocked up a basic idea of what we wanted.

To explain the collection of blobs above simply, on the right you have a simplified editor with terminal below for command I/O, and on the left you have a chat window that connects to our proprietary AI tutor CodeTeacher.

We decided to integrate all aspects of the Byte into this format, starting with the challenge idea. The challenge idea will be written in the chat initially such that a user “feels” like CodeTeacher has given them a task to complete similar to how an actual tutor would. The final version of this implementation looks something like this.

This allows for someone with an interest in learning code to understand two things immediately:

1. What metrics their code will be judged against and what skills they will learn/practice within this Byte
2. That CodeTeacher is instructing them on this Byte and will be an available resource

Since we built the chat custom for GIGO Bytes we were able to give CodeTeacher direct access to context about what the user is doing. This allows users to simply ask questions to CodeTeacher as if it were a person looking at their code with them. For instance, if I were to ask CodeTeacher to help me rework line 20 in my code it would have knowledge of that line and provide meaningful advice. Just like a real tutor!

We also generate relevant questions based around the concept of each specific byte as suggestions, placed above the chat bar. For instance, this byte tasks the user with calculating a zodiac sign based on a date of birth. Therefore, the questions are “Explain the byte in greater detail”, “What are zodiac signs?”, “How does one’s birth date determine their sun sign?”, etc.

With a predefined message format we were able to ensure that no Byte challenge would be extremely long or unruly allowing us to ensure that Bytes could be completed in under 10 minutes. Then we had to solve the difficulty aspect of the challenges.

Our solution was to define 3 difficulties for every Byte that would have a different challenge message and task for each difficulty along with different code. This ensures that any user is able to approach the topic of a Byte within their appropriate experience.

Editing the Editor

Now for the most important part of any programming challenge. The editor. We decided to go with a simplified editor for Bytes as we want to ease new programmers into using tools that will become second-nature as they continue on their programming adventure. The GIGO Bytes editor will be pre-configured inside a virtual environment with all required packages and programming languages already installed when the user hits “run”. Speaking of the run button, we decided to move it to the top right of the editor to instill a sense of familiarity with other IDEs on the market.

This editor has tons of interesting features I could talk about for hours, but to keep it brief and on topic let’s focus on 3 main things we spent the most time on. Firstly, we added syntax highlighting with documentation. This allows a similar experience to VScode or Jetbrains.

Making Cool Stuff

Now with the boring one out of the way… let’s talk about the cool stuff. We added an Auto-Debug system that when a user runs their code and it fails to meet the specifications of the Byte, CodeTeacher will automatically make suggestions on how to fix errors or formatting in your code output. It was a serious challenge to balance how much information we should give the user. If we give too little then the debug provides no help, however, if we give too much the byte becomes no work at all. As a team we decided that a good middle ground is to give the user enough information to get to the next problem.

This allows us to solve the largest problem most early programmers have which is “why doesn’t my code work?”.

Finally, we added a feature called “What To Do Next” which when a user has remained inactive for a long enough time CodeTeacher will suggest different actions that will help them to complete the Byte.

This is an “opt-in” solution. Meaning that it is not automatically performed like “Auto-Debug” and instead an icon in the top right will begin glowing and the user may click that to get some help with the Byte.

Finishing Out

With all the features built in, I believe we have solved all of our originally defined missions. We have ensured that no Byte should take a user more than 10 minutes regardless of difficulty. We gave the user 3 different options for difficulty to accommodate any experience level. Finally, we built the editor and chat from the ground up to assist users with anything they could possibly need.

We are very pleased with how GIGO Bytes have come out, but the work never really ends. Since launch we have been working hard on multiple changes to make Bytes even more user friendly. If you want to check out Bytes you can do so on GIGO Dev right now, or if you want some more condensed information about how we use Bytes check out our about page.