Collaboratory for Advanced Malleable Systems Research

“Collaboratory” is a portmanteau of collaboration and laboratory, a word that came to mind while thinking about how empirical research and the experimental method can be applied to further our understanding and development of malleable systems.

There’s an existing thread in a similar direction.

Is anyone aware of workflows and/or support tools for collaborative work on malleable software? – Collaborative work on malleable software

From that general question, I’m interested in a specific concrete implementation for this forum and community.

Would it be helpful to have a collaborative space for writing and running programs? ..For code snippets, sketches, prototypes to demonstrate ideas.

..where people can see and show malleable systems and ideas in action, for example, a running instance of HyperDoc, FreeWheeling apps, Uxn programs, Cardumem wiki, Lopecode, Decker, etc. It could be a Git repository.. – Philosophy of object-orientation - #24 by eliot

Often when I’m writing a post or reply with the Markdown editor, I wish for a workflow closer to literate programming where I can write code or diagrams as easily as writing words in natural language, without breaking my train of thought. For now, I’m trying to solve it by having a code editor and web browser side by side, and preparing a public domain and server to quickly deploy an HTML page; then I can link to a running code example, or make rough sketches to try ideas as we’re talking. But wouldn’t it be nice to solve that for all forum members somehow?

Ideally I’d love a unified interface to “write” by interweaving dynamic blocks with text, like we can with images, links, lists, tables. But I suppose that would mean extending Discourse, written in Ruby if I remember right. Maybe something like a shared Observable (or similar) notebook is more suitable, though that requires a server and database I imagine, not just static files.

According to Stephen Wolfram: “The idea of a notebook is to have an interactive document that freely mixes code, results, graphics, text and everything else.”

From the Jupyter project documentation: “The notebook extends the console-based approach to interactive computing in a qualitatively new direction, providing a web-based application suitable for capturing the whole computation process: developing, documenting, and executing code, as well as communicating the results.”

I’m searching for a practical way to expand this forum as a shared thinking space, so we can write code and experiment with ideas while we’re discussing them.

The separation of “text” (with Markdown features) and “code” (any language but I guess compiled to JavaScript or WebAssembly so it can run in the browser), it seems to limit the flow of discussion to the realm of text, because it takes time and effort to switch to a code editor, write a snippet, push it to your server, and link to it in a post. If we didn’t have that friction or resistance, maybe it’d encourage a more empirical approach, so we can say, “Let’s experiment with this idea,” instead of just talking about it. As Leibnitz said:

Quando orientur controversiae, non magis disputatione opus erit inter duos philosophos, quam inter duos computistas. Sufficiet enim calamos in manus sumere sedereque ad abacos, et sibi mutuo (accito si placet amico) dicere: calculemus.

“If controversies were to arise, there would be no more need of disputation between two philosophers than between two calculators. For it would suffice for them to take their pencils in their hands and to sit down at the abacus, and say to each other (and if they so wish also to a friend called to help): Let us calculate.

1 Like

Could we embed iframes in our Markdown posts? And then do whatever we want inside an iframe?

This is something I feel a lot even without collaborating with others. I mostly work with games and interactive art. There this a very strong separation between my work as an artist and my work as a coder. And, that overhead can be tremendous as I’m building complex scenes.

Pointing to some possible prior art, this idea reminds me of Eve. It used a sorta declarative language to build applications. This language was optimized for live literate programming and debugging. It sadly fizzled out once their seed money ran dry. They also hit some major performance problems, the model they are using is doomed to exponential time cost.

I haven’t made much usage of coding notebooks, but I believe most still bind you to writing you ideas in the order of execution not the order of narrative story telling. Perhaps that is just a limitation of languages that require forward declarations.

Also, a lot of what you describe here reminds me of Flash era. When I was a teen, I would regularly browse flash forums and image boards. Flash had this fascinating culture of remixing ideas. SWFs weren’t just end user applications, but also project files (or at least easy to reverse engineer). Forums used to regularly allow for embedded flash applications.

Threads would regularly be made where people would post a template flash application that you could add you own characters to, and the threads would just be full of people going back and forth on things. It wasn’t uncommon to see people modding other projects in these spaces. Applications themselves could turn into memes.

I’ve always been disgruntled that HMTL5 was promised to fill this niche that flash existed in, but it was largely superficial and didn’t extend into the deeper culture. From what I’ve seen and heard, embedding HTML5 safely requires having a separate domain to host the application on. I believe this is for XSS reasons. Additionally, HTML5 projects are not composed of just one packaged file, but dozens of files requested individual by an webpage. This poses problems for hosting, local remixing, and cloning.

3 Likes

Discourse actually does allow iframes, but for security reasons, the default settings only allow specific domains. I have just changed this to allow any https iframe, so feel free to try it out! :smile: (If it ends up being abused for malicious purposes, then I may need to lock it back down again…)

One quirk of the pattern is that a bare domain will require a trailing slash (e.g. https://example.com/, not https://example.com).

Here’s a demo:

2 Likes

Thanks for starting this thread! :smile:

Adding some forum of community playground / notebook / collaborative space does sound intriguing…! (Those might each be their own separate tool, or maybe they can all happen together somehow.)

I am not yet sure how to best achieve this, but I will certainly be watching this thread for suggestions from the community.

As mentioned in a previous post, I have just enabled generalised iframe support for forum posts, so that’s perhaps one way to collaboratively experiment, and it may be a good first step to test that out and see how it goes.

I know iframes are not the best fit for all use cases, so let’s keep sharing further ideas on how we might achieve these collaboration goals. If there are particular playground / notebook / etc. approaches that you’ve seen elsewhere and wish were available to this community, please share them so we can take a look. :nerd_face:

2 Likes

Oh neat! Lemme try:

Edit: What’s the trick to put an iframe in markdown? I can’t figure it out.

You should be able to write a literal iframe tag with src attribute, for example, here’s what I used for the demo above:

<iframe src="https://example.com/"></iframe>

It’s possible the set of iframe attributes is restricted somehow, I haven’t checked that yet. Make sure your post editor is in Markdown mode (the left side of the Markdown vs. rich text switch should be selected).

If successful, you should immediately see the iframe appear in the preview on the side (that’s at least what happens for me in a desktop browser). If it does not appear, perhaps try editing away any miscellaneous attributes. The src must start with https as well.

Is there an example yet in this forum?

Of… an iframe or something else…? There should be an iframe demo visible in my post above.

2 Likes

Oh this is COOL!

5 Likes

Examples are of limited utility because we can’t see the Markdown code for posts other than our own. Unless I have missed something.

Hmm, yes, it is true, a “view source”-like button for all posts would be good to have… Luckily, I found a Discourse extension that adds exactly that…! :nerd_face: There are a few other approaches you could use, so I’ve also mentioned them below.

Raw post button (new!)

If you click the “three dots” icon below a post, you should see a new “document”-like icon that says “raw post” when you hover. This will do exactly what you are hoping for: it opens a dialog showing the source of the post.

Browser inspector

For these iframes specifically, the Markdown source is the same as the iframe tag your browser renders, so you could use the browser’s inspector tool to select the iframe on the page, and then copy the source that way.

JSON API

Every thread is also available via the JSON API by just appending .json to the thread URL… but this contains all posts from the thread, and only as the HTML format of each. To get the original post source, you would need to find the post ID from that thread JSON, then go to /posts/<id>.json, which will have a raw field with the original Markdown source. That’s probably too much trouble for this particular need though, since there are simpler options available.

1 Like

There are also tools that the community has already build that we could use.

Like codestrates or infinite canvas apps.

Also,we could have a wiki that documents the different projects.

Thanks @jryans for the extension! Just perfect.

That’s why showcasing the tools in forum threads is a great preparation.

2 Likes