Anatomy of a netnet URL

There are different ways to preload content, like sketches, examples and tutorials by addding URL parameters (aka query strings) and/or URL hashes (aka URI fragmets). You can also combine URL parameters and URL hashes, so long as the hash is written after the URL params, for example: https://netnet.studio/?layout=dock-left#code/eJyzSU7NK0ktsuNSUPBIzcnJVwjPL8pJUQjPTElVCE9NUuSy0YeqAAAk0A2e

URL Hashes

a netnet URL does not necessarily need to contain any hashes, but it can contain either of the following:

• #sketch: adding the #sketch hash to netnet's URL will automatically load netnet to it's 'dock-left' display with a blank file and skips the default greeting process, so you can jump right into coding, for example: https://netnet.studio/#sketch

• #code/[...]: the code present in this hash is the compressed contents of the HTML/CSS/JS code that was in netnet's editor at the time a share link was generated. It always begins with #code/ followed by the compressed code, for example: https://netnet.studio/#code/eJyzSU7NK0ktsuNSUPBIzcnJVwjPL8pJUQjPTElVCE9NUuSy0YeqAAAk0A2e This code can get pretty long, which is why there's also an option to create a short code URL (see the c URL param below). By default netnet displays sketches fullscreen, but you can optionally include to show the editor by including a layout URL (more on that below) for example: https://netnet.studio/?layout=dock-left#code/eJyzSU7NK0ktsuNSUPBIzcnJVwjPL8pJUQjPTElVCE9NUuSy0YeqAAAk0A2e

• #example/[...]: the code present in this hash is the compressed contents of an HTML/CSS/JS example that includes code annotations netnet uses to explain the code example step by step, for example: https://netnet.studio/#example/eJx1Um1P2zAQ/is3T+JFyihjmsZKV6mwamvHKqa0TFPDB9e5NqaOncWXhYD47zu3dAXBJEuW7cfPy93dCStzFG2RYu5EJKgpwunr+Pt56yyOYSa9Vp4fltiI9vvjSCiXBsTrsLdw2NzGkw+jb4dL8tUonlycDm6VHV7W1xfnx8Vw8uP6Ytw3l2f9j6NJFTeHv/B3r9dbHvaOkEm1nTvRnt4J0mQC6wKJtF2AJ1kSpgyZO1V50baVMewObyi4wxJ3PUj4g2UDXueFQcAbudrJQchiPZWSEDJXwwCUtDBDqDymAYA3hZHawh5l2i5BWuuIwfsQQgE/5A1gqsmVr8R9tLUXygJ9gzla8ltz07fRu6t/7saZ9sCLJTee3DycVr9x/TsCCjBnQxAljQnGMoTOrKv4GctOa9bdgqVNweglQu48ba59BJrYsvXak38QcQXaUMFOiNLdMXSy5ttZ0EmntbpcsSnj/FNc6zmQ5MIfPK/AmWOgpUcFONrGP0WqEe0qzcbMY8HA+UJBoEbgpiguP3FJEp6zlUgiIqgzrbJND4MMuBIcC5RPKF6yGlNZKapK/M8oDey6EbVsIuj4gjWUkd5/SoTh0UgEt0gZrZZ88XPw+Ut/HE93M8rNmxLnPIZW4e7VQci5t5+IbtBk90VVFs5jpxUIu2EYeOgS4TdmmDaU5yHipnOWFRFSdrluOodMRI0zKOSCv3C6q/u/GGI/Hw==

URL Params

a netnet URL does not necessarily need to contain any URL parameters, but it can contain different combinations of any of the following:

• ?tutorial=: the value of this param is the name of a tutorial to automatically load, for example https://netnet.studio/?tutorial=what-is-code you can also start the tutorial at a particular time point by specifying a value in seconds using the t param, for example: https://netnet.studio/?tutorial=what-is-code&t=60 (this will start the tutorial 1min in)
• ?ex=: the value of this param is the id of an example in netnet's example database, for instance: https://netnet.studio/?ex=49
• ?w=: the value of this param is the key name of any netnet widget you want automatically opened as soon as netnet loads, for example: https://netnet.studio/?w=tutorials-guide
• ?c=: the value of this param is a shortcode, a reference to an entry in netnet's database for a CODE_HASH a student chose to shorten to avoid having such a long URL, for example: https://netnet.studio/?c=6
• ?layout=: the value of this param is the type of layout netnet should display on load, options include: welcome, separate-window, dock-left, dock-bottom, full-screen. It assumes you are also sharing a sketch (either via a short c code or a #code/ hash) for example: https://netnet.studio/?c=6&layout=dock-left
• ?gh=: the value of this param contains info for a project hosted on GitHub. It should include 3 values separated by /, the GitHub username, the name of the repository and the particular branch, for example https://netnet.studio/?gh=netizenorg/browserfest-demos/main