contributors guide - netizenorg/netnet.studio GitHub Wiki

We're so glad you want to help improve netnet.studio! If this is your first time contributing to an open source project you'll need to create a GitHub account, if you've already got one make sure you're logged in.

Getting started contributing to an open source project can be tricky and intimidating even for experienced coders. For this reason we've not only documented our contributor workflow (for those experienced devs) but we've also created a smoother ramp into open source contribution for those new to GitHub. It starts with easier contributions (like editing mistakes you found in netnet's dialogue) and eventually gets into to more complex contributions (like editing netnet's core functionality). Each step not only slowly introduces you to our code base, but also to the process of open source contribution more generally. So, what do you want to work on?

1. edit some of netnet's dialogue

2. edit/create a code example/demo

3. edit/create a netnet widget

4. create a new interactive tutorial

5. working on core functionality

contributing to netnet dependencies/submodules

1. create a new netitor color scheme

2. working on the netitor's friendly errors

3. working on the netitor's edu info

4. working on the netitor's hinter (auto-complete snippets)

5. working on the netnet-standard-library (nn.min.js)

---

While the links above are designed to guide you through the process of making different sorts of contributions more gradually. The links below are more conventional and in depth references if you're looking for a more traditional intro to the repo:

• Contributor Workflow: high level overview of the process for experienced devs looking to contribute to the project (essentially a git "feature branch" workflow). We've got a setup script for getting your local dev environment up and running, but also have notes on how to set things up manually as well.
• Anatomy of a netnet URL: you'll find netnet's one and only "page" (SPA) here: https://netnet.studio, but there's loads of ways to to view that page and preload it with examples, sketches and tutorials.
• Project Architecture: overview on how the code in this repo is organized and our thoughts behind it.
• Dialogue System: netnet's dialogue system is what handles it's text bubbles that show up when interacting with netnet. this doc explains how it works, how to edit dialogue (to fixing grammar or spelling for example) and how to create new dialogue (to accompany a widget for example).
• Creating Widgets: netnet's widget system is used to create all the various windows that pop up, from information boxes like the privacy policy to full blown code generators like the color widget.
• Creating Examples and Tutorials: netnet includes hidden "meta-widgets" for creating shareable code examples and hypermedia tutorials (like those found in netnet's Learning Guide).