Using different code editors

Now that you've seen how to program in ProcessingJS in a webpage outside of Khan Academy, you're ready to experiment with more code editors -- only if you want to, of course.

In any editor that you use, make sure you save your main file with a filename that ends in ".html"— that's the file extension that is used for HTML pages to make sure that both editors and browsers know what they are. If you'd like to separate your JavaScript from your HTML, then you can save that with a ".js" extension, and reference it with a <script> tag.

One option is to use an online editor, similar to ours but with additional features. You might want to use an online editor if you have a computer that doesn't let you download apps or you want to use the same editor across multiple computers. Popular online editors are JSBin, Glitch, and Repl.it. If you're on a ChromeBook, you can install a Chrome web app like Caret or Zed.

Here's a video of me editing a webpage in Cloud9 (from our course on making webpages):

Another option is to use a desktop editor. An app is downloaded to your computer and saves the files to your hard drive. There are lots of desktop editors for you to pick from, depending on what OS and price you're looking for. Some popular desktop editors are Visual Studio Code, Atom, Sublime Text, Adobe Brackets, and Notepad++ (for Windows).

Here's a video of me editing a webpage in Sublime Text (from our course on making webpages):

A third option is to use a command-line editor. If you're not already familiar with the command line, you probably don't want to go down this route since you'll also need to learn a lot about the command line first. On the other hand, if you love typing and navigating with your keyboard instead of your mouse, you might find you love command-line tools. Two popular command-line editors are Emacs and Vim, and they are often already installed on Unix-based systems like Macs and Linux.

Here's a video of me editing a webpage in Vim (from our course on making webpages):

Which one should you use? You're welcome to keep using the Khan Academy editors for now. Eventually though, you'll want to get comfortable with at least one other editor. As a programmer, it helps to know how to program in multiple editors, since you might need to use a different editor for a class in school or a job at a company.

You might want to try out a couple different free options and see which one you like the most. You can also ask around to see what friends and colleagues use. It's often helpful to use whichever tool is most popular with your peers because then you can ask them for help.

For example, here's a graph of what my Khan Academy colleagues use:

If you're reading this and already use a different editor, you can share what you're using and why you like it in the Tips below. For bonus points, share any tips for making ProcessingJS programs in your favorite editor.