Aaron Parecki

Day 70: Editing Reposts in Quill

Now that I have a basic pattern for supporting edits in Quill, I was able to quickly add support for editing reposts today. It works the same as yesterday's project of supporting edits of "likes", where the main "edit" page detects the "repost-of" property in the post and redirects to the repost interface. Not much else to say about today's project other than that!

Aaron Parecki

Day 70 - Finale

Day 70. This didn't quite come out the way I wanted, I think all the chord hits might need more filling out with additional instruments. I had fun piecing together video effects to go along with the music though!

Aaron Parecki

Day 69 - Timeless

Day 69. Today's song is basically in no time signature, and features the electric cello again. It's a simple theme that I developed by flipping the notes and playing through it in a few different chords. There's a faint harp sound that helps provide context, and there's a soft droning soundscape under everything.

Aaron Parecki

Day 69: Initial Editing Support for Quill #100DaysOfIndieWeb

Today in Things I Should Have Done Ages Ago... I finally started adding support to Quill for editing posts. I'm going to have to build this out one by one for each post interface Quill supports, so I started with the easiest one, favorites.

Eventually I will add an "edit" button to my bookmarklets, which is currently how I access most of Quill for writing posts, replies, bookmarks, etc. 

(I used to have cute icons there, but they disappeared long ago during some syncing process in Chrome.)

The bookmarklet will have code like the below:

javascript:(function()%7B window.location = "https://quill.p3k.io/edit?url=" + encodeURIComponent(window.location.href)

The "/edit?url=" route in Quill does a Micropub query for all source properties, and inspects which properties come back. Depending on which properties are present, Quill then redirects to the appropriate editing interface based on the type of post it detects. For example, if it sees a "like-of" property in the post, then it redirects to "/favorite" with the post's URL in the query string. 

The "/favorite" page then does a Micropub query for the specific properties it will edit (in this case, only the "like-of" property), and fills the URL in the form. When you click "Save", it makes a Micropub edit request to replace the value of the "like-of" property.

I'll be making more (slow) progress on adding editing support to the rest of the interfaces!

Aaron Parecki

Day 68: h-recipe Import for BarBot #100DaysOfIndieWeb

I've been putting the finishing touches on my robot that can mix cocktails over the last few weeks.

One of the last steps was to build up the recipe database for it. I knew I wanted to have some sort of Microformats h-recipe integration, but this ended up working out better than I had hoped.

In the "Perfect Drink" iOS app, you can input the list of liquors in your cabinet, and it will show you the recipes you can make with those ingredients. I clicked the "share" button on one of the recipes, and it shared a link to a web page with the recipe.


I noticed that this web page happens to have Microformats 2 h-recipe markup in it! This meant I had a very quick way of getting these recipes into BarBot's recipe database, by parsing the Microformats!

I created an interface for parsing the recipe from a URL that has h-recipe markup and mapping it to a BarBot recipe. The interface is ugly, but it works!

When I want to add a recipe, the code parses the h-recipe, finds the name, photo and list of ingredients. It then presents me with an interface to map the list of ingredients in the recipe to the ingredients I have in my liquor cabinet. In this example, you can see I'm substituting Triple Sec for Cointreau.

This ends up being the quickest way to add recipes to BarBot's database!

Aaron Parecki

Day 68. I was determined to do something in under 30 minutes today. Decided to do something ethereal and mostly on the same tone to help make that easier. As weird as this is, I actually kind of like it.

Aaron Parecki

Day 67: Adding Image Alt Text in Quill #100DaysOfIndieWeb

With Quill's new image uploading UI, I was able to easily add a form field for specifying image alt text. This is a relatively new feature of Micropub, added thanks to a review by the W3C accessibility group.

When specifying alt text for an uploaded photo, the request is then sent as JSON format which will look like the below:

  "type": "h-entry", 
  "properties": { 
    "content": "Example post with an image", 
    "photo": { 
      "value": "http://example.com/photo.jpg", 
      "alt": "a photo of a globe" 

The Micropub endpoint can then store the alt text along with the photo, and display it in the page.

Please let me know if you end up adding support for image alt text to your Micropub endpoint!

Aaron Parecki

Day 67 - Whine

Day 67. I'm not super thrilled with this, but I have a bunch of other things I need to do today so I need to be finished. I like the opening bit with the filter that opens up for 2 bars, but I was having a hard time figuring out what else to do with this today.