realtime editing
In addition to standard code editor features, 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 (this page), 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)
When working on a web page, you typically create your HTML file and write your code using a code editor first, and then you open that same HTML file in a web browser in order to run (or "render") your code and view your work. In some cases (when writing JavaScript code or using JavaScript libraries that load external assets like sound or image files) you need to run a local development server in order to view your project in your browser, without one you will get CORS errors. Running local dev servers is pretty standard practice in professional web development but it can be a frustrating hurdle for beginners.
One of the many reasons we chose to make netnet a web-based code editor is to get around having to setup all these extra steps! Because netnet is already hosted online (and because we've written a bit of fancy backend code on our server), there's no need for a development server and because the editor exists on the same page as your output you see the rendered results of your code as soon as you type it (or technically half a second later). We believe that being able to see the changes of your code immediately is key to experimentation. The standard flow of: making a change in your editor > saving that change > switching over to your browser > and refreshing your page to see the results; can often break your cognitive flow when experimenting with code. Seeing changes as you type also lends itself to interesting discoveries you might otherwise have missed.
That said, realtime coding environments can sometimes get a little buggy. For this reason you can also change the default realtime rendering behavior by setting autoUpdate() to false in the editor settings of the Functions Menu. (accessible by clicking on netnet's face)
You can also change netnet's default layout in the editor settings of the Functions Menu by choosing a different option in the changeLayout() function. While code editors and browsers are typically two separate apps, most developers will use their browser's built-in developer tools to check for error messages, in the browser's JavaScript "Console", as well as experiment with minor tweaks in the browser's "Inspector". netnet's layout options are modeled on standard layout options found in most web browser's developer tools.