Increase Customization in the Learning Environment

While I do generally enjoy the way the learning environment is set up, I think it could be so much better if it allowed for some customization. I’ve put together a list of things that I think should be customization by users and why they would be beneficial. If you have an idea that I didn’t mention, please do comment what it is and why it would be useful. Also, if any of the ideas I’ve mentioned are already possible, please let me know how to implement them as I couldn’t find them in my initial search.

Color Schemes in Editor

The color scheme in the editor is actually really nice in comparison to some other defaults out there, but it is a bit tricky for me to be able to see because have some color blindness. It would be incredibly helpful to myself and many others to be able to choose a different color scheme or to be able to import one of our own.

Toggleable Autocomplete

I’m sure that I’m not alone when I say that autocomplete is incredibly annoying. Sure it can have it’s useful moments but it is counter intuitive. Autocomplete is supposed to save you key strokes, but the autocomplete of quotations, brackets, etc… actually create more work when editing code. If I have to go back and add parenthesis to an equation its takes me three key strokes to type one character: open parenthesis, right arrow, backspace rather than just open parenthesis. This wastes time and should be toggleable for those of us who don’t want it.

Layout of Contents

The three columns (Learn, Editor, Terminal) should be switchable. I do like that you can change the width of the columns, but you can’t switch their places. I am someone who works best with my reading on the right and my work on the left. It simply feels more natural for me for me to work with this layout. I’m sure there’s also people out there who like to have their work spaces arranged in rows rather than columns.

Keyboard Only Accessibility

I absolutely love the keyboard shortcut to check your work (ctrl + enter). It would be amazing if the entire learning environment could be controlled with only a keyboard. Currently you have to use the mouse to scroll down the Learn tab but there could easily be a keyboard shortcut to accomplish this (ctrl + j/k,
ctrl + arrow keys). There is currently a shortcut for Back and Next, but neither one of them works if the current focus is in the editor, so you must click outside of the editor to change the focus before the shortcut will activate and that defeats the purpose.

I agree with most of the points you made. But web based IDE’s are very complex pieces of code. So what i am about to say, will not solve the problem, but might just (hopefully :slight_smile: ) be helpful to work around some of the problems you might experience.

You could consider installing a local IDE or text-editor like VScode or atom (there are many more), these can often be completed tweaked to your liking, including color scheme, configuring the auto complete to the liking and so forth. This also already gives you the option to find a text-editor/IDE that suits you (which you will need after codecademy).

then you can copy paste the code from your editor into the codecademy lesson.

I realize its not ideal, and i do hope codecademy implements some of the ideas you mention here :slight_smile:

on a personal note, i would like to add that auto complete is super useful (especially if you can tweak the auto complete to work to your liking), taking your time to master the auto complete will make your productive.

I use vim for almost everything outside of Codecademy because it is so customizable. I had tried your suggestion of copying and pasting when I first started using this site, but it is very time consuming to go back and forth between the two to check code at each step.

I do use an autocomplete plugin with my vim set up, but it only will autocomplete under certain conditions which removes the hassles of having to remove a character mid-line. I suggested a toggle because it would be much simpler to implement an on/off rather than a way to tweak the IDE on a user by user basis.

It’s a little disheartening to hear my ideas validated but to be told they’re too complicated. I understand that it wouldn’t necessarily be easy to implement some of these, but I pay $240 a year for access to professional programming courses. User experience should be the most important thing for a company like this, especially considering that this site is all about programming. While none of the ideas I’ve mentioned are deal breakers for me, they absolutely will be for other potential users.

Only part I agree with is Toggleable Autocomplete. I’m not color blind so I can’t identify with that issue. But that feature is very annoying, counter productive, and time sink. I get it that its for beginners, but after a short period it becomes a nuisance.

Hey @kittencalledkat, I work at Codecademy on the learning environment and text editor. Sorry I didn’t see this post till now (and thanks @lilybird for re-bumping this to me!) - I actually agree with all your points, especially the accessibility issues!

If it helps, we’re actually working on a new text editor right now (so excited!) that will open the door to a lot of improvements in the short and long term. It’s slowly rolling out to users now, and while it should work the same as the existing editor except as noted below, we’re really excited about the possibilities it brings. (For the curious, we’re switching from CodeMirror to Monaco.) I’ve enabled it on the kittencalledkat account so you can try it out early :slight_smile:.

Color Schemes in Editor: Not only do I agree, I think we’ve already provided a solution :smiley:. Monaco has a High Contrast theme built in that should help with color blindness and other visual impairments. Press F1 while in the text editor, type “high contrast”, and select the “Toggle High Contrast Theme” option. Yay, accessibility!
Note: we don’t have any plans about user-submitted themes otherwise, but I suppose you could use a browser extension such as Stylish.

Toggle Autocomplete: Agreed; in fact, I’d even take it one step further: once users are more advanced, they tend to want more autocomplete (basically, they want what editors such as VS Code give out of the box. We’ve been talking about this in the background but probably won’t make any progress soon… we haven’t figured out a good way to introduce ways to configure this for learners. Do we make it an option somewhere? When do we introduce it? What things should people be able to customize, and when? All unanswered so far, and would need more research.

Layout of Contents. Agreed. We’re actually redoing the “grid” system the LE is built on in a similar way to the text editor: new tech, very few new features… but yes, this is something I personally would like. I’d also want to pop out the sections so I could use multiple monitors & the Windows window snapping features. Unlikely to happen soon though :frowning: we have a lot of tech debt to pay off first.

Keyboard Only Accessibility Strongly agreed. Since this post I think we’ve actually addressed the specific things you called out:

  • Fixed: We’ve fixed it so you can use Ctrl + > and Ctrl + < from the text editor :tada:
  • Partially fixed: the narrative pane lets you Tab through it (the “Stuck? Get a Hint!” things are focusable, except they can’t be triggered using Space or Enter :man_facepalming:
    …overall, it’s not where it should be, but we are actively working on it!
2 Likes

Hi @joshgoldberg77279673,

First, thank you for acknowledging each of my points and explaining why some features are lacking or missing. I also appreciate you giving me access to the early version of the new Monaco text editor, however I’ve had some issues with it.

My daily computer is a chromebook with developer mode disabled (so I can’t access root on the device, nor do I want to). Chrome OS is really great for me to practice coding on because of its simplicity, security, and terminal app, although I often have to refactor projects to work with http://penguin.linux.test: rather than http://localhost:. When I first went to try out the new editor, the F1 key was locked to the back button for the browser. It is possible to have the system not use the preprogrammed shortcuts, but it’s annoying to constantly go back and forth to change the settings. I have tried using the Monaco editor on Windows and MacOS as well, but for MacOS you again need to edit some system settings to get it to work properly. I love these new options, but I do think that expecting the browser to be able to pick up function keys isn’t the best way to implement this.

As for autocomplete, I think you could a short course on text editors would be an easy solution (similar to Learn the Command Line or Learn How to Code). You could include popular editors, common features, how IDE’s work, and a basic runthrough of Codecademy’s options. If an entire course isn’t really an option, then maybe an article (like HTTP Requests or What is CRUD?) could be added to the Welcome to Codecademy course, detailing how to customize the IDE.

I appreciate your response and look forward to seeing the additions you’ve mentioned.

1 Like

Also find and/or find replace would be really helpful, especially once the code gets large.

Is there anyway to set it so that when I successfully pass a Ctrl+Enter Run check during an exercise that it automatically scrolls down to the next objective? That would save SO MUCH time lost to constantly having to move my mouse after only writing a few lines of code.

Cheers!