Ideas for IndieWeb-ifying

I use regularly as part of my daily workflow. I’m also very interested in being able to “own” the data I generate with the tool and being able to keep it on my own digital commonplace book (aka website). As part of this, I’d like to be able to receive notifications from people publicly annotating, highlighting, and replying to my content and potentially display those directly on either my website in the comments section or as marginalia.

I’d promised to do a quick outline for the kind gang at to outline how to make their product could be a bit more open and support some additional web standards to make it more IndieWeb friendly as well as to work toward supporting the Webmention protocol to send notifications of annotations on a page. A few weeks ago at IndieWebCamp New Haven I decided to finally sketch out some of the pieces which should be relatively easy for them to implement into the product. Below are some of the recommendations and some examples of what needs to be done to implement them into their platform to allow it to better interact with other content on the web. This post is in reply to a few prior conversations about Webmention, but primarily pertains to Microformats which will help in creating those. [1] [2] [3] [4]


To my knowledge generates a hash for each annotation it has in the system and generates two separate, but related URLs for them. As an example, here are the two URLs for a response Jon Udell made on my website recently:

The first URL is where a stand-alone copy of the annotation lives on the web, separate from the content it is related to. screen capture of the content at URL The second URL resolves to the page on which the annotation was made and both will automatically open up Hypothesis’ side drawer UI to the annotation in question and will–on most browsers–auto-scroll down the page to show the point at which the annotation was made. Essentially this second URL shows the annotation in-situ in conjunction with the user interface. I’ll note that they can also have some human readable trailing data in the URL that indicates the site on which the annotation was made like so: However, in practice, one could remove or replace the and trailing portion with any other URL and the correct page will still resolve.

It is great that they make the first URL available with the relevant data. This in itself is very IndieWeb friendly to have each annotation in the system have its own stand-alone URL. Sadly all the data on this particular page seems to be rendered using JavaScript rather than being raw HTML. (See also js;dr.) This makes the page human readable, but makes it much more difficult for machines to read or parse these pages. I’d recommend three simple things to make more (Indie)Web friendly:

  1. Render the annotation on the first URL example in full HTML instead of JavaScript;
  2. Add the appropriate microformats classes on those pages;
  3. Add the canonical URL for the page on which the annotation is in reference to either instead of or in addition to the prefixed URL which already appears on these pages. Webmention functioning properly will require this canonical URL to exist on the page to be able to send notifications and have them be received properly.

These things would make these pages more easily and usefully parseable on the open web. If/when may support Webmention (aka web notifications) then all of these prerequisite pieces will already be in place. In the erstwhile, even without running code to support sending Webmentions, users could force manual Webmentions using services like Telegraph, mention-tech.appspot, or even personal endpoints generated on individual posts (see the one below) or on custom endpoint pages like mine on WordPress. Aaron Parecki’s article Sending your First Webmention from Scratch is a useful tutorial for those with little experience with Microformats or Webmention.

Types of Annotations and Microformats Markup

To my knowledge there are three distinct types of annotations that might occur which may need slightly different microformats mark up depending on the type. These are:

  1. Unassigned page notes (or sometimes orphaned page notes): For all intents and purposes are the equivalent of bookmarks (and are used this way by many) though they go by a different name within the service.
  2. Highlights of particular passages: In IndieWeb parlance, these are roughly equivalent to quotations of content.
  3. Highlights and annotations of particular passages: In IndieWeb terms these again are quotes of content which also have what might be considered a reply or comment to that segment of quoted text. Alternately the annotation itself might be considered a note related to what was highlighted, but I suspect from a UI and semantic viewpoint, treating these as replies is probably more apropos in the majority of cases.

Each of these can obviously have one or more potential tags as well. Some of the examples below include the p-category microformats for how these would logically appear. Using the example URL above and several others for the other cases, I’ll provide some example HTML with proper microformats classes to make doing the mark up easier. I’ve created some minimal versions of text and mark up, though obviously includes much more HTML (and a variety of divs for CSS purposes. While some of the mark up is a bit wonky, particularly with respect to adding the and the original posts’ canonical URLs, it could be somewhat better with some additional reworking of the presentation, but I wanted to change as little as possible of their present UI. For the minimal examples, I’ve stripped out the native classes and only included the semantic microformats. Because microformats are only meant for semantic mark up, the developers should keep in mind it is good practice NOT to use these classes for CSS styling.

Page note with no annotations (bookmarks)

Example from (but without the annotation portion)

<div class="h-entry">
    <a class="p-author h-card" href="">judell</a>
    Public on <>"Chris Aldrich on the IndieWeb"</a> (<a class="u-bookmark-of" href=""></a>)
    <time class="dt-published" datetime="2019-01-11 18:052:00" title="Friday, Jan 11, 2019, 6:52 PM"><a href="" target="_blank" rel="noopener">Jan 11</a></time>
<div class="p-category">tag-name1</div>
<div class="p-category">tag-name2</div>
<div class="p-category">tag-name3</div>

Page note with an annotation

(aka a reply, but could alternately be marked up as above as a bookmark) Example from

<div class="h-entry">
    <a class="p-author h-card" href="">judell</a>
    Public on <>"Chris Aldrich on the IndieWeb"</a> (<a class="u-in-reply-to" href=""></a>)
    <time class="dt-published" datetime="2019-01-11 18:052:00" title="Friday, Jan 11, 2019, 6:52 PM"><a href="" target="_blank" rel="noopener">Jan 11</a></time>
<div class="e-content">
<p>This is web thinking in action.</p>
<p>Well done!</p>


<div class="p-category">tag-name</div>

Highlights (aka quotes)

Example from

<div class="h-entry">
    <a class="p-author h-card" href="">judell</a>
    Public on <a href="">"As We May Think"</a> (<a class="u-quotation-of h-cite" href=""></a>)
    <time class="dt-published" datetime="2017-04-30 08:40:00" title="Sunday, Apr 30, 2017, 08:40 AM"><a href="" target="_blank" rel="noopener">Apr 30, 2017</a></time>
<blockquote>First he runs through an encyclopedia, finds an interesting but sketchy article, leaves it projected. Next, in a history, he finds another pertinent item, and ties the two together.</blockquote>

<div class="p-category">IAnnotate2017</div>

Annotations (replies)

Example from

<div class="h-entry">
    <a class="p-author h-card" href="">jeremydean</a>
    Public on <a href="">"As We May Think"</a> (<a class="u-in-reply-to" href=""></a>)
    <time class="dt-published" datetime="2015-09-02 15:11:00" title="Wednesday, Sep 2, 2015, 03:11 PM"><a href="" target="_blank" rel="noopener">Sep 2, 2015</a></time>
<blockquote class="p-in-reply-to h-cite">This has not been a scientist's war; it has been a war in which all have had a part.
<div class="e-content">
<p>It kind of blows me mind that the end of WWII is the context for these early dreams of the Internet. Is it the hope experienced in patriotic collaboration toward technological innovation? That's what Bush seems to acknowledge explicitly. It's a techno-militaristic union that haunts us to this day (#prism). But I wonder too if it's the precarious of knowledge, or perhaps the destructiveness of knowledge, that also inspires Bush…</p>


<div class="p-category">tag-name</div>

I’ll also note that there’s the potential of a reply on to a prior reply to a canonical URL source. In that case it could be either marked up as a reply to the “parent” on Hypothesis and/or a reply to the canonical source URL, or even both so that webmentions could be sent further upstream. (My experience in this is more limited, not having dealt with it personally in the past.) Once these pieces are implemented, they can be tested against a variety of microformats parsers to ensure they’re outputting the correct (and properly nested) information. I often find that pin13 is a pretty solid modern and up-to-date choice for this.

Additional resources with examples

I’ll also leave the caveat here, that while I’ve got a stronger grasp of Microformats than the average bear, that the above examples may have some subtle quirks that others may catch or which could be improved upon. I find that the Microformats web chat can be a good source for helps from some of the world’s best experts in the area. (Other methods for engaging in chat via IRC, Slack, etc. can be utilized as well.)

If Dan, Jon, or any of the gang has questions about any of this, I’m happy to chat via phone, video conference, or other to help get them going.

Read a post by Daniel Goldsmith (View from ASCRAEUS)

I wanted a simple self-hosted read-it-later service, something akin to Instapaper and Pocket, but without the overheads involved in running something like Wallabag.

Failing to find one, I wrote my own, and have just released it to the wilds.

It is very very simple, and uses Andres Rey’s php port of Mozilla’s Readability.js to grab pages for reading. There’s no interface to speak of, just a lightweight api with POST and a DELETE calls exposed. All files are saved as flat html, with a json index. No databases.

While writing it I’ve been prototyping it on my own site, and have been loving the experience. Its like the web, but the way it should be. If anyone else finds it useful, that’s a bonus.

👓 Bookmark: Using Inoreader as an IndieWeb feed reader | Digging the Digital

Read Bookmark: Using Inoreader as an IndieWeb feed reader by Frank Meeuwsen (Digging the Digital)
Ik onderzoek weer hoe ik deze pagina’s beter kan gebruiken als een commonplace book, een plaats waar ik allerlei gedachten, ideeën en losse flodders kan plaatsen met minimale barrieres. Het is een rode draad in mijn blog-ontwikkeling en ik denk dat het een belangrijk element wordt op de IndieWebC...

The bookmarking service CiteULike is shutting down on March 30, 2019 after a 15 year run. While some may turn to yet-another-silo or walled garden I highly recommend going IndieWeb and owning all of your own bookmarks on your own website.

I’ve been doing this for several years now and it gives me a lot more control over how much meta data I can add, change, or modify as I see fit. Let me know if I can help you do something similar.

Replied to a tweet by David ChartierDavid Chartier (Twitter)

David Shanske, have you gotten this far with your work on the Post Kinds plugin? I know you wanted to import your Pinboard account, but I’m not sure if you’ve got infrastructure for the import piece.
Any other ideas (aka #ActiveWeb)?

👓 12 days of microblogging: linkblogging | Manton Reece

Read 12 days of microblogging: linkblogging by Manton ReeceManton Reece (
For the 7th post in our 12 days of microblogging series, I want to talk about linkblogging. users have a variety of approaches to posting links on their blog. Some people read an interesting article and type in a summary of it, pasting in the URL to the full article, and some people prefe...

👓 Words I wrote in 2018 | Adactio: Journal

Read Words I wrote in 2018 by Jeremy KeithJeremy Keith
I wrote just shy of a hundred blog posts in 2018. That’s an increase from 2017. I’m happy about that. Here are some posts that turned out okay…

I’m thinking I should sift through my 2018 and highlight a few things as well.

👓 Chris Aldrich’s Year In Pocket

Read My Year in Pocket (Pocket App)
See how much I read in Pocket this year!

According to Pocket’s account I read 766,000 words or the equivalent of about 10 books. My most saved topics were current events, science, technology, health, and education.

The most popular things I apparently saved this year:

I’ll have to work at getting better to create my own end-of-year statistics since my own website has a better accounting of what I’ve actually read (it isn’t all public) and bookmarked. I do like that their service does some aggregate comparison of my data versus all the other user data (anonymized from my perspective).

Pocket also does a relatively good job of doing discovery of good things to read based on aggregate user data in terms of categories like “Best of” and “Popular”. They also give me weekly email updates of things I’ve bookmarked there as reminders to go back and read them, which I find a useful functionality which they haven’t over-gamified. Presently my own closest functionality to this is to be subscribed to the RSS feed of my own public bookmarks in a feed reader (which I find generally useful) as well as regularly checking on my private bookmarks on my websites’s back end (something as easy as clicking on a browser bookmark) and even looking at my “on this day” functionality to review over things from years past.

I’ll note that I currently rely more on Nuzzle for real-time discovery  on a daily basis however.

Greg McVerry might appreciate that they’re gamifying reading by presenting me with a badge.

As an aside while I’m thinking of it, it might be a cool thing if the IndieWeb wiki received webmentions, so that self-documentation I do on my own website automatically appeared on the appropriate linked pages either in a webmention section or perhaps the “See Also” section. If wikis did this generally, it would be a cool means of potentially building communities and fuelling discovery on the broader web. Imagine if adding to a wiki via Webmention were as easy as syndicating content to a site like IndieNews or IndieWeb.XYZ? It could also function as a useful method of archiving web content from original pages to places like the Internet Archive in a simple way, much like how I currently auto-archive my individual pages automatically on the day they’re published.

👓 The web finally feels new again. | i.webthings

Read The web finally feels new again. by Joe Jenett (i.webthings)
The web was amazing before Web 2.0 and the advent of so-called social networks. Many people had their own sites and blogs from which they shared ideas and interacted with others in the community at large. It seemed to me like meeting others in their own homes back then and there was a widespread enthusiasm for blogging and personal expression. Then came the big social networks. With time, many personal sites and blogs disappeared from the web as people flocked to the big silos where their content became a heavily monitized commodity. To me, the web had lost much of its soul as people gathered in just a few, huge noise chambers.

👓 The Web Finally Feels New Again | KicksCondor

Read The Web Finally Feels New Again by Kicks Condor (
(Joe’s full article is here.)
Yes, here we are again—I think what you’re saying is that even a single-line annotation of a link, even just a few words of human curation do wonders when you’re out discovering the world. (Perhaps even more than book recommendations—where we know that at leas...

Highlights, Quotes, Annotations, & Marginalia

it made me feel like we were trying to send some kind of concentrated transmission to the author—linking as a greeting, links as an invitation.  

I love the idea of this.

December 19, 2018 at 04:14PM

I do find that Webmentions are really enhancing linking—by offering a type of bidirectional hyperlink. I think if they could see widespread use, we’d see a Renaissance of blogging on the Web.  

December 19, 2018 at 04:17PM

I’m really not sure if linking, in general, has changed over the years. I’ve been doing it the same since day one. But that’s just me.  

Only in the last hour I’ve had a thought about a subtle change to one of the ways I link. It’s not a drastic thing, but it is a subtle change to common practices. Also as I think about it, it removes some of the obviousness of links on social platforms like Twitter that add the ugly @ to a username in addition to other visual changes when one mentions someone else.

December 19, 2018 at 04:22PM

👓 Save web pages straight to Inoreader | Inoreader blog

Read Save web pages straight to Inoreader (Inoreader blog)
Hopefully, by now you’ve recognized Inoreader as your go-to place for regular content consumption. But we know there are many more ways to come across great new content – and we want to help you with that, too. Now you can save pages from all over the web with our new feature, Saved web pages …

👓 The Fans Are All Right | Pinboard Blog

Read The Fans Are All Right (Pinboard Blog)

I've had a couple of emails and tweets asking somewhat cautiously why the popular page has filled with slash fiction. That's because the fans are coming!

I learned a lot about fandom couple of years ago in conversations with my friend Britta, who was working at the time as community manager for Delicious. She taught me that fans were among the heaviest users of the bookmarking site, and had constructed an edifice of incredibly elaborate tagging conventions, plugins, and scripts to organize their output along a bewildering number of dimensions. If you wanted to read a 3000 word fic where Picard forces Gandalf into sexual bondage, and it seems unconsensual but secretly both want it, and it's R-explicit but not NC-17 explicit, all you had to do was search along the appropriate combination of tags (and if you couldn't find it, someone would probably write it for you). By 2008 a whole suite of theoretical ideas about folksonomy, crowdsourcing, faceted infomation retrieval, collaborative editing and emergent ontology had been implemented by a bunch of friendly people so that they could read about Kirk drilling Spock.

🔖 Hypothesis User: kael

Bookmarked Hypothesis User: kael (
Joined: September 9, 2018
Location: Paris

I don’t think I’ve seen anyone using it this way before, but I’ve coincidentally noticed that Kael seems to be using in an off-label manner as a bookmarking service with tagging rather than an annotation or highlighting service. Most of their “annotations” are really just basic page notes with one or two “tags” and rarely (if ever) any highlights or annotations.

I’m curious if the team has considered making such additional functionalities more explicit within their user interface?

Social bookmarking does seem like a useful and worthwhile functionality that would dovetail well with many of their other functionalities as well as their basic audience of users. Perhaps some small visual UI clues and the ability to search for them as a subset would complete the cycle?

🎙 The IndieWeb and Academic Research and Publishing

The IndieWeb and Academic Research and Publishing

Running time: 0h 12m 59s | Download (13.9 MB) | Subscribe by RSS | Huffduff

Overview Workflow


Researcher posts research work to their own website (as bookmarks, reads, likes, favorites, annotations, etc.), they can post their data for others to review, they can post their ultimate publication to their own website.​​​​​​​​

Discovery/Subscription methods

The researcher’s post can webmention an aggregating website similar to the way they would pre-print their research on a server like The aggregating website can then parse the original and display the title, author(s), publication date, revision date(s), abstract, and even the full paper itself. This aggregator can act as a subscription hub (with WebSub technology) to which other researchers can use to find, discover, and read the original research.


Readers of the original research can then write about, highlight, annotate, and even reply to it on their own websites to effectuate peer-review which then gets sent to the original by way of Webmention technology as well. The work of the peer-reviewers stands in the public as potential work which could be used for possible evaluation for promotion and tenure.

Feedback mechanisms

Readers of original research can post metadata relating to it on their own website including bookmarks, reads, likes, replies, annotations, etc. and send webmentions not only to the original but to the aggregation sites which could aggregate these responses which could also be given point values based on interaction/engagement levels (i.e. bookmarking something as “want to read” is 1 point where as indicating one has read something is 2 points, or that one has replied to something is 4 points  and other publications which officially cite it provide 5 points. Such a scoring system could be used to provide a better citation measure of the overall value of of a research article in a networked world. In general, Webmention could be used to provide a two way audit-able  trail for citations in general and the citation trail can be used in combination with something like the Vouch protocol to prevent gaming the system with spam.


Government institutions (like Library of Congress), universities, academic institutions, libraries, and non-profits (like the Internet Archive) can also create and maintain an archival copy of digital and/or printed copies of research for future generations. This would be necessary to guard against the death of researchers and their sites disappearing from the internet so as to provide better longevity.

Show notes

Resources mentioned in the microcast

IndieWeb for Education
IndieWeb for Journalism
Academic samizdat (an example pre-print server)
A Domain of One’s Own
Article on A List Apart: Webmentions: Enabling Better Communication on the Internet

Synidicating to Discovery sites

Examples of similar currently operating sites:
IndieNews (sorts posts by language) (sorts posts by category or tag)

👓 Three examples of annotations, bookmarking, & sharing in my digital commonplace book | W. Ian O’Byrne

Read Three examples of annotations, bookmarking, & sharing in my digital commonplace book by W. Ian O'Byrne (W. Ian O'Byrne)
I’ve been experimenting with some IndieWeb philosophies and tools on this site, but more importantly on my breadcrumbs website. My breadcrumbs website is my digital commonplace book. This is inspired by the website philosophy & structure developed by Chris Aldrich. My purpose is to switch up my relationship with others and social media networks while doing more to own my content online. To that end, one major purpose (for now) on my breadcrumbs site is to be more intentional in the materials that I share with others as I read and explore online.

Some interesting and useful UI examples here. May have to iterate on some of my own design now.