Glitch.com was, according to their homepage:

[…] the friendly place where everyone builds the web. Start a new blog, play with React, or build new worlds with WebXR.

Others have said a lot more than I could about the history of Glitch. I’m here to deliver a eulog-

Well, uh, actually others have had a lot to say about that, as well.

• Important changes are coming to Glitch - official announcement post.
• on ‘important changes coming to glitch’ - Jenn Schiffer, former director of community at Glitch and kickass candle maker.
• and many, more.

Glitch project hosting is shutting down in about a month, at which point any hosted projects will stop working. After that, users will be able to download archives of their own projects for about a year. Between now and then, users can set up redirects to forward requests to your project to a new URL.

Over the past few weeks, I’ve been tuning in to Jenn’s YouTube streams where she is working to triage, archive, and in some cases re-home hundreds of projects in her Glitch account.

Inspired by Jenn’s journey, as well as this RIP Glitch directory at ribo.zone, I’ve archived all my own Glitch projects, and want to talk about them below.

I’m an idiosyncratic person, so please don’t treat any of the following as advice. If you’re looking for the best ways to re-home your own Glitch projects, please check out the Project migration discussion in the Glitch support forums.

Honestly? Don’t even feel like you have to read any of the below. You are free to skip to the end or do anything else more pressing. Live your life!

My surviving projects

steady-sundial - A webring for IndieWeb-enabled sites. Find the latest at 🕸💍.ws

Ah, the 🕸💍 IndieWeb Webring!

This began almost as a dare at IndieWeb Summit 2018. As I remember it, Doug Beal brought up webrings and the idea of doing one for IndieWeb sites, and brainstormed the emoji domain. I made the mistake of actually registering 🕸️💍.ws which, oops, made me obligated to work on it.

We jammed on ways it could work over the course of the unconference day. One early idea (that could still be interesting for someone to try!) was to have folks join by the webring by posting some kind of “I am a member of the IndieWeb webring” post to their own site, then sending a Webmention. As long as your post stayed up, you’d stay in the ring.

One decision that seemed quite fun at the time, but that I would soon come to regret, was the idea to use emoji as identifiers. Putting these identifiers in webring navigation URLs would make it easy to tell where webring visitors were coming from. In theory. I ended up doing a whole write-up on why emoji IDs were a bad idea.

Anyway, I jammed out a quick demo on Glitch at the Summit’s Making Day, got great feedback, intermittently kept working at it, and so on. You can kind of follow this history via the update posts on the webring homepage.

While the webring lived on Glitch for multiple years, I eventually re-wrote it in PHP and re-hosted it. Viva la webring!

Here’s the original steady-sundial source.

And of course the source for the new version, which I call gem-diamond. You know, the ring salesman.

sticky-scribbles - Make an SVG suitable for pen plotting with simple scribbles and text with Hershey fonts.

Part of the August 2024 Glitch community “#justdraw” jam. I cleaned up a 2011 project from when I was really into pen plotting on my MakerBot Cupcake CNC.

I’ve got a whole post about Stick Scribbles, including where to find it’s new home (and the source).

trite-elderberry

Technically this lives on as “StickPix” - a proof of concept for putting Snapchat-style stickers on photos. Hacked up during IndieWebCamp NYC 2019, based on a demo by Ali Spittel. I never got around to adding the IndieWeb bits, and it basically didn’t work on my iPhone, so I abandoned it.

This fit into a larger idea I had that goes something like: “My friends say they use Snapchat and Instagram because it has filters. If they could post to their own websites with filters, would they do that instead?”

However, it turns out I wasn’t ready to really tackle all that. And I now think it’s a mistake to just copy big social media features.

My retired projects

garrulous-smile - A Micropub client for reaction GIFs??

Another “my friends like this feature on their social apps” special. This project, eventually named “Kapowski”, let you post “reply GIFs” between IndieWeb-powered sites.

Looks like I introduced this at a Baltimore Homebrew Website Club meetup in April of 2018.

This lived on Glitch for quite some time. Over the years I updated it to switch the “GIF provider” from GIPHY to gfycat when Facebook bought GIPHY. Later, I ported it to PHP as part of my kick to consolidate all my IndieWeb tools in one place with more shared code.

When gfycat shut down in 2023, I decided to shut it down rather than switch to another provider. I have a longer writeup about Kapowski on the IndieWeb wiki.

Part of me would like to bring it back! GIFs are cringe now, or whatever, but I think it’s fun to communicate in images and video. And these are our websites, so we can do what we want!

Alternative GIF-hosting sites exist that could power it in terms of search and content, but as of the time I did this research they were all truly awful about providing descriptive text for folks who need an alternative to the visuals, real .gif files actually aren’t great for sharing around the web, a video-loop based alternative that works across sites would need a lot of work to develop.

Oh, nobody used it. 🏜️

Okay, I used it to post like one reaction GIF one time, but I’m only aware of a couple of people besides me who even tried, because I asked them to test it out. 😎

The PHP version can be found at kapowski.bayside.pub, including links to the PHP source.

Here’s an archive of garrulous-smile because hey why not.

I had remix of this project, “peppermint-author”, where I started adding a feature to include an alt text description along with with the GIF reply, but I wasn’t satisfied with it and don’t remember sharing it with anyone.

veil-mirror

An IndieAuth device flow proxy for Microsub/Micropub

Based on Aaron Parecki’s Device-Flow-Proxy-Server, this project let you sign into a service with IndieAuth similar to the way a TV app would have you sign into your HBO Max account.

In my case, I built it to make an IndieWeb-powered photo frame from an Adafruit PyPortal.

I feel a little haunted by the closing “Code to come!” in that post.

The OAuth 2 Device Flow is actually rad in a lot of contexts. While it has been rare for me to use this proxy, it usually saves me several minutes of juggling other ways to get a token for use with command line scripts and embedded devices.

fanatical-wound - A toy Micropub client for managing syndication and mp-syndicate-to properties for posts.

The goal for this one was to make it easier to post on my own site then syndicate elsewhere, and then receive replies back from those silo’s using brid.gy’s ability (at the time) to backfeed likes, replies, etc. from Twitter, Facebook, and other social silos to my post.

Why? Because here was the manual process to post on my site and then share it out on Twitter and Facebook:

1. Write a post for my site. Wait for my site to publish it up so I have a URL.
2. Make the syndicated versions of that post on FB, bird site, etc., being sure to link back to my post.
3. Manually edit my post to add the new URLs to the syndicated copies on hell site, Zuck site, etc. Brid.gy uses these links to know where to post the backfeed comments, reactions, etc.

Without a tool, I was only able to do the last step from a computer with access to the source files for my site. This tool was planned to use Micropub to edit the syndication URLs.

The idea was pretty simple, but I got caught up in how much boilerplate I felt was required to set up a basic Micropub client with IndieAuth support. I ended up getting bogged down thinking about how to abstract all the common stuff with IndieWeb building blocks I had been doing on Glitch to this point into something reusable. I never even finished this.

Oh, also Facebook and Twitter shut down their APIs so Bridgy couldn’t backfeed comments anymore. Also-also I deleted all my silo accounts. So this became a moot point. 🚮

Little IndieWeb endpoints

What’s that? I mentioned IndieAuth above but never explained it?? Thank you for calling me in. IndieAuth is basically a way to sign in to apps and websites using your personal domain (or personal website URL) as your identity. One of the cooler things about IndieAuth is that you decide what service will handle the actual bits about “confirming you are you”.

I set up a couple of these IndieAuth authorization endpoints on Glitch, quick and dirty Javascript knock-offs of Inklings-io/selfauth:

• befitting-price - handled sign-in for ghostparty.today, the website of my favorite cult-based improv project. (befitting-price source code archive)
• indieweb-nyc-auth - was intended to let folks other than me post events to indieweb.nyc in the before times. We haven’t had any IndieWeb Camps or Homebrew Website Clubs in NYC in a while, but if we did, we’d use the meetable site where that domain now redirects.

At one point I was enamored with the idea of making it easy for folks to set up a site on Neocities, then power them up with IndieWeb building blocks to let them use existing tools. The GHOST PARTY site above is an example of that (nitty-gritties Neocities details here.

• prism-dirt - A micropub endpoint for Neocities sites?? - this provided the actual Micropub support for the GHOST PARTY site. (prism-dirt source code archive)
• sapphire-sulky-clover - looks like the start of me making a more generic Micropub endpoint with the goal of encouraging others to remix it for their own Neocities cites.

What’s that? I mentioned Micropub but never explained it??? Whew. Well, Micropub is a protocol for posting, updating, and deleting content from your site. It uses IndieAuth to verify that you are allowed to do the posting / updating / deleting. I, uh, hope that helps?

Remixes of other people’s stuff

• outrageous-coral - Traces bitmap images of crease patterns to create a cuttable SVG file. By Dr. Tiffany Tseng. Seems really cool for papercraft and patterns for sewing!
• lemon-spark-fairy - A demo using P5.js and googlecreativelab/creatability-components to do some kind of nose-tracking. Probably a demo someone sent me that I remixed in order to hang on to a copy.
• rich-tuna - An example IndieWeb website using my micropub-endpoint library. An building block for making IndieWeb-powered sites on Glitch by grant.codes.
  • elite-cornet-1 - An example IndieWeb website using my postr library. Is another Grant project. Part of his impressive PostrChild set of IndieWeb / Micropub tools!
• fantasy-slime - I tweet new blog posts for qubyte.codes. I check for them when a webhook is called by netlify. Another tool for someone to POSSE posts out from their own site. Can you tell I flirted with becoming a collector of IndieWeb-related projects on Glitch?
• bejewled-burly-penguin - A proof-of-concept for running a PHP app on Glitch!
• outrageous-wooded-octagon - At XOXO 2024 the octothorp.es folks published this as an example project. Octothorpes kind of strik me like a webring meets decentralized forums with an alternate reality version of Webmentions.
• wise-broad-microraptor - A WebSocket starter app using the ws node.js library. I think websockets are magic so I collect people’s projects for using them yet have only used them in a couple of projects! Scandal!
• juniper-magic-bream - This is a basic example of AR camera using aframe-ar with experimental browsers for ARKit and ARCore. Speaking of magic! A-Frame is so dang cool. I really ought to make a project with it someday!

There were a few others, but I decided they were not worth keeping or mentioning here.

Are you still there?

Hahaha, wow, okay, I didn’t expect to have so much to say about so many of these projects. Most of them weren’t mine. Of those that were mine, most of those were only experiments. By the time of the Glitch shutdown announcement, all but one of my few active projects that started on Glitch had already been moved to other hosting.

But I think that even this small realization, and this small collection of projects, hints at the magnitude of what the web is losing with the shutdown of Glitch project hosting.

Glitch made it possible to start making “real” apps on the web, right away, with no credit card requirement and no need to install a bunch of tools on your own computer.

With the remix system, you never had to start from a blank page. You could take a working example, make it yours, learn how it works, and change it as you like. As you did more, you learned more. As you learned more, you were capable of doing more.

And if you got stuck? The Glitch editor, right in your browser, allowed live collaboration! For a time there was even an ask-for-help feature where a stranger could come and help you with your project! And you could thank them in a way that showed up on their community profile!

As a long-time IndieWeb contributor, I’m well aware that the IndieWeb community has a perception of being exclusively “for developers”. While I didn’t have the resources to make it happen, I had big hopes that Glitch could be a way to get a fully-functional IndieWeb site, with no code required to get started, but everything open and available as you learned and leveled up. I don’t think the thing I was dreaming of could be possible anywhere but Glitch.

Clearly I have a major soft spot in my heart for Glitch. It took real thoughtfulness and care to build a platform to support a powerful learning community with no BS enterprise upsells. I know it wasn’t without its issues, but I think it’s safe to say that the world was much better with Glitch, and will be poorer without it.

My congratulations and thanks (and condolences) to all the folks that made Glitch possible.

Ok. I’m not crying, you’re crying.

Shut up!

Oh no! Oh no. 😿

https://blog.glitch.com/post/changes-are-coming-to-glitch/

I just posted Sticky Scribbles to Glitch as a Glitch Jam entry for August 2024. (Update 2025-05-23: Glitch is going away. You can find Sticky Scribbles at its original location.) The prompt got me thinking about some old web art projects that have come and gone, so I picked one up, dusted it off, dropped it on the floor, stepped on it, cut myself on the pieces, bought expensive raw goods from the store, and rebuilt a nearly unrecognizable new version that does the same thing.

I thought I’d post the write-up on my blog, as well.

Sticky Scribbles

1. Type some text and choose a font.
2. Maybe scribble on the sticky note a little.
3. Copy-paste the Output SVG into a file of your own choosing.
4. Open it in your pen plotter software and plot it, I guess!

Need to erase? A page refresh will clear all scribbling.

The fonts are vector strokes suitable for plotting. They’re called Hershey fonts and their story is pretty interesting!

You can also find the full source and history on GitHub.

Why

Inspired by the August 2024 Glitch Jams prompt of “#justdraw”, I remembered an old project from 2011.

Back then I worked for MakerBot Industries and, at the urging of my friend Matt Griffin, had started a descent into madnes- pen plotting. For me, that meant using the MakerBot Unicorn a tool for the MakerBot Cupcake CNC that replaced the plastic extruder to turn a 3D printer into a loosey-goosey pen plotter.

As with most DIY 3D printers of the day, the Cupcake CNC was driven by G-Code - short instructions sent over a serial port to tell it how to move its motors, etc. When I started playing around, the process for going from some vector artwork to G-Code was pretty labor intensive and required multiple tools.

The work area for the Cupcake CNC is 10cm square, which is just a little bit bigger than a pad of 3"x3" name brand sticky notes. So, these easily becamie a target for my madnes making.

In February of that year I particpated in “Thing-a-Day” on Posterous (RIP), and worked on several projects to try and boost the ease of use of this whole ecosystem.

A timeline you didn’t ask for

Unicorn G-Code extension for Inkscape

Mashing up some example Python code from the Unicorn release, and the Inkscape driver for Evil Mad Scientist Laboratories’ EggBot, this extension let you save (simple) drawings as G-Code that you could plot using a Cupcake CNC + Unicorn.

• 2011-02-01 - Announced the Unicorn G-Code extension for Inkscape.
  • GitHub repository (archived 2018)
  • Thingiverse
• 2011-02-02 - Added a pen registration step and homing support
• 2011-02-03 - Added support for multiple copies and continuous plotting
• 2011-02-04 - Added support for pausing to change pens

While I made this Inkscape extension to serve a very niche machine, I ended up continuing to improve it here and there. I was surprised to see it adopted by some DIY CNC projects from all over the world!

Unfortunately, I never made much of a habit out of using my own extension, so when the extension interfaces changed for Inkscape 0.91.x, I ended up marking it read-only.

There are over 100 forks, though, so maybe somebody picked it back up!

Hershey fonts

Matt introduced me to Hershey fonts, a set of vector fonts designed for the U.S. government for use on CNC machines for plotting or engraving. These were in a somewhat legible format, so I became a little obsessed with using them for plotter projects.

• 2011-02-06 Announced conversions of the Hershey fonts to SVG
  • Hershey fonts in SVG on Thingiverse
  • Windell of Evil Mad Scientist Laboratories was motivated by this to make an Inkscape extenstion for rendering Hershey text. That extension became part of Inkscape and after time and improvements it’s still there!
• 2011-02-08 - Hershey font rendering as SVG with JavaScript with Raphaël.js. A little proof of concept that would eventually become this little proof-of-concept.
• 2011-02-16 - Live demo using jQuery and Raphaël.js
• 2011-02-17 - Added line wrapping to the demo
• 2011-02-20 - Replaced Raphaël.js with canvas
• 2011-02-21 - Auto-scale text to fit a box
• 2011-02-22 - Added the cursed sticky note backdrop
• 2011-02-23 - Replaced canvas with Keith Wood’s jQuery SVG plugin
• 2011-02-24 - Sized everything for plotting on a sticky note via Unicorn
• 2011-02-25 - Added terrible scribbling. Insisting on having lines visually line up with the sticky note background but come out correctly aligned in the resulting SVG was really biting me here.
• 2011-02-26 - “Improved” the terrible scribbling. (Note: this did not fix the alignment issues. Why was I trying to do all the math myself?)

I’d love to share gratuitous details about rewriting bits of this little tool. Unfortunately, I worked on it live on my site that entire time without any version control. 😭

(Where was Glitch in 2011?? lol) (Update 2025-05-23: where will Glitch be in 2026 lolsob)

Misc (un)related projects

• 2011-02-05 - Graffiti Markup Language to Unicorn G-Code
• 2011-02-14 - An SVG template for tweets

This version

While you can find the entire history on the sticky-scribbles GitHub, I had a good time figuring out how I left this ~13 year old project and choosing ways to “modernize” or at least “make it less bad to my eyes”.

Fixed the cursed sticky note projection

The drawing canvas markup can be summarized like this:

• outer <svg> with background image of the stick note
  • inner <g>roup with a painstakingly trial-and-errored transform that made rendered Hershey text look “mostly right”
    • <g>roup for the actual rendered Hershey text
    • <g>roup for the scribbles

When we scribble onto the canvas, the pointer coordinates don’t account for that transform, so if we save them as-is, they’ll be skewed from where they appear on the sticky note preview.

Previously, I tried to do a bunch of math on my own, which worked out really badly.

Since then, I realized that if I have an existing transform, I can:

1. get that transform as a matrix (thx StackOverflow)
2. invert that matrix
3. apply that matrix to the pointer coordinate

When we add the transformed coordinate to our scribble, it now visually lines up with the preview on the sticky note! Miracle.

SVG building

The 2011 version of this demo used Jeff Wood’s jQuery SVG plugin to rebuild pretty much the entire contents of the <svg> any time something changed.

However, the main structure of the SVG described above doesn’t change at all! So I moved the <g>roups that contain the transform to make things line up with the sticky note, and its inner <g>roups for the rendered Hershey text and pointer scribbles into the markup on the page.

There were still a couple of useful utilities for creating <g>roup and <path> elements in the jQuery SVG plugin, so I made my own version in a little ES module svg helper

Going vanilla

There were lots of jQuery-isms that I vanilla-ized and in many cases modernized.

• replace instances of $('#someid') with a single document.querySelector and a variable
• replace $(someArray).each(...) with for (const item of someArray)
• update the hershey.js font parsing and rendering helper as an ES module.
  • Made use of async and Promises to get rid of some messy setTimeout calls around font loading.
• replace all var declarations with let and const

“Web Component” for scribbling

One of the biggest changes was extracting the handling of events and (re-)rendering out of a big spaghetti ball and into self-contained bits. I did these as web components that don’t actually manage any child HTML. Instead, their attributes tell them which elements on the page they should hook into for events or render onto.

The <svg-scribbler> component is interesting because I have it lean more into using the DOM as new scribbles are added.

Previously: as the user draws a new scribble, they’re pushed into an array, and on every change we basically call a “render” function that throws out the SVG contents and re-creates it.

The new component simply creates a new <path> element when the user starts drawing and updates the d attribute as the user draws. When they stop drawing, the <path> is already in the page and done. When the user starts drawing again, we a new <path> element is created without disturbing any existing <path>s from previous scribbles.

Take a look at js/svg-scribbler.js for details.

“Web Component” for Hershey text

Similarly, the <svg-hersheytext> component takes care of listening for changes as you type in the <textarea> and re-rendering the <path>s for the text contents.

One wrinkle here is that we have a <select> dropdown to let you select a different Hershey font. Previously, a jQuery change handler on the <select> for choosing a Hershey font would load the newly selected font and then call what amounted to a top-level “render” function to draw all Hershey text and scribbles again.

The updated version uses a simpler event handler that emits a custom HersheyFont:updated event. <svg-hersheytext> elements listen for that custom events on the window object, and re-renders.

If you haven’t used them, I think Chris Ferdinandi does a great job explaining the how and why of custom events.

MutationObserver for SVG output area

Wrapped up in the previous spaghetti of “render-everything” style calls was a stop to generate an SVG string and slap it in a <textarea>.

Now that the most of the SVG stays around in the page, I’ve replaced that with a MutationObserver that kicks off whenever elements are added or changed down in the SVG tree. I love this!

Known Issues

Naive pointer* events handling does unexpected things on multi-touch devices

For example, this two-finger drag makes kind of a zig-zaggy filled-in area instead of two distinct lines:

I think this is fun and weird, actually.

inkscape-unicorn is deprecated!

Yeah so the tool this was designed to make drawings for isn’t really a going thing in 2024.

Um. Sorry? Enjoy your SVG scribbles anyway!

Tiny notes as I work on migrating my IndieWeb webring 🕸️💍 to a new tech stack.

Downloading the database from the glitch.com project’s .data folder was easier than I thought.

I’m also working with a slightly different schema to drop the unmaintainable emoji slugs, so learning the sqlite3 syntax for selectively dumping columns was very helpful!

Still a few rough edges to knock off, mostly around making sure I can successfully fetch folks’ pages and find the webring links on them, but it’s close!

Update 2025-05-25: OwnYourGram retired in 2024 and Glitch retired project hosting in 2025. I've updated links below to point to archives where possible.

This post gives more technical detail for the recent talk that I gave at Bring-a-Hack NYC. In it, I describe a system that copies posts from Ghost Party's Instagram automatically to the Ghost Party Website at ghostparty.today.

This roughly works like so:

• OwnYourGram periodically checks our Instagram for new images
• For each new post, it makes a Micropub request to a service that I wrote for this purpose.
• The endpoint accepts the image files and uploads them to our site using the Neocities API. Then it creates some new HTML from the micropub post data, edits the site's main index.html page to include the content, then uploads it back to Neocities.

Authorization with IndieAuth

One missing step in that rough outline is the bit where we tell OwnYourGram *how* to post to our site via Micropub, as well as making sure that OwnYourGram can prove that we have given it permission to post there. Many Micropub clients support IndieAuth as a way to do this permission-granting step (known as authorization). With a typical personal website, I'd delegate this process to indieauth.com, which lets you offload the step of "proving" that you own the website where you're trying to post by instead letting you log into an existing social network account.

ghostparty.today is a shared website, so I thought a simpler way to approach this would be to create a custom authorization endpoint that accepts a password. I could give this password to other GHOST PARTY folks and they can post whatever they like.

Some nice folks in the IndieWeb community had already created an authorization endpoint that works this way, called selfauth. I created a pretty simplistic port of selfauth from PHP to JavaScript using NodeJS on the awesome Glitch social code hosting platform. It needs some more robust error checking, and some micropub clients seem to have trouble with it, but it works with OwnYourGram and Quill, so it's Good Enough for now!

If you're interested, you can find the archived source for this endpoint here: https://git.schmarty.net/schmarty/befitting-price

Micropub Endpoint

Finally, there's the Micropub endpoint itself. I based mine off of this Glitch micropub project, created by Adam Bachman at IndieWebCamp Baltimore this year. Specfically, I took the bits that verify the access token. From there, it was a matter of stumbling through various bits of handling a Micropub post, pulling in extra libraries as I needed them. I slowly added support for saving uploaded files to our Neocities site via the Neocities API, then for generating an HTML snippet for the new post, and finally for adding the post to the site's main page.

The process for adding the generated post content to the site itself is extremely retro. The Micropub endpoint actually downloads the HTML from https://ghostparty.today/index.html. Inside there is a comment that looks like:

<!-- NEW POSTS BELOW -->

So the new contents for index.html is everything before the comment, the comment, the new content, and then everything after the comment. Once that's constructed, the endpoint uploads index.html back to Neocities with the new contents.

You can find the source for the Micropub endpoint here: https://git.schmarty.net/schmarty/prism-dirt

It should be possible to fork the project on Glitch and configure it to work with your own Neocities site! You'll need to use cURL with the Neocities API to generate an authorization token to configure the app, rather than saving username and password info in the project!

Making ghostparty.today "IndieWeb-Readable"

The GHOST PARTY site follows an extremely old-school publishing model where each post only exists as a small section of HTML on a single long page. This complicates things a bit because interacting with posts on the IndieWeb typically requires three things:

• A machine-readable "identity" h-card that says "who" this website is, including a logo, the site name, canonical URL.
• A machine-readable feed that contains new posts, allowing people to follow our updates in their favorite indie reader.
• A separate permalink URL for each post, containing machine-readable info about that post, allowing other IndieWeb sites to "understand" the content when they want to RSVP to events, repost or like photos, and more.

Microformats2 parsers like X-Ray do a great job at parsing HTML page into meaningful data, but the programs that use the parsed data usually stop at the first thing they find. So, if I ask X-Ray to parse https://ghostparty.today/, this is what it sees:

{
  "data":{
    "type":"card",
    "name":"GHOST PARTY",
    "url":"https://ghostparty.today/",
    "photo":"https://ghostparty.neocities.org/ghost-party-logo.png"
  },
  "url":"https://ghostparty.today/",
  "code":200
}

This is great in that it contains the "identity" information that we want the page to have. However, that page also has a feed! How can I get at that? By telling X-Ray to only look at a fragment of the page! Here's how X-Ray sees https://ghostparty.today/#feed: 

{
  "data":{
    "type":"feed",
    "items":[
      {
        "type":"entry",
        "published":"2018-03-07T16:44:16+00:00",
        "url":"https://ghostparty.today/#2018-03-07-181020",
        "photo":["https://ghostparty.today/uploads/2018-03-07/181020-ig0LN1JG.jpg"],
        "content":{"text":"snow day selfie #snowday #snowfie #ghoststories"} 
      },
      {
        "type":"entry",
        ...
      },
      ...
    ],
    "url":"https://ghostparty.today/#feed",
    "code":200,
    "info":{"found_fragment":true}
  }
}

Data! Nice! So if we want to follow ghostparty.today with an indie reader, we use https://ghostparty.today/#feed as the URL.

Looking at the content of the feed, you'll notice that the individual items have a url property which also has a fragment ID in the URL. This allows IndieWeb sites to interact with a particular post, even though it's one of many on the same page. For example, I was able to create an RSVP post to the most recent Ghost Party show, and (by looking just at the content in the fragment at https://ghostparty.today/#show-2018-02-14) my site was able to pick up the machine-readable details about the event to display them on my own site.

The microformats markup for the h-card and h-feed are built into the index.html file itself and don't change very often. However, for each new micropub post we need to convert those properties into a chunk of HTML for the index.html page that also contains the microformats h-entry markup. To do this, I made this Handlebars template:

{% raw %}<div class="h-entry" id="{{ mp-slug }}">
  <a class="u-author" href="/"></a>
  <a class="u-url" href="#{{ mp-slug }}">{{#if name}}<h2 class="p-name">{{ name }}</h2>{{/if}}</a>
  <time class="dt-published" datetime="{{ published }}"></time>
  {{#if video}}
    {{#each video}}
      <video controls loop class="u-video" src="{{ . }}"></video>
    {{/each}}
  {{ else }}
    {{#each photo}}
      <img class="u-photo" src="{{ . }}" />
    {{/each}}
    {{#each audio}}
      <audio class="u-audio" src="{{ . }}"></audio>
    {{/each}}
  {{/if}}
  <div class="e-content">{{ content }}</div>
</div>
<img src="ghosts.gif" />
{% endraw %}

Not so bad!

Resources

Here's a collection of some of the other libraries and docs I used to pull this thing together:

• Neocities API
  • Includes details on using cURL to get an authorization token.
  • There’s a Node module for the Neocities API, but it uses username and passwords, so I just used regular HTTP requests to handle talking to Neocities.
• Node Request HTTP Client
  • Verifies the authorization token by querying the token endpoint (I used tokens.indieauth.com for this)
  • Handles uploading files like images to Neocities via their API.
  • Used to fetch index.html from the site and later to writes it back via Neocities API.
• ES6 Promises
  • There's a lot of asynchronous code that waits for network requests. This code is very Promise-heavy to handle that.
• Handlebars templating
  • Made it easy to take the Micropub properties for a new post and rendered them into HTML content with microformats.
• Express 4 API
  • Glitch uses Node and Express 4 by default, and I got to learn lots about it!
• Multer Express Middleware
  • For handling uploaded files
• Body Parser Express Middleware
  • For handling regular Micropub properties
• Validator.js
  • Half-using this for the authorization endpoint, need to clean it up and finish it up!
• OwnYourGram API docs
  • Shows what properties are sent over Micropub, so you know exactly the kind of data your Micropub endpoint will need to handle.