Standard Code Editor Features
In addition to standard code editor features (this page), netnet's editor also has a few extra features aimed at making it easier for beginners and artists to experiment with code, these include realtime editing, friendly error messages, built in references and tidy code. netnet also provides a few different options for saving or sharing your work which fall under two categories, what we call sketches (quick single page works) and projects (works which include other files/assets and are hosted on GitHub)
netnet's editor was modeled on popular modern code editors like Sublime, Atom and VSCode, and so it includes all the basic functionality you'd find in these editors, but our goal is not to reinvent the wheel. netnet is more like "training wheels", it was designed to help artists and creatives get started learning to code for the WWWeb, but our goal is to eventually help you grow into using professional developer tools when you're ready. To that end, the following features are those you'd find in standard code editors, so that as you get used to using them in netnet, they should feel familiar when graduating to a more professional editor:
-
line numbers: Technically you can write code in any plain old text editor, code is just text after all, but code editors include features that make the process of writing code a little less painful than it would be in a basic text editor. One simple, but very important way they do this is by including line numbers. Standard developer tools often include systems for reporting error messages when you make a mistake in your code. These messages will often point to the line number the developer tools believe this error might be occurring. Though it's not correct 100% of the time, the issue is usually somewhere around the reported line number, this means rather than having to review your entire file for a potential bug, you can focus on the specific area your error message points you to.
-
syntax highlighting: Another way code editors make writing code less painful than it would be in a plain text editor is by adding colors to different parts of our code, this colorizing is referred to as "syntax highlighting". This makes code easier to read and write because we can more easily visually parse out the individual pieces of our code. Furthermore, when you get used to the color scheme, syntax highlighting also helps prevent bugs, because when you notice the colors are off it's usually a good indicator that you might be missing a piece of syntax in your code. By default netnet has a "dark" syntax highlighting theme set, but you can change this in its editor settings which can be found in the Functions Menu (accessible by clicking on netnet's face)
-
code hinting: Most modern code editors include a form of code auto-complete known as "code hinting". As you type code in the editor you should see a drop down menu appear with auto complete suggestions. Selecting an item from the list, by using your mouse or your arrow keys and then clicking Tab or Enter, will automatically paste the snippet of code you chose from the list. Getting used to using code hints not only makes it faster to write code, but also helps you avoid making syntax errors.
-
shortcut keys: It takes some practice to memorize and get used to using shortcut keys, but when you do, not only do you write code a lot quicker, it also helps you stay focused on what you're writing and less on trying to find functionality in menus. For this reason we've included (as much as we can) all the standard shortcut keys like CMD+C and CMD+V to copy and paste, CMD+S to save your progress, CMD+A to select-all and even CMD+D to select multiple instances of the same text with multiple cursors (one of our favorite features in modern code editors) among others. NOTE: "CMD" is the shortcut key in Mac, but of course all the same shortcut keys exist on Windows and Linux by substituting it for the "CTRL" key.