Tantek Çelik (tantek.com)2013-04-19: the day the indieweb successfully federated a comment post. The Test Note It started with Laurent Eschenauer using Storytlr to post a simple note on his site that sent mention pingbacks to Barnaby Walters and Aaron Parecki: Testing #indieweb federation with @waterpigs.co.uk, @aaronpareck...
I’d promised to do a quick outline for the kind gang at Hypothes.is 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 Hypothes.is 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. 
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 Hypothes.is 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: https://hyp.is/_tLJyA-cEemE-qPndyfQow/boffosocko.com/?p=55708991. However, in practice, one could remove or replace the boffosocko.com 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 Hypothes.is more (Indie)Web friendly:
These things would make these pages more easily and usefully parseable on the open web. If/when Hypothes.is may support Webmention (aka web notifications) then all of these prerequisite pieces will already be in place. In the erstwhile, even without Hypothes.is 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.
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:
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 Hypothes.is 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 hyp.is 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 Hypothes.is 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.
Example from https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow (but without the annotation portion)
<div class="h-entry">
<a class="p-author h-card" href="https://hypothes.is/users/judell">judell</a>
Public on <https://hyp.is/_tLJyA-cEemE-qPndyfQow/boffosocko.com/?p=55708991>"Chris Aldrich on the IndieWeb"</a> (<a class="u-bookmark-of" href="https://boffosocko.com/?p=55708991">boffosocko.com</a>)
<time class="dt-published" datetime="2019-01-11 18:052:00" title="Friday, Jan 11, 2019, 6:52 PM"><a href="https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow" 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>
</div>
(aka a reply, but could alternately be marked up as above as a bookmark) Example from https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow
<div class="h-entry">
<a class="p-author h-card" href="https://hypothes.is/users/judell">judell</a>
Public on <https://hyp.is/_tLJyA-cEemE-qPndyfQow/boffosocko.com/?p=55708991>"Chris Aldrich on the IndieWeb"</a> (<a class="u-in-reply-to" href="https://boffosocko.com/?p=55708991">boffosocko.com</a>)
<time class="dt-published" datetime="2019-01-11 18:052:00" title="Friday, Jan 11, 2019, 6:52 PM"><a href="https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow" target="_blank" rel="noopener">Jan 11</a></time>
<div class="e-content">
<p>This is web thinking in action.</p>
<p>https://blog.jonudell.net/2011/01/24/seven-ways-to-think-like-the-web/</p>
<p>Well done!</p>
</div>
<div class="p-category">tag-name</div>
</div>
Example from https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow
<div class="h-entry">
<a class="p-author h-card" href="https://hypothes.is/users/judell">judell</a>
Public on <a href="https://hyp.is/gBZPQucmEeaPBQvYzSRo-Q/www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">"As We May Think"</a> (<a class="u-quotation-of h-cite" href="https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">www.theatlantic.com</a>)
<time class="dt-published" datetime="2017-04-30 08:40:00" title="Sunday, Apr 30, 2017, 08:40 AM"><a href="https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow" 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>
</div>
Example from https://hypothes.is/a/9JrX5lf9RraeLKKn9WwmMQ
<div class="h-entry">
<a class="p-author h-card" href="https://hypothes.is/users/jeremydean">jeremydean</a>
Public on <a href="https://hyp.is/9JrX5lf9RraeLKKn9WwmMQ/www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">"As We May Think"</a> (<a class="u-in-reply-to" href="https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">www.theatlantic.com</a>)
<time class="dt-published" datetime="2015-09-02 15:11:00" title="Wednesday, Sep 2, 2015, 03:11 PM"><a href="https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow" 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.
<blockquote>
<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>
<div class="p-category">tag-name</div>
</div>
I’ll also note that there’s the potential of a reply on Hypothes.is 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.
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.
The best I could hope for back in 2008, and part of why I created the @JohnsHopkins Twitter handle, was that researchers would discover Twitter and be doing the types of things that some of the Johns Hopkins professors outlined in this recent article The Promise and Peril of Academia Wading into Twitter are now finally doing. It seems sad that it has taken over a decade and this article is really only highlighting the bleeding edge of the broader academic scene now. While what they’re doing is a great start, I think they really aren’t going far enough. They aren’t doing their audiences as much service as they could because there’s only so much that Twitter allows in terms of depth of ideas and expressiveness. It would be far better if they were doing this sort of work from their own websites and more directly interacting with their colleagues on the open web. The only value that Twitter is giving them is a veneer of reach to a broader audience, but they’re also opening themselves up to bigger attacks as is described in the article.
In addition to Kimberly’s example, another related area of potential innovation would be moving the journal clubs run by many research groups and labs online and opening them up. Want to open up science? Then let’s really do it! By bookmarking a variety of articles on their own websites, various members could be aggregated to contribute to a larger group, which could then use their own websites with protocols like Webmention or even simple tools like Hypothes.is to guide and participate in larger online conversations to move science communication along at an even faster pace. Greg McVerry and I have experimented in taking some of these tools into the classroom in the past.
If you think about it, arXiv and other preprint servers are really just journal clubs writ large. The problem is that they’re only communicating in one direction by aggregating the initial content, but they’re dramatically failing their audiences in that they aren’t facilitating or aggregating any open discussion around that content. As a result, the largest portion of their true value is still locked away in the individual brains of their readers rather than as commentary or even sentence level highlights and annotations on particular pieces out in the open. Often is the time that I’ll tweet about an interesting article only to receive a (lucky) reply that the results have been debunked, yet that information is almost never disclosed in or around the journal article (especially online) where it certainly belongs. Academic publishers are not only gouging us financially by siloing their content, they’re failing us far worse than most realize.
Another idea: Can’t get a journal of negative results to publish your latest research failure? Why not post a note or article on your own website to help out future researchers? (or even demonstrate to your students that not everything always works out?)
Naturally having aggregation services like indieweb.xyz, building planets, using OPML subscriptions, or the coming wave of feed readers could make a lot of these things easier, but we’re already right on the cusp for people who are willing to take a shot for doing this type of research online on their own websites and out in the open.
Want to try out some of the above? I’m happy to help (gratis) researchers who’d like to experiment in the area to get themselves set up. Just send me a note or give me a call.
Just visit https://jonudell.info/h/facet/ and then enter the appropriate domain name followed by /* as a wildcard to search.
Examples for:
Now wouldn’t it be cool if this were available in the main UI? Perhaps if there were a button for “Site notes” or highlights? This may be unwieldy for the New York Times, but could be reasonable and very useful for smaller personal and/or academic based websites.
This is another in a long line of social media functionalities that I’m now able to relatively easily support on my own website.
To my knowledge, I may be the first person to be displaying “following” webmentions anywhere. The nice part is that this following webmention functionality is built into the Post Kinds plugin by default, so that if people begin creating follow posts on a more regular basis, then several hundred WordPress sites that have Post Kinds will automatically be able to display them.
Tom Critchlow (Twitter)“@jgmac1106 Thanks - been trying to get my head around webmentions for a while and still haven't figured it out....”
To get started quickly, just to have the notifications, you might try creating an account with Webmentions.io and put the endpoint into the <head> of your site so you can receive them in the erstwhile on a separate service and worry about direct integration at a later date. As I recall Aaron Gustafson has a Webmention.io Jekyll Plugin for display and some of the outline is covered in this recent article by Max Böck.
If necessary, you can get help in the #Dev channel of the IndieWeb chat.
David Shanske (GitHub)Contribute to dshanske/wordpress-refback development by creating an account on GitHub.
Colin Devroe (cdevroe.com)I’m noticing in the responses section of your site (and on this particular post) that you’ve got a “Mentions” section, and that when I click on some avatars I get the original post while others (for Twitter) link to the profile page. This isn’t the typical Webmention plugin for WordPress behavior, so I’m curious what particular lines you’ve changed in the plugin and how as I’d love to have this behavior instead of the less useful links to the profiles that the plugin typically gives. Thanks!
Jason Morehead (opuszine.us)Social networks encourage us to take less ownership of our content. That needs to change.
Jason, while it looks like you don’t have webmentions set up or displaying yet (I’m guessing you’re on Craft 3 and the plugin for Craft is only compatible with v2 as I recall), you might try creating an account with Webmentions.io and put the endpoint into your head so you can receive them in the erstwhile on a separate service and worry about direct integration at a later date.
Lee Kelleher (Twitter)“@gadgetopia Good question! From what I've read, pingbacks suffered from poor security/spam and being XMLRPC based. How webmentions differ, I'm not sure. I assume it's W3C's reimagining of it.”
Personal sites are awesome, so this site was built so we can all discover each others. All the links are by folks that want to share their site with the world.
If you want your site to appear on here, go ahead and submit it on GitHub, or drop me an email.
It’s built by Andy Bell who has been building his own website and is at least IndieWeb aware. I’ve added the example to the IndieWeb wiki page for directories. While interesting and useful, like some of the other directories I’ve seen floating around, there is a small hurdle that one needs to be able to fork a GitHub repo, edit it, and send a PR to be included, though I do like that he has an email option to bring the technical hurdle down. The other benefit is that it allows people to modify or delete their data as well. I do like the decentralized nature of of it, but I wonder about scale and search-ability.
I can’t help but wonder about building a similar directory site that aggregates its data by Webmention and uses the h-cards from websites to automatically update itself. Naturally having an OPML file(s) (think various versions that are sortable using tags/categories) or some other exportable and/or subscribe-able ability for feed readers would be highly useful.
In addition to resources like chat-names, Indie Map‘s list, as well as some planets, OPML resources like my own IndieWeb list, and the IndieWeb web ring, this could be another interesting directory creation method for IndieWeb-specific websites.
Andy Bell (Andy Bell)Let’s make 2019 the year of personal sites and the IndieWeb.
If it helps, Max Böck recently wrote some excellent articles (with code examples) on using Eleventy to easily syndicate content to Twitter as well as to add Webmention functionality. If you haven’t seen them yet, they may help you along your journey a bit more quickly. Both can be found at: https://indieweb.org/Eleventy
How to pull interactions from social media platforms like Twitter back to your own site, using Webmentions, webmention.io and Bridgy.
Discourse is the 100% open source discussion platform built for the next decade of the Internet.
As an example, Disqus and Webmention.io are interesting examples of how a company could specialize into handling comments for user’s sites. These two are both doing things very differently and at much different price points. Disqus is large and bloated and seems to have quite innovating and iterating. I have to wonder what it would look like with more players and more competition in the space?
In fact, I’m still wondering why hasn’t Disqus picked up and run away with the Webmention spec?
I’m getting a lot out of these ruminations you’re doing about links as notifications. For me, I think I’m going to include a ‘cc’ bit of post metadata, much like I already have ‘via’ metadata, to advertise the original source for a bit of hypertext. Cool idea. The idea of a ‘bcc’ i...
