Collaboratory for Advanced Malleable Systems Research

Ideas
1

“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.”

2 Likes
2

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

3

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
4

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
5

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
6

Oh neat! Lemme try:

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

7

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.

8

Is there an example yet in this forum?

9

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

2 Likes
10

Oh this is COOL!

6 Likes
11

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

12

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.

2 Likes
13

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.

1 Like
14

Thanks @jryans for the extension! Just perfect.

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

2 Likes
15

Wonderful! Thank you @jryans for adding the iframe feature, and @khinsen for suggesting the idea. I let out a “Wow” when I tried @neauoire’s Tote demo, to realize it’s an actual running program I can interact with right inside a forum post. Excited to imagine what’s possible with this.

Here’s my first try, a cat that chases the mouse cursor.

That was pretty easy. A few points I noted:

  • At first the browser blocked the loading of the iframe, because my server sets HTTP headers X-Frame-Options and Content-Security-Policy as a common security measure to prevent embedding the site in an iframe. Rather than removing it altogether, I added the forum’s domain to allow it specifically.
    add_header X-Frame-Options "ALLOW-FROM https://forum.malleable.systems";
add_header Content-Security-Policy "frame-src forum.malleable.systems";
  • The Markdown editor preview refreshes on every change, reloading the iframe frequently. The preview can be closed with the << icon on the bottom right of the editor. An alternative is to embed the iframe after writing the post.
  • The iframe works best with width and height set to specific value (default is 300 x 150), and frameborder attribute set to 0 (default is 1) to have no border around the frame. Tried a transparent background in the example but it’s still white by default, I think that may depend on the host site’s CSS. Not necessary though.

This is great, I’ll have fun making interactive examples as part of my writing workflow.

Since I joined the forum I’ve been surprisingly productive with my research studies and writing output, so I wanted to express my thanks to @jryans for this space and community, letting me feel comfortable to write often, sometimes disorganized thoughts, to feel free to experiment, learn and build in public. I don’t know what practical results will bear fruit, but I’m sure enjoying the company of smart and creative people.

I was joking with the post title, but the “Advanced Research” part was meant as an homage to places like Xerox PARC (Palo Alto Research Center) and Institutes for Advanced Study, that cultivated a culture of imaginative thinking, collaboration and innovation.

@and Ah yes, I remember the web subculture around Flash, with forums that encouraged people to make and share their cool creations. HyperCard had the same kind of friendly camaraderie around it, and I see that too with Decker, Uxn, ShaderToy, etc. I see them as part of a long tradition through history, like how the café culture in Paris and other European cities fostered art and literary movements; how the punk bar CBGB’s launched numerous bands; or what Motown Records did for soul music and artist development.

Applications themselves could turn into memes.

Totally agree about Flash and the culture of remixing ideas, Eve and “live literate programming”, the missed opportunity for HTML5. Good point about an application being a single project file that includes all source files, letting people copy & modify them. PICO-8 and LÖVE2D have this kind of maker culture. The web in the early days had that spirit, and I’m hoping there will be a quiet renaissance as peaceful war of art in our cyberpunk dystopian times.

6 Likes
16

For me (LibreWolf with default settings) that’s just a grey rectangle. Looks like we will have to fight against the various security measures that various browsers implement in various ways.

@neauoire’s examples work fine for me.

17

I am already adoring seeing the iframes pop up around the forums. Really makes this place feel more alive and brings back good memories.

3 Likes
18

That could either be a frame security issue or a browser compatibility issue with the frame’s content. You could try loading @eliot’s frame content in a new tab directly to check if it’s a browser compatibility issue.

19

Another option is width="100%" so that it takes on the width of its container (potentially good to support different screen sizes). You may still want an absolute height though.

The forum’s CSS does currently also set:

iframe {
  max-width: 100%;
  max-height: min(1000px, 200vh);
}

…though I can change that if we work out that it should be something else instead by default.

20

Very happy to hear this! :smile: Thanks for sharing your ideas here. It has led to many interesting discussions.

1 Like