How I post notes on my website

Over the holidays, I spent some time removing post types from my site in favour of publishing notes. Notes are short posts. So far, I have used notes to share my morning coffee, to ask about movies like The Matrix series, and more. I like being able to publish notes that are unstructured and free flow. Most of my thoughts are not long enough to turn into a blog post, even if they are something I would like to share.

While I removed some post types from my site, I made a few changes to my feed reader to make it easier to write and publish posts on my website. In this post, I'm going to describe how I publish notes on this website.

How I used to publish notes

I used to publish pieces of content in specific post types. I would share what coffees I was drinking using a form I had made. I done the same with RSVPs and other pieces of content that was not a blog post. This approach, having multiple forms to fill out, was not ideal. I did have a notes form that let me publish a note on my website but I didn't use it. I had so many other options that I didn't really end up using any one.

These forms were on my Micropub client, separate from my feed reader. Thus, not only did I have to find the right form to use, posting notes or coffee posts or any other type of post (excluding blog posts) involved going to another site.

That's when I decided to simplify and answer one key question: how do I make posting notes intuitive and easy?

How I post notes now

I decided to add a form to my feed reader that lets me post a note. This form makes posts as easy as possible to publish. I can publish a note, such as what coffee I am drinking or a random thought that came to mind, from the same place where I keep up with blogs. I don't have to use another tool to publish a note like I used to.

The note form looks like this:

The form appears at the top of my feed reader, above the list of posts bloggers I follow have published.

The form consists of four features:

1. A text box in which to write a note
2. A photo icon which, when clicked, lets me upload a photo.
3. A character counter to keep me in check so my notes will fit in a Tweet.
4. A post button.

On desktop, I can drag a photo into the text box to upload it to my site instead of using the photo icon to upload a photo. I found a great tutorial on the CSS Tricks website that goes into a lot of detail on how to make drag-and-drop file interfaces. I'd recommend giving it a read if you want to be able to drag and drop a file into a web page you are making.

The form accepts HTML so. This means I can add some structured markup to a post if I really want to. Or I could add an image tag. Or anything else that I might want to add. In practice, I don't really use this feature. Technically, the photo upload feature adds an image tag to the field but that's all automated.

I can use hashtags in my posts. For example, I have used #watched in a post. Using hashtags lets me collect my notes by category on my site. All of my hashtags automatically link to the corresponding post page. If you navigate to the #watched tag page, you will see all of the notes I have published with that tag. Only notes show up on those pages.

When I click the "Post" button, a Micropub request is made to my Micropub server. This request takes my note and turns it into a piece of content for my website. The content is marked up in front matter, the type of markup that my site uses to generate pages. Here is an example of the front matter generated by my Micropub server:

---
layout: post
categories: ["IndieWeb", "Post"]
title: "How I post notes on my website"
image_alt_text: "My feed reader home page"
---

When this front matter file has been created, it is added to my site. Because my site is built using a static site generator, it can take a few minutes for a note to show up on my site. This doesn't bother me.

Syndicating content to Twitter and micro.blog

While I was improving my notes workflow, I decided to experiment with syndicating my notes to Twitter and micro.blog, two social network services I use.

To publish notes to Twitter, I use brid.gy. brid.gy extracts information from HTML marked up with microformats and turns the note into a post on Twitter. brid.gy can also turn like posts and reposts into reactions on Twitter, although that is not part of my note publishing workflow. When I publish a note, an invisible link is added that links to brid.gy's Twitter publishing page. My site will send a webmention to that link after the note is published. That webmention instructs brid.gy to turn my note into a Tweet on my Twitter account.

micro.blog relies on a JSON Feed to post content from my site onto my micro.blog file. When I post a note, it is added to my notes feed. I have shared this feed on my micro.blog profile. micro.blog regularly polls the feed and uploads my notes to their service. This means you can follow me on micro.blog and keep up to date with all of my notes. I do not syndicate any other posts such as likes or articles to micro.blog, only notes.

These two methods of syndication mean you can keep up to date with my notes on more platforms, rather than having to subscribe to a feed or manually check back with my site.

Wrapping Up

I have published more notes using my new workflow in the last few days than I did in months back when I had lots of custom Micropub forms. I now have a single form to post text notes in. The form is a prominent part of my feed reader so it is easy to access. I can upload images to accompany my post if I like. And I can use HTML to mark up my notes in a certain way if I ever need to do so.

I enjoy being able to post shorter notes that you can follow. My notes are short-form and should be around the size of a Tweet. You can follow them to hear the thoughts that come to mind or to keep up to date with some things I am doing. I don't have a particular posting strategy in mind: I will post when I feel I have something to share.

Thank you for reading this article. If you have any feedback on this post or my approach, or would like to share how you post notes on your site, feel free to send me an email at readers@jamesg.blog.

Also posted on IndieNews.