Baby Glitch Template (I'm So Meta Even This Acronym)


#1

So I made this mathy thing – https://bonus.glitch.me/ – the contents of which aren’t relevant here but it turned out to be pretty amazing how you can play with the parameters of that function and watch the graph change in real time just by editing the code on Glitch. I know, old hat by now for Glitch fans.

But I’m wondering if anyone has a template for an app that has a text area that works exactly like the code editor in Glitch and updates the page in real time. Something like this little calculator app I just threw together – https://baby.glitch.me – except instead of a boring textarea it would be an embedded Glitch editor. So any number of people could edit it and every keystroke would display for everyone and persist.

In theory this should be easy for the Glitch devs to throw together (depending on how deep their dogfooding goes) since it’s a tiny subset of Glitch itself!

But if that’s not realistic, any other ideas for making a textarea act like the Glitch editor where it shows its live contents to everyone viewing the page?


#2

I’m actually partway through working on something like that, an embeddable glitch instance that you can put in any page. It currently works a bit differently though, but I’d love your feedback to support any changes

how it currently works:

  • you get an embed code (html snippet with an iframe) from the editor, similar to how you’d get an embed code for a youtube video
  • the embed has an editor pane, and a preview pane. As you type in the editor, the preview pane will auto-refresh
  • the first time you type in an embed (whether you’re a member of the project of not), it’ll ‘hot-remix’ a new copy of that application as you type so you won’t have to click a remix button before you start editing

If you’re interested I can let you know when it’s on a staging url and you can test out the beta


#3

Awesome. Definitely interested in trying the beta!

For my use cases I don’t think I’d like the hot-remixing because I’d want it to be a shared textarea that all visitors could simultaneously edit.

An embedded etherpad would be another way to do what I have in mind but it’s cumbersome to poll the contents of the etherpad for changes and clearly Glitch is doing something much smarter with its Ace editor (?).


#4

We use the Code Mirror editor now.


#5

I’d want it to be a shared textarea that all visitors could simultaneously edit

are you thinking of scenarios like https://glitch.com/~the-most-collaborative-website where a join link was made public and ppl just organically make a thing?

for scenarios like the calculator on your baby.glitch.me app, how would you ensure that the calculator still works as intended over time if everyone was editing the same parent project directly?


#6

No, not everyone editing the full source code, just everyone editing a text area that might have arbitrary parameters and data (and maybe some code as well, if the parent project evals it). Like with the example of plotting a function. Another use case: a shared natural-language document with statistics and things displayed next to it in real time.

I’m personally excited about an app template that makes it easy to implement experimental group decision tools (voting, auctions) without building a UI each time. I’d just define an array of people’s bids or votes or whatever and let my fellow nerd users just edit that. Like this – http://kibotzer.com/bidder/ – but with no need for that Recalculate button if everything refreshed per keystroke, Glitch-style.

I’ve been reading about this more and it sounds like CodeMirror + ShareDB may be a way to do what I’m aiming for.