Glitch, Remix, a #NetNarr Exquisite Corpse

There you go, try guess the nature of this blog post from a word heavy vague title.

Better yet, just go first and try the thing I will be ‘splaining right here.

Well, are you back? Did anything happen? Because one of our students in class (she too a teacher) asked as well as my twitter dog pal

I hope you will write about how you set that up in Glitch (does it require an Airtable account? What’s Airtable?) You know I love those collaborative writing projects and have done versions of these. I’d like to know how to remix for other use via Glitch. If you get a chance

— KevinHodgson (@dogtrax) February 21, 2020

Here is the behind the scenes details.

What For?

One of my roles in this year’s Networked Narratives class (with the dark mirror theme) is to set up some activities for our students, ones that may seed their minds when it’s their turn to develop a narrative. But also just to expose them to ways in a web browser to be creative rather than clickers and scrollers.

So you may not know of a means of collaborative storytelling that long predates the digital stuff- one called Exquisite Corpse. I imagine it as some kind of Victorian parlor game. If I can paraphrase (without resorting to WikiPedia Copy Paste), A group of people build a story on top of each others contributions, but they can only see the last sentence or so of what the previous person wrote.

I cannot say where the corpse part comes in. Dead bodies are optional.

The Glitch

None really, I mean the web site http://glitch.com. I’ve done a few small things with their nifty platform, mostly migrating most of my Mozilla Maker stuff when they folded their tent (BOO-HISS! BAD MOZILLA!).

Glitch is both a tool and a community for creating web applications, games, bots, little hosted sites. Do not be deceived by the primary color cartoon-ish interface, under the hood it gives you web tools to build and experiment with things that might be harder even in a domain of your own (e.g. you can use Node.js! Do I know what that is? Sort of, im a Gee Wally sort of sense).

It goes way beyond what Mozilla’s Thimble did, but like it, as you make changes to your web code, you can see the results change in real time.

The other key thing is that things people publish there have a Remix button that lets you make a copy of their app, and then you can modify, expand, break on your own. It’s got the range of playful stuff for “learn to code” to a full on collection of web developer tools to connect to source code in github.gitlab, integrate with other services (Slack, Trello, etc), and do some pretty advanced web app coding (without the need for being a sys admin).

Oh, and it’s free to use. Start creating like… now?

Somewhere (tweet?) I saw that there was an Exquisite Corpse Story Starter built in glitch. And I was curious if I could learn enough to make a version for NetNarr.

The Remix

I just followed the directions in the project info page. You can do this pretty much without a deep (or almost) any understanding what Nodejs is or how it works.

So I did it. You can do, look for the Remix to Edit button.

One thing you will need is another free account on Airtable, a site that lets you create databases for web site apps without having to know much about databases. On that site, the Project Directions indicate how to make a copy of the Airtable database for the Glitch Exquisite story, and get some API codes you will need to move into your glitch site.

Just for fun, this is the Airtable for the Exquisite Corpse app I made:

It’s more spreadsheet than anything, and I did not have to poke around too much. The one thing that the glitch directions left out is that when you make a copy of the Airtable, you get all the data from the original It was a matter of checkbox marking the rows and using the Trash can icon in the green menu bar area).

The Net Mirror Version

The rest of my work (maybe 95% of the whole thing) ended up being customizing the interface and making it contextualized for our class. The editor is one where you see code, so that might chase away the few readers I have left.

The left window are all the project files. You can upload images to assets (each one gets a lovely long URL), The Public folder could include CSS and JS files. Views are the webpages (some have an ejs extension as they use a form of HTML + scripting know as Express (these are new to me too, and not critical to being able to Do Your Own Exquisite Corpse).

I mainly changed text, did some styling, and added the image background of the cracked black glass. This is done, as you can in glitch, by including some scripts to include jQuery and the Backstretch library that fills a web page background with any image you specify. This meant added to the bottom of all the view pages right before the closing /body tag.

And I did a bit of changing to the style sheet to fit the darker site theme I stayed with (I nuked the light-mode).

If you are really code curious the workings of the interactive part is in the server.js file. For example I saw that it listed this bit for creating the snippet (the last chunk of what the previous writer wrote):

let snippetText = records[0].fields.Text
response.render(__dirname + "/views/index", {
	// trim the last text piece to 100 characters
	snippet: snippetText.substr(snippetText.length - 150)
});

And I can see that it’s actually trimming to the last 150 characters; so on my version, Iwas able to make that line read:

	snippet: snippetText.substr(snippetText.length - 100)

Knowing a little bit of code here is anything but dangerous, it’s damned liberating.

I don’t think I need to explain all the steps when the original app’s docs does it very well.

The Corpse

Because all glitch things can be embedded it was easy to integrate to our WordPress site (you did follow the link there earlier, right?) or just try it directly from https://exquisite-netmirror.glitch.me/

When this was set up for class, I had commented out the link that reveals the full story; it’s there now or you can just go look at it https://exquisite-netmirror.glitch.me/story

It is what it is. Exquisite? For me it is to be able to tinker and build. A set of more direct prompts might help frame what people add to it, but if they only see the last 100 characters, what can one expect?

The story is not the goal here, but to have our students experience an alternative type of writing online.

For me, I have a whole range of things to think about in using glitch. I just needed an excuse/opener to dive in.

---

Featured Image: The results for image searching (settings locked to Labeled for Reuse) in the Google for “glitch mirror” were pretty lacking, until I scrolled farther than I usually dare and found one by someone I know (Hi Bill!)