netnet.studio is an online code playground for exploring the Web's creative potential; at the center of the studio is a friendly AI-TA (artificial intelligence teaching assistant) named netnet; part code editor, part virtual learning guide.
For those just getting started on their creative coding journeys netnet is here to help you develop your studio practice with hypermedia tutorials, interactive examples and various other beginner-focused tools. netnet is also a realtime editor with built in code references and friendly error messages in addition to standard code editor features. netnet optionally connects to your GitHub account so you can version and publish your sketches online without having to worry about the technical details.
Our interactive lessons introduce coding through the lens of internet art, simultaneously covering the craft, theory and history behind the practice. References appear in widgets which feature videos, readings and other materials you can dive deeper into. All the code is being generated in realtime and can be remixed/edited directly during the tutorial itself. Try out our What is Code tutorial for example, or checkout our wiki to learn more.
Our learning guide also includes a series of ever expanding examples, which range from small code snippets to more complex demos, designed for learning through realtime experimentation. These can serve as starting points for your own remixes. Some of our examples are annotated and you can optionally ask netnet to explain it to you line by line, otherwise you can always double-click any piece of code in the editor and netnet will do it's best to explain it to you. Check out our wiki to learn more.
netnet's editor was modeled on popular modern code editors and so it includes all the core functionality you'd find in these editors. But our goal is not to reinvent the wheel, netnet is more like training wheels designed to help artists and creatives get started. Our intention is to get you comfortable with these standard interfaces, features and shortcuts so that they feel familiar when your ready to graduate to using a more professional code editor. Check out our wiki to learn more about these features.
Modern web development involves setting up lots of tools (editor, browser, local server, build system) and a workflow with various steps between writing your code and seeing the result (edit, save, build/compile, refresh/reload). These tools/flows are designed around the process developers go through when executing predefined coding tasks. But when you're an artist experimenting with code and exploring possibilities the standard dev process can really break your creative flow. Sketching ideas on netnet is as simple as visiting netnet.studio/sketch and typing whatever comes to mind. When you're ready to share it, simply press Ctrl+S and netnet will give you different options for saving and sharing your work. Check out our wiki to learn more.
Code is never really written from "scratch", even the pros regularly copy+paste code from online references, forums and examples. But copy+pasting is an art, if you don't know what your copying and where to put it, even coming across the perfect piece of code online isn't going to do you any good. For this reason we built netnet to be well versed in modern HTML, CSS and JavaScript so that if you're ever looking at code in the editor you don't understand, you only need to double click that piece of code and netnet will explain it to you. When prompted for more info, netnet will open our coding reference widgets as well as link to popular online resources for you to learn more. Check out our wiki to learn more these reference tools.
Errors and bugs are a pretty standard part of the coding process and so various different tools exist to help identify where and what the issue might be so that you can debug your code. But these dev tools display error messages using coding lingo which can be alienating for beginners. Even more frustrating is the fact that bugs in HTML and CSS (unlike JavaScript) don't typically return error messages at all. That's why netnet's been programmed to catch your mistakes and display HTML, CSS and JavaScript errors to you in beginner friendly language.. Check out our wiki to learn more about our friendly errors.
A GitHub profile is a modern creative technologist's "portfolio" of sorts. Versioning, git and other related concepts are difficult for beginners to get the hang of, but we help get you started on your path towards becoming an open source developer, slowly building out your creative portfolio with netnet's help. You don't need to know how to use GitHub, you just need an account and netnet will walk you through the rest. Nothing is saved on our server, and you’re not locked into our development platform. Check out our wiki to learn how to connect your GitHub.
For creative coding educators netnet can be leveraged in a variety of ways: Our interactive tutorials can be incorporated into a "flipped-classroom" model; As a code editor it removes many of the hurdles for beginners; netnet can also be used to quickly create and share simple code examples with your students, which not only include all of it's beginner-focused helpers, but also the ability to create custom code annotations. We're also working on tools to make it easier for other educators to create and contribute their own hypermedia tutorials! Check out our wiki to learn how.
want to help us make it better?
We've been teaching internet art and creative coding for over a decade, we've watched the Web grow and change, we've seen tools and frameworks come and go, and we're intimately familiar with the various challenges and obstacles beginners (artists in particular) regularly face. netnet's code editor isn't meant to replace professional editors, rather it's designed to smooth out the learning curve for students as well as enable educators to spend more time on teaching the code and concepts and less time setting up and troubleshooting the tooling. Check out our wiki to learn more.
While netnet can connect to a GitHub account for hosting/publishing projects made in it's editor, you can also use it to create simple sketches to quickly share with students without the need to create any accounts. This is possible because we store a compressed version of the sketch in the shareable URL itself, here's an example! netnet's beginner-friendly core editor is also available separately and can be used to embed notes/examples on other sites, like a canvas page for example. It's all open source, so you can implement the editor into your own edu applications! Check out our wiki to learn more.