A common misconception people have about learning to code is that it requires a lot of memorization. The truth is that developers are constantly looking up documentation and taking advantage of tools like autocomplete and ChatGPT so they can code faster and more efficiently.

We recently added autocomplete to the code editor in our learning environment (the interactive platform you see in our courses and paths) to give you a more realistic coding experience. “Autocomplete is a basic need for developers,” says Chirag Makkar, Senior Software Engineer at Codecademy who worked on this project. “As developers, we want to have autocomplete from day one, right in wherever we are coding,”

Currently, autocomplete is available in courses on HTML, CSS, and JavaScript. When you start typing code in our integrated development environment (aka IDE), suggestions will pop up that you can select and keep chugging along.

If your goal is to get hired on a tech team or build projects independently, you’re going to use an IDE or code editor. “We want to keep our learning environment at par with what is happening in the industry,” says Vidyadhar Patil, Product Manager at Codecademy. Using autocomplete as you learn to code won’t just make the coding process smoother and less frustrating, it’ll also help prepare you for your tech career by emulating the real-world environment while you learn.

Read on to hear how Chirag and Vidyadhar worked together to add autocomplete to select courses and paths. Want to learn more about the new features we’re developing to support your learning journey? Check out more Behind the Build blogs to get an inside look at how our engineering teams make learning to code easier, more rewarding, and fun for you.

The project: Add an autocomplete feature to the code editor in our learning environment.

The learning environment is “the most complicated part of the Codecademy ecosystem,” Chirag says. There were a few key steps that our engineers took to add this new feature:

• Upgrade the code editor that powers the learning environment
• Enable autocomplete
• Implement learner feedback and improve the UI/UX

Investigation and roadmapping

Chirag: “The underlying code editor that we had been using for our learning environment, Monaco Editor built by Microsoft, had not been upgraded for a few years. Upgrading the version had been low-hanging fruit for quite some time and it was the first project that our team took on. One of the benefits we got while upgrading that version is that we could now harness the power of autocomplete for languages like HTML, CSS, and JavaScript. Autocomplete is a great thing to have, so we thought, why not just release it? So, that’s how we based the idea, and the curriculum team came on board with that as well.

In real life, whenever developers are developing a web application or coding to build something, they would want to use a code editor that would already have those autocomplete features built in. We think of autocomplete as a more realistic way of learning — not like you need to memorize specific keywords, grammar, and syntax because there can be hundreds and thousands of keywords. Moreover, you might not be restricted to just one language or technology; you might be learning various libraries and technologies.”

We think of autocomplete as a more realistic way of learning.

Implementation

Chirag: “The whole Monaco Editor upgrade was a big chunk of the project, and it took a couple of months. The language that we use in the learning environment is TypeScript and the framework is React. Since we were working at the very architectural level of the learning environment by just upgrading the editor, it enabled us to make a lot of modifications to many features that the previous version of Monaco didn’t have.

At the core level, autocomplete was already there for us with the new version of Monaco — we just had to enable it. The thing that we had to develop was when to show it and how people discover it. So, the UI/UX around that and the experimentation took us a few weeks before we actually launched it for everyone.”

Troubleshooting

Chirag: “Once we are working at this scale, changing anything has a lot of impact. We couldn’t break even one line of code before we roll it out, because that ruins the whole learning experience.

I remember we had just released the new version of Monaco, with the autocomplete turned off, and we were at the office for a team meetup. After completing dinner, all our Slacks were just going off. Someone eventually opened Slack and we realized, ‘Okay, something is broken.’ So, we had to roll that whole thing back. A couple of days later, we pushed it again — there were a lot of learnings there.”

Vidyadhar: “There were two major problems with the initial coach mark [a UI message that guides users through new product updates]. The first problem was that it was getting in the way; it was covering a good amount of real estate on the learner’s screen in the learning environment. The reason for that is because of variable display sizes that learners use. For people who use a small display size, the size of the coach mark was not adaptable. Consequently, they were not able to figure out how to escape the modal, the pop-up. So that was a major problem.

This is what the coach mark looked like before we received feedback.

Here’s how we made the coach mark less obtrusive.

Other than that, I think there was a minor improvement that we made, which was to point the coach mark to the tools menu. This was just to indicate that learners can find the autocomplete toggle ON/OFF option in that area.”

Ship

Vidyadhar: “Within a single day, we got a huge response, which gave us confidence that, yes, this feature actually works. And this is something that learners want, and we would want to scale it up.”

Chirag: “When we saw the intent was really positive. We were all like, We’ve done a great job. So that was I think the best reward for it.”

Retrospective

Vidyadhar: “When we asked learners for feedback, we saw that around 85% of the learners were satisfied with having the autocomplete feature enabled in their learning environment. There were significant reasons that they stated: they say that it saves time, it avoids repetition, and it helps with learning and remembering. People benchmark it with other industry standard code editors, which is one of the primary reasons we wanted to bring this feature onto our learning environment as well.”

Snaps

Chirag: “The LE is a shared application with a lot of teams. So, one aspect that I learned on this project was collaborating between teams, getting those code reviews done. Software Engineer II Akshay Deshmukh started off the whole update individually before our team was formed. Huge snaps to him.”

Vidyadhar: “Huge shout out to Chirag and Akshay — these are the people and the brains behind this feature.”

Conversation has been edited for clarity and length.