Aaron Parecki

Quill started out as a sample Micropub client with a lot of useful debugging information. As it's grown, I've been slowly adding more posting interfaces to Quill, and tweaking them to look less like a debugging tool and more like a real app. Instead, micropub.rocks has taken over as a more detailed debugging utility for building a Micropub endpoint, so I can now optimize Quill for being more user-friendly and less developer-focused. At IndieWebCamp Germany in 2015, I added a rich editor to Quill, inspired by the clean Medium interface. You can even use the Quill rich editor without being logged in! It will save the post to your browser's localstorage as a draft, and let you post it after you log in. I wanted to make an interface that anybody would feel comfortable writing in, and be able to show it to people without them first logging in, as an introduction to what it might look like to have nice writing applications that aren't tied to a specific backend like Medium.In order to help people get started with Quill, today I wrote some more documentation for it!When you're logged out and click the "publish" button, it prompts you to log in and links out to the documentation home page.

Today I started autolinking the text in comments on my website, and made a couple other minor improvements to how they look.Previously, links, @-names and hashtags were rendered as plaintext, so comments weren't clickable.

I've been using Quill to write all these #100DaysOfIndieWeb posts, which is a great way to find the pain points in the interface. After having written 14 articles in the last 14 days, the main thing I want to be able to do is start an article here in the Quill editor, save it as a draft to my website, then open up the raw HTML to make fine-grained edits, and only after I'm done, actually publish it.

If you know me, you probably know that I log everything I eat and drink and post it to my website. A couple years ago, I wrote a small Pebble app that allowed me to quickly post common food and drink from my watch! Coincidentally around the time Pebble announced that FitBit had acquired their assets, my Pebble stopped working completely. This meant I no longer had a quick way to log food, and have to pull out my phone again to make log entries.This afternoon, Tantek suggested that I use my Amazon Alexa to post food and drink to my website instead! Of course this will only work when I'm at home, but it turns out that I'm home a lot of the time I'm eating and drinking. I also eat tacos every day, so it'd be great not to have to get out my phone during breakfast.So today, I launched Alexa integration for Teacup, the app I use to track my food.This was quite a challenging project given all the moving parts involved. I started by defining the voice interface I wanted to use. Interaction ModelVoice interactions for Alexa apps have to follow a pretty strict structure. Alexa doesn't support interpreting fully unstructured text, so app developers have to define patterns that Alexa can match on. Invoking any Alexa app involves first speaking the trigger word, followed by a keyword such as "ask" or "tell" followed by the app name, and then the pattern of text the app wants to match. So for Teacup, this results in speaking sentences such as:"Alexa, tell Teacup I drank coffee""Alexa, tell Teacup I ate tacos"This gets turned into what Amazon calls the "Interaction Model", and is a list of "slots" along with corresponding keywords for each slot, as well as writing out some sample sentences.LIST_OF_ACTIONS = ate | drankLIST_OF_FOOD = Coffee | Cocktail | Beer | Tacos | Mac and Cheese | ...Sample utterances:"I {Action} {Food}""I {Action} a {Food}"It isn't clear to me whether the list of keywords I provided is the complete set, because while I was testing, it managed to post the word "on" for the food, which is not in my list.AuthenticationThe next challenge was linking user accounts between Amazon users and Teacup users. Amazon provides great documentation on this, and thankfully it's all based on OAuth 2.0 rather than having made up some other model themselves. Essentially, the Amazon Alexa app on your phone acts as an OAuth 2.0 client, and you have to build an OAuth 2.0 server into your app that it works against. This is a pretty clever solution actually. Luckily, I'm pretty familiar with OAuth 2.0, so I was able to build this out pretty quickly.One thing struck me about Amazon's recommendations about building OAuth support in your app. They say that they'll launch your authorization URL from inside the iOS app, which is a known antipattern for apps in general. In Amazon's docs, it says "The user logs in using their normal credentials for your site." This is a really bad idea. You never want to train your users to enter their passwords into random apps. This is the whole reason we have OAuth in the first place!

Yesterday, Amy was asking if there was a library for drawing curved lines between two points on a map. She wants to use this for her travel posts, which say for example "Tokyo to Boston". We noticed that Facebook draws curved lines when they show a planned trip. Martijn was able to figure out how to reproduce this on Facebook consistently. You have to start by creating a "checkin" post, then add a "traveling to" activity to it. Notice that the line from Portland to Seattle is curved rather than straight, although it doesn't strictly follow a Great Circle line either.

Today I added some additional settings to OwnYourGram. You can now configure a whitelist and/or blacklist of keywords to control which of your Instagram posts are imported to your website.

The other day I read a pretty funny blog post called "10 things I learned making the fastest site in the world". It's a little tongue in cheek, but overall has some good tips. One that caught my attention was the section on using web fonts.

Webmention.ioDay 3: The avatars for comments/likes/etc that Webmention.io processes will now always be 256 pixels maximum. This avoids showing potentially large images shrunk down when displaying comments.Day 10: HTML status pages for webmention.io 

Yesterday I added a Webmention form at the bottom of my posts. If you used this form, it would show you a "check status" link after accepting the Webmention request. My Webmentions are all handled by webmention.io, and its status URLs return a JSON response. This isn't particularly friendly when someone views one of these URLs in a browser, since they just see a raw JSON blob.Today I updated webmention.io to return all responses in HTML if they're made from a browser. It checks to see if there is text/html in the Accept header, and returns HTML if so, otherwise returns JSON as normal. Now when you view one of these status links, you'll see something like this.

I finally brought back the Webmention form on my website! At the bottom of my posts, you'll see a Webmention form now!

I've never really been a fan of using pinned posts on my Twitter profile, so I didn't expect this would be something I wanted on my own website. On my own home page I can just write whatever I want above my posts, so I don't really need "pinned posts" there either. However I just found a use for pinned posts, but not on my home page!I've been sharing the link to my 100 days tags with people as a way to share the content quickly. I wanted to be able to have a little intro post above the list of posts, and I realized that "pinned posts" matched the pattern of what I wanted pretty nicely! So now, on tag and channel pages on my site, I can mark a post as "pinned" and it will always show up on top! The first post I've pinned is on my #100DaysOfIndieWeb tag page.

A while ago, inspired by @adactio, I had added sparklines to my home page and tag pages. After having them for a while, I realized that my tag pages would look better as sparkline bar charts instead of as a plain line.The lines looked fine for tags that had a lot of data, but didn't look good when there were only a few data points.

Previously, OwnYourGram would check all users' Instagram feeds once an hour. I changed it to have four polling tiers, and the interval for the top tier is every 15 minutes now. This means people who post lots of photos will now see their photos on their site sooner, and because of the tiered approach, I won't be wasting resources on feeds that post infrequently.The four tiers are:Every 15 minutes (on the 0, 15, 30 and 45 minute mark) - 11 usersEvery hour (5 minutes after the hour) - 12 usersEvery 6 hours (at 00:10, 06:10, 12:10, 18:10 UTC) - 11 usersOnce a day (at 01:10 UTC) - 38 usersUsers are sorted into tiers based on the number of photos posted in the last 14 days. The more you post, the more often OwnYourGram checks your feed! If your Micropub endpoint returns an error, then you're bumped down a tier. If you're at the lowest tier and there's an error, then polling will be disabled completely until you log back in.Thanks to snarfed for suggesting the tiered approach!

I finished two updates to OwnYourGram today.There is a new page when you log in where you can see a list of your 20 most recent photos on Instagram, check whether they've been posted to your website already, and re-post any if you need to!

Knocked out a couple of minor UI improvements to Quill this morning. Previously, the reply context field would show the whole note, so super long notes or blog posts would take over the whole screen. (Issue 62)

Whenever my website receives a comment, like, repost, or other mention, I display those responses on the post's permalink, along with author information if available. For likes and reposts, I show the profile photo in a list, so there are sometimes lots of photos there.

Inspired by the "100 Day Project", I'm setting out on a goal to accomplish 100 days of visible improvements to my IndieWeb projects. The challenge is to ship something visible and post about it for 100 days. Some of the improvements may be super tiny, some of them might be big. The only requirements are that it is an improvement to something I use myself, and it must also have a publicly visible result. This means an improvement to a closed source tool that only I use doesn't count, but if it's an improvement to something like Quill, which others can use, then that counts.The other part of the challenge is to make a post illustrating each improvement with a screenshot or short video. I am posting them with the "#100DaysOfIndieWeb" tag on my website so they all appear there!If you're interested in joining the challenge, it's never too late to start! Read more on the IndieWeb wiki, and add yourself there!

Earlier this year when I launched XRay, I connected Loqi the IRC bot to it so that we would get inline IRC text previews when people linked to web pages in IRC. XRay works by finding an h-entry on the page, and getting the content and author information from it. Here's what it normally looks like in IRC.

This is a description of all the pieces and tools that I use to post to my website and handle comments and responses. Many of the pieces are open source and/or based on open protocols that you can implement yourself.WritingI write posts using an app called Quill. It's an open source application that I wrote. I run a hosted version at quill.p3k.io, and you can run it on your own server if you want as well. Quill provides an interface for posting longer blog posts with embedded images like this, as well as short text notes, and a handful of other kinds of posts like bookmarks.Quill doesn't actually store any posts itself. It is just an interface for writing posts.When I click the "post" button in Quill, it sends a Micropub request to my own website, which then creates the post and displays it on my website. Micropub is an API standard for creating short notes and posts, and it supports photos and videos too!You can start using Quill if your website supports Micropub. There are some Micropub plugins for various CMSs, and it's also not too hard to write an endpoint yourself if you're into that sort of thing.Posting to Twitter/FacebookI never write posts directly on Twitter or Facebook. Instead, I write a post in Quill, and then check the boxes for where I want to syndicate the post.