Marty McGuire

Archive for March 2018

Sat Mar 31

This Week in the IndieWeb Audio Edition • March 24th - 30th, 2018

Show/Hide Transcript

Audio edition for This Week in the IndieWeb for March 24th - 30th, 2018.

You can find all of my audio editions and subscribe with your favorite podcast app here: martymcgui.re/podcasts/indieweb/.

Music from Aaron Parecki’s 100DaysOfMusic project: Day 85 - Suit, Day 48 - Glitch, Day 49 - Floating, Day 9, and Day 11

Thanks to everyone in the IndieWeb chat for their feedback and suggestions. Please drop me a note if there are any changes you’d like to see for this audio edition!

Tue Mar 27

🗓️ LARP: An Improv Adventure!

📆 Add to Calendar: iCal | Google Calendar

Join Dungeon Master Marty McGuire (that’s me!) as he takes three brave adventurers on a quest through a magical world. Dungeons, dragons and many other dangers await the improvisers that dare play his perilous game. For fans of improv, live action role-playing (LARP), neither, or both!

This show is part of The BIG Lab series in which Baltimore Improv Group’s comedy scientists take their newest experiments to the stage for further testing. The results may be explosive!

Tickets are only $5. Get them now at Eventbrite!

HWC Baltimore 2018-03-27 Wrap-Up

After a postponement due to snows on the first day of spring, Baltimore's second Homebrew Website Club of March met at the Digital Harbor Foundation Tech Center on March 27th. 

Here are some notes from the "broadcast" portion of the meetup:

jonathanprozzi.net – Talked about his recent experiments with Netlify and JAMstack. Had been researching static site hosting services for a while and found a lot of hype. After playing w/ Netlify he feels like it lives up to the hype! Was specifically interested in a static site generator called Gatsby, which uses the React front-end framework to render content.

derekfields.is – Been building a blog section for his site on a static site generator called Hexo. Found the theming stuff to be confusing and time-consuming, but has something working. Will eventually replace the theme with his own as he understands it more. Really likes the Hexo admin composer and compared with the editor for Ghost. Feels like the features help him write. Also setting up a Now.sh tiny server for a subdomain to host VueJS apps.

brksavage.com – Set a goal to do something creative and post about it every month. Did a big project for February (created a desk-sized piece filled w/ the word "bored"). Now writing it up and thinking about ways to make it easier to publish in the future.

www.dariusmccoy.com – Still building up momentum on his Wordpress site. Had a scare that he was locked out of his admin but got back in. Now that he has a working site, he is setting goals for himself about what he wants that site to have and how he wants to present himself there.

Robert (gnostech.net) – Working on owning his data. Has a Nextcloud service set up on his domain, where he can access all his data from his phone and more. Has been taking lots of notes about his home set up (Nextcloud, Let's Encrypt, ad filtering firewall at home, and more). Wants to build a blog to share both how-tos on what he has set up and how, but also the way he decided on his particular needs. Has been using NAS4Free to have more control over his home network storage.

martymcgui.re – Is finally back after missing several HWCs. He has definitely missed them! Talked about the need for indie readers that allow reading and posting reactions to personal sites all in one. Demo'd Together, and Monocle Microsub clients as well as Aperture for Microsub server to handle all the nitty-gritty of fetching and parsing feeds.

Other discussion:

  • Derek started us off with a really nice warm-up. We took turns with each person sharing compliments/thanks/encouragement about things people are working on and/or doing for and/or learning from one another. (This was seriously really nice).
  • JAMstack (Javascript, APIs, Markup). Name was coined because some "static" sites have lots of dynamic functionality.
    • Jonathan gave a demo of Netlify serving pages from a GitHub repo. Talked about how lots of different workflows can be used to manage content (e.g. Ghost, Netlify CMS, etc) without worrying about the final step of compiling the source into HTML and serving those static pages. Netlify has tons of features in the free tier (SSL with Let's Encrypt, support for forms, and more).
    • Q: How do they make money? A: Great question! They're advertised all over the place in the web design world. Maybe consulting? For example, they did a huge redesign for Smashing Magazine.
    • Q: Do we have to use GitHub? A: That's all Jonathan has played with so far, but they probably support other source control services.
    • Q: What content goes in the Git repo? A: The source content, templates, etc. E.g. the output of "hexo init".
    • Q: How does the DNS setup work? A: Netlify gives you IP addresses and you point A records at them. Same way you would for a Digital Ocean droplet or other virtual server.
    • With custom domains, pulling content from GitHub, and tools like the (also free) Netlify CMS that ease editing, this could be a strong competitor for e.g. Wordpress.com sites, barring some initial setup pain.
    • Was able to replace FormSpree service with Netlify's free form handling service. He can see the submitted form data by logging into his Netlify account.
  • Talked about recent creepy Facebook news and efforts like cleverdevil's to escape it with our content intact. Marty was inspired by that to grab his Facebook content with fb-export and the DownAlbum extension for Chrome.
  • If Facebook goes away or runs into issues, what happens to projects like React or their other open source projects?
  • Would a giant like Amazon step up? What would an Amazon social network look like?
  • If Facebook actually "falls" (however unlikely), would another centralized social network "win"? Probably!
Left-to-right: dariusmccoy.com, jonathanprozzi.net, gnostech.net, martymcgui.re, derekfields.is, brksavage.com

Thanks to everybody who came out! We hope to see you all again at our next meeting on Tuesday, April 3rd!

Photo for tonight’s HWC Baltimore!

Tue Mar 20

🗓️ Homebrew Website Club Baltimore

📆 Add to Calendar: iCal | Google Calendar

This is a make-up event for last week’s meetup which was canceled due to weather!

Reminder: We are now meeting on Tuesdays instead of the usual Wednesdays. Be sure to double-check your calendars!

Join us for an evening of quiet writing, IndieWeb demos, and discussions!

  • Create or update your personal web site!
  • Finish that blog post you’ve been writing, edit the wiki!
  • Demos of recent IndieWeb breakthroughs, share what you’ve gotten working!
  • Join a community with like-minded interests. Bring friends that want a personal site!

Any questions? Join the #indieweb chat!

Optional quiet writing hour starts at 6:30pm. Meetup begins at 7:30pm.

More information: https://indieweb.org/events/2018-03-27-homebrew-website-club

Facebook event: https://www.facebook.com/events/169186360401116/

Sat Mar 24

This Week in the IndieWeb Audio Edition • March 17th - 23rd, 2018

Show/Hide Transcript

Facebook quitters, a Puny micropub server, and where’s the love for future generations?

It’s the audio edition for This Week in the IndieWeb for March 17th - 23rd, 2018.

You can find all of my audio editions and subscribe with your favorite podcast app here: martymcgui.re/podcasts/indieweb/.

Music from Aaron Parecki’s 100DaysOfMusic project: Day 85 - Suit, Day 48 - Glitch, Day 49 - Floating, Day 9, and Day 11

Thanks to everyone in the IndieWeb chat for their feedback and suggestions. Please drop me a note if there are any changes you’d like to see for this audio edition!

All of Hostel in one place?? Time for a troupe photo! Also, what a fun set we did!

Fri Mar 23

Pre-show hang with Hostel! Come see us tonight at 9pm! Tickets only $5 at bigimprov.org.

Tue Mar 13

🗓️ Homebrew Website Club Baltimore

📆 Add to Calendar: iCal | Google Calendar

NOTE: Tonight’s meetup has been canceled due to snow on the first day of spring!

Please join us next week for a make-up meet-up!

Reminder: We are now meeting on Tuesdays instead of the usual Wednesdays. Be sure to double-check your calendars!

Join us for an evening of quiet writing, IndieWeb demos, and discussions!

  • Create or update your personal web site!
  • Finish that blog post you’ve been writing, edit the wiki!
  • Demos of recent IndieWeb breakthroughs, share what you’ve gotten working!
  • Join a community with like-minded interests. Bring friends that want a personal site!

Any questions? Join the #indieweb chat!

Optional quiet writing hour starts at 6:30pm. Meetup begins at 7:30pm.

More information: https://indieweb.org/events/2018-03-20-homebrew-website-club

Facebook event: https://www.facebook.com/events/151561025522358/

Tue Mar 20

Unfortunately we had no time to find a guest this week, but we did enjoy ourselves at the American Visionary Art Museum’s fundraiser for the Kinetic Sculpture Race 2018!

https://wehavetoask.com/episodes/2018-03-20/

post from Do We Have Time For This? • Ep 8 - Toga Party
Marty and Jonathan squeeze in a toga party. Did they stay long and did they have fun? Yes they did. Sorry, they don't have time to wait for your guesses.
📗 Want to read Kill Process by William Hertling
Mon Mar 19

🎧 Listened to “An Indieweb Podcast Episode 0” by David Shanske and Chris Aldrich.

I really enjoyed this pilot episode! I was particularly interested in some of the discussion around annotations for audio. I think I’ll spend some time noodling on using Jon Udell’s clipping tool to generate shareable snippet URLs, and updating my webmention handling to try and turn mentions with media fragment timestamps into pretty annotations.

https://david.shanske.com/2018/03/18/an-indieweb-podcast-episode-0/

post from An Indieweb Podcast Episode 0
http://storage.weneca.com/Indieweb/Indieweb0.mp3This is a test episode of An Indieweb Podcast(working title). In it, Chris Aldrich and I talk about a variety of Indieweb topics, with the theme of Considering the User, inspired by an article we were reading.
Sun Mar 18

This Week in the IndieWeb Audio Edition • March 10th - 16th, 2018

Show/Hide Transcript

Audio edition for This Week in the IndieWeb for March 10th - 16th, 2018.

You can find all of my audio editions and subscribe with your favorite podcast app here: martymcgui.re/podcasts/indieweb/.

Music from Aaron Parecki’s 100DaysOfMusic project: Day 85 - Suit, Day 48 - Glitch, Day 49 - Floating, Day 9, and Day 11

Thanks to everyone in the IndieWeb chat for their feedback and suggestions. Please drop me a note if there are any changes you’d like to see for this audio edition!

Fri Mar 16
📗 Want to read Automating Inequality: How High-Tech Tools Profile, Police, and Punish the Poor by Virginia Eubanks ISBN: 9781250074317
Tue Mar 13

Thanks to our guest Kathleen Williams for uncovering the hidden gems in this week’s We Have to Ask Podcast!

You can find Kathleen on Friday nights at Baltimore Improv Group performing with Old City Improv. Also, please support the wonderful and important work by House Of Ruth Maryland!

https://wehavetoask.com/episodes/2018-03-13/

post from Why Pay Retail? • Ep 79 - Thrift Scavenging with Kathleen
Marty and Jonathan search for the real deals with their guest Kathleen. They discover the tips to finding real treasures in others trash. Kathleen discusses her best finds and the one that keeps slipping through her hands.
Mon Mar 12

Micropub for a static Neocities website

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!

Interface displaying text 'You are attempting to login as https://ghostparty.today/ with client https://quill.p3k.io/' along with a password prompt.
Enter the password to get authorized!

If you're interested, you can find the source for this endpoint here: https://glitch.com/edit/#!/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://glitch.com/edit/#!/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.

A Ghost (Party) is Haunting the Silo'd Web

This post is a rough summary of a lightning talk that I gave on February 28th at the Bring-A-Hack NYC with Hackaday + Ultimaker + New Lab. Many thanks to Shayna Gentiluomo for organizing and sometimes co-conspirator Matt Griffin for nudging me to speak!


I have a lot of distrust for social silos like Facebook and Twitter which draw us in with the promise of connecting with family, friends, and interesting people, but I sometimes have trouble articulating that in a succinct way. Thankfully, I saw a perfect example this morning:

Posting on the @facebook website is not working in Mac OS today. JavaScript eats CSS & HTML, making data entry field disappear except for a spookily disembodied close-box X. Been this way a few hours. — @zeldman, 9:53 AM - 28 Feb 2018

Some Facebook team pushed an (untested?) update which broke the website, preventing some users from posting. "Move fast and break things". These silos don't value us or our content. So, we should get out. But what is the alternative?

The IndieWeb helps us take our content back, by posting to our own websites on our own domains. With some work, we can even get the benefits of these social networks and take our conversations with us. There’s a whole lot of great stuff on the IndieWeb website, so go spend a couple of days reading it. But I’m not here to talk about all those good things today. I’m here to talk about how I used them to do a dumb hack.

ghostparty.today is a website for Ghost Party – an improv project that has a ... certain aesthetic. Specifically the website was pitched as “exactly like the Heaven’s Gate website” but we compromised on “extreme Geocities”.

Ugly large text says 'Welcome to GHOST PARTY'
We have an aesthetic.

My Ghost Party co-host (co-ghost) built the first version of the site on Neocities.org, a lovely hosting provider that recaptures the feel of editing raw HTML directly in your browser. However, hand-editing HTML gets exhausting and sometimes you just want to post things to Instagram (and, of course,  Ghost Party has an Instagram).

And Instagram is fine as a marketing platform! Lots of people look at it and like the pictures. But what about our website? Our aesthetic?

Micropub is a standard (and now W3C Recommendation) designed over some years of practice from the IndieWeb community that defines a way for apps and clients to easily make new posts to any website (even yours) if it supports Micropub.

I used Glitch, an amazing community and JavaScript-server-app hosting service, to make a simple micropub service for ghostparty.today.

Screenshot of code in the Glitch UI

It accepts posts via micropub, including file uploads, and uses the Neocities API (hey, it’s not the 90s! Neocities has an API!) to upload the files to our website. Then, it fetches our site’s index.html, adds the content of the new post, and uploads it back. You can find the source here on Glitch and fork it for your own purposes!

Now that our site supports micropub, we can make use of a wonderful service called OwnYourGram. Once we give OwnYourGram permission to post to our site and read our Instagram feed, it will poll our Instagram account and copy each new post back to our website, where we can display it however we want.

Super simplified Instagram photo on Ghost Party website
Aesthetic

We can go a step further, using an IndieWeb building block called Webmention and a service called brid.gy, to bring all of those responses, those Instagram and Facebook likes and comments, Twitter retweets, and more, back to our site for display.

And to show how it works, here’s a micropub client call Quill that works for any micropub-enabled site. Let’s make a quick post, now!

Posting interface with 'Hello from New Lab' typed into note field
Quill's note interface

Once we hit the "Post" button and refresh the homepage, we can see the new post on the site!

'Hello from New Lab' text with ghost separator image
Aesthetic

This was the end of time time. I would have like to further encourage folks to check out Homebrew Website Clubs in their own communities, or to start one if they don't exist. They're part show-and-tell, part support group, and part mad science lab for people who love the web!

Sat Mar 10

This Week in the IndieWeb Audio Edition • March 3rd - 9th, 2018

Show/Hide Transcript

Audio edition for This Week in the IndieWeb for March 3rd - 9th, 2018.

You can find all of my audio editions and subscribe with your favorite podcast app here: martymcgui.re/podcasts/indieweb/.

Music from Aaron Parecki’s 100DaysOfMusic project: Day 85 - Suit, Day 48 - Glitch, Day 49 - Floating, Day 9, and Day 11

Thanks to everyone in the IndieWeb chat for their feedback and suggestions. Please drop me a note if there are any changes you’d like to see for this audio edition!

Fri Mar 9
🔖 Bookmarked https://adactio.com/journal/13562

Super excited to support The Dungeon Rats in their new Patreon!

If you back at the $5 level or above, you get access to the stream archives, including a live show where I got to play in with the Rats! What! You can even see my face in their Patreon video. 😱

Some photos of a rad lobby installation in NYC with parts designed and fabbed by @blinkinlabs.

Thu Mar 8
📗 Want to read Hackerspaces: Making the Maker Movement by Sarah R Davies ISBN: 9781509501168
📗 Want to read New Dark Age: Technology, Knowledge and the End of the Future by James Bridle
Tue Mar 6

Thanks to guest Samantha Schwartz for finding the right words in this week’s We Have to Ask Podcast!

https://wehavetoask.com/episodes/2018-03-06/

post from What's Between the Lines? • Ep 97- "Life In The Midwest" Author Burnadette Toboggan
Marty and Jonathan have a sit down interview with author Burnadette Toboggan. They discuss what makes her series of novels, "Life in the Midwest", so interesting to her readers. Learn about her back history and what was the starting point for her writing.
Sat Mar 3

This Week in the IndieWeb Audio Edition • February 24th - March 2nd, 2018

Show/Hide Transcript

Audio edition for This Week in the IndieWeb for February 24th - March 2nd, 2018.

You can find all of my audio editions and subscribe with your favorite podcast app here: martymcgui.re/podcasts/indieweb/.

Music from Aaron Parecki’s 100DaysOfMusic project: Day 85 - Suit, Day 48 - Glitch, Day 49 - Floating, Day 9, and Day 11

Thanks to everyone in the IndieWeb chat for their feedback and suggestions. Please drop me a note if there are any changes you’d like to see for this audio edition!