Notes on Webstrates #

Webstrates supports much more than just synchronizing and persisting DOM nodes. Here are a couple of notes on features that can be helpful, but we recommend familiarizing yourself with the Webstrates documentation and API.

Copying a Webstrate #

A webstrate can by copied simply by appending ?copy to its URL. If you want to give it a custom name use ?copy=myNewWebstrateName.

Versioning #

Every webstrate is versioned. Access the current version of a webstrate by appending ?v to the URL. To restore to an older version append, e.g., ?restore=111.

A version can be tagged with a human readable name either by appending ?tag=myNewTag or through JavaScript:

webstrate.tag("myNewTag");

It’s now possible to restore using the tag using ?restore=myNewTag or creating copies from the tag by, e.g., myWebstrate/myNewTag/?copy.

Read more in the Webstrates documentation about versioning.

Assets #

Assets uploaded to a webstrate can be accessed relative to the webstrate’s URL, e.g., myWebstrate/myImageAsset.png.

To upload an asset to a webstrate the following code will open a file prompt (Chrome and Safari only):

webstrate.uploadAsset();

You can also upload assets by dragging files to the assets browser in Cauldron.

Read more in the Webstrates documentation about assets

Signaling #

Webstrates has an API for sending JSON formatted messages between clients of the same page. You can read more about it in the Webstrates documentation on signaling.

Permissions #

Webstrates has a simply permission model that can be used if you have logged in. On our demo server you can use a GitHub account to login on the frontpage of demo.webstrates.net.

To add permissions to a webstrate add a data-auth attribute to the html node like follows:

<html data-auth='[{"username": "cklokmose", "provider": "github",
                   "permissions": "rw"},
                  {"username": "anonymous", "provider": "", "permissions": "r"}]'>
...
</html>

Protected Mode #

For practical reasons we have had to run the Codestrates/Codestrates prototypes in protected mode. This means that if that the following code will not add elements permanently to the DOM:

// BELOW WON'T WORK!
let newNode = document.createElement("p")
p.innerText = "Hello, world!";
document.body.append(p);

Instead you have to approve node created. Either by doing the following:

let newNode = document.createElement("p", {approved: true})

Or using a helper method in WPM:

let newNode = document.createElement("p")
p.innerText = "Hello, world!";
WPM.stripProtection(p); // This approves all nodes in the subtree of p
document.body.append(p);