Run and edit Javascript, encoded in the URL

Run arbitrary user javascript embedded in the URL:

• user created javascript
• user defined css modules

Think of this like codepen or others but stripped down focusing on core essentials, performance, and durability.

This website is also a metaframe: connect metaframes together into apps/workflows/dashboards: metapages

Github Repo

Useful code snippets

Logging to the display (instead of console)

Some globally available functions for logging:

  log("something here");
  logStdout("something here");
  logStderr("an error");

These will be added to the root div (see below)

Get the root display div element

const root = document.getElementById("root");

// All your elements go into "root".

Wait until page load or DOMContentLoaded

You don't need to wait for the load or DOMContentLoaded event, your script will not run until DOMContentLoaded is fired.

Window resize

Resizing happens when the editor layer is active. You might want to listen to this resize for e.g. graphical effects.

Example, listening to both the window resize event and the local div element resize:

const handleResize = () => {
	const width = root.getBoundingClientRect().width;
	const height = root.getBoundingClientRect().height;
  // Your own code here, handling the resize
}


window.addEventListener("resize", handleResize, false);

const resizeObserver = new ResizeObserver((entries) => handleResize);
resizeObserver.observe(root);

window.scriptUnload = () => {
	resizeObserver.disconnect();
	window.removeEventListener("resize", handleResize);
}

Unload/cleanup

When iterating with the code editor, the script is removed then re-added to the dom. Despite removing the script tag, the script itself is still in the javascript engine. In some cases, this can cause problems as multiple listeners maybe responding to the same event.

This is not an issue when simply running the page with code, since it only runs once.

To have your script cleaned up because of new script (when editing), set a function scriptUnload on the window, this will be called prior to a new script added:

window.scriptUnload = () => {
	console.log("internal scriptUnload call")
	// do your cleanup here
}

Connect upstream/downstream metaframes

Examples

• Rotate stick on canvas from incoming angles

Architecture:

• no state is stored on the server (all embedded in the URL)
  • this imposes some limits but current URL lengths are large or not specifically limited
• The server simply serves a little index.html
• The client then runs the embedded javascript (the javascript code is not sent to the server)

The server runs on https://deno.com/deploy which is

• simple
• fast
• very performant
• deploys immediately with a simply push to the repository
• 🌟🌟🌟🌟🌟