I use Hypothes.is 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 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]
Overview
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:
hypothes.is/a/_tLJyA-cEemE-qPndyfQowhyp.is/_tLJyA-cEemE-qPndyfQow
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: 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:
Render the annotation on the first URL example in full HTML instead of JavaScript;
Add the appropriate microformats classes on those pages;
Add the canonical URL for the page on which the annotation is in reference to either instead of or in addition to the Hypothes.is 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 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.
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:
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.
Highlights of particular passages: In IndieWeb parlance, these are roughly equivalent to quotations of content.
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 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.
Page note with no annotations (bookmarks)
Example from hypothes.is/a/_tLJyA-cEemE-qPndyfQow (but without the annotation portion)
Page note with an annotation
(aka a reply, but could alternately be marked up as above as a bookmark) Example from hypothes.is/a/_tLJyA-cEemE-qPndyfQow
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.
This has not been a scientist's war; it has been a war in which all have had a part.
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…
tag-name
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.
Additional resources with examples
microformats.org/wiki/h-entrymicroformats.org/wiki/h-cardmicroformats.org/wiki/h-citeindieweb.org/bookmarkindieweb.org/replyindieweb.org/quotationindieweb.org/reply-context
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.
Replied to a post by Mike Rockwell (mike.rockwell.mx)
Is there actually a benefit to showing the Webmention field on your site? Does it actually get used? It feels like all of the Webmentions are automated through the protocol/API, not manually by copy and pasting a link.
I’ve turned it off for now. We’ll see.
There are some sites that have receiving implemented but not sending, and it was primarily meant for that. (This is probably most often people who are using webmention.io as their proxy endpoint by registering and adding a line of code to their header. Something I do with both a TiddlyWiki and MediaWiki installs that don’t have custom software/plugins yet.)
It also serves to help visually indicate that your site supports the protocol if you don’t have a button/badge for it that points to something like mike.rockwell.mx/wp-json/webmention/1.0/endpoint. For those that care or are in-the-know there are manual services like telegraph.p3k.io/send-a-webmention or mention-tech.appspot.com/ which could be used as well.
On some sites I follow, I use those boxes about once or twice a month. I use it a bit more frequently on my own site to manually send myself webmentions from other sites that don’t send them, but which I come across either randomly or via refbacks.
Yesterday I had created an event post for an upcoming DoOO Meetup I’m hosting and syndicated a copy to Meetable. The sad, but predictable, result was a webmention being displayed on Meetable that duplicated all of the details including all of the invitations. This felt annoying to me, and I simultaneously thought that as the host, I also ought to officially RSVP for the event itself so that it didn’t appear like no one was going. Rather than go to the trouble of creating a stand-alone RSVP reply post, I thought, why not create a two-for-one bargain? So I naïvely added a class="u-in-reply-to" to the Meetable URL in my event and threw on a data tag to the front of the post like so:
I'll be hosting
And of course, wouldn’t you know: it worked! The duplication of all the data on the syndicated copy disappeared, and in its place a smiling photo of me indicating that I’m attending.
Sadly, I’ve noticed that the WordPress Webmention plugin doesn’t seem to allow me to self-RSVP to my own original post within the same post. I thought I might try forcing it manually only to discover that Telegraph won’t allow the source and target to be the same URL. I also tried mention-tech which will apparently send it and report a success, but my site doesn’t seem to actually receive and display it. I will say this may be the only case I’ve run across in 5 years that I’d want to self-mention the same post and actually display the result.
Listened to 2ToPonder Episode One by Greg McVerry from jgregorymcverry.com
My first attempt at a microcast:
If possible, click to play, otherwise your browser may be unable to play this audio file.
Don’t forget that I’m listening to content in the class as well! Perhaps this will be your first listen webmention? 😉
For badges from static sites, you could simply use raw HTML on a page like Aaron Parecki outlines.1 The “sending” site doesn’t need to be able to send webmentions although the receiving site needs to be able to receive them. You can then use a service like mention-tech.appspot.com/ or telegraph.p3k.io/send-a-webmention to have your static site send the webmention for you!
References
1.
Parecki A. Sending your First Webmention from Scratch. Aaron Parecki. aaronparecki.com/2018/06/30/11/your-first-webmention. Published June 30, 2018. Accessed August 6, 2018.
Forcing webmentions for conversations on websites that don’t support Webmention
Within the IndieWeb community there is a process called backfeed which is the process of syndicating interactions on your syndicated (POSSE) copies back (AKA reverse syndicating) to your original posts. As it’s commonly practiced, often with the ever helpful Brid.gy service, it is almost exclusively done with social media silos like Twitter, Instagram, Flickr, Github, and Mastodon. This is what allows replies to my content that I’ve syndicated to Twitter, for example, to come back and live here on my website.
Why not practice this with other personal websites? This may become increasingly important in an ever growing and revitalizing blogosphere as people increasingly eschew corporate social sites and their dark patterns of tracking, manipulative algorithmic feeds, and surveillance capitalism. It’s also useful for sites whose owners may not have the inclination, time, effort, energy or expertise to support the requisite technology.
I’ve done the following general reply pattern using what one might call manual backfeed quite a few times now (and I’m sure a few others likely have too), but I don’t think I’ve seen it documented anywhere as a common IndieWeb practice. As a point of fact, my method outlined below is really only half-manual because I’m cleverly leveraging incoming webmentions to reduce some of the work.
Manually syndicating my replies
Sometimes when using my own website to reply to another that doesn’t support the W3C’s Webmention spec, I’ll manually syndicate (a fancy way of saying cut-and-paste) my response to the website I’m responding to. In these cases I’ll either put the URL of my response into the body of my reply, or in sites like WordPress that ask for my website URL, I’ll use that field instead. Either way, my response appears on their site with my reply URL in it (sometimes I may have to wait for my comment to be moderated if the receiving site does that).
Here’s the important part: Because my URL appears on the receiving site (sometimes wrapped as a link on either my name or the date/time stamp depending on the site’s user interface choices), I can now use it to force future replies on that site back to my original via webmention! My site will look for a URL pointing back to it to verify an incoming webmention on my site.
Replies from a site that doesn’t support sending Webmentions
Once my comment appears on the receiving site, and anyone responds to it, I can take the URL (with fragment) for those responses, and manually input them into my original post’s URL reply box. This will allow me to manually force a webmention to my post that will show up at minimum as a vanilla mention on my website.
(Note, if your site doesn’t have a native box like this for forcing manual webmentions, you might try external tools like Aaron Parecki’s Telegraph or Kevin Mark’s Mention.Tech, which are almost as easy. For those who are more technical, cURL is an option as well.)
Depending on the microformats mark up of the external site, the mention may or may not have an appropriate portion for the response and/or an avatar/name. I can then massage those on my own site (one of the many benefits of ownership!) so that the appropriate data shows, and I can change the response type from a “mention” to a “reply” (or other sub-types as appropriate). Et voilà, with minimal effort, I’ve got a native looking reply back on my site from a site that does not support Webmention! This is one of the beautiful things of even the smallest building-blocks within the independent web or as a refrain some may wish to sing–“small pieces, loosely joined”!
This method works incredibly well with WordPress websites in particular. In almost all cases the comments on them will have permalink URLs (with fragments) to target the individual pieces, often they’ve got reasonable microformats for specifying the correct h-card details, and, best of all, they have functionality that will send me an email notification when others reply to my portion of the conversation, so I’m actually reminded to force the webmentions manually.
An Illustrative Example
As an example, I posted on my website that I’d read an article on Matt Maldre’s site along with a short comment. Since Matt (currently) doesn’t support either incoming or outgoing webmentions, I manually cut-and-pasted my reply to the comment section on his post. I did the same thing again later with an additional comment on my site to his (after all, why start a new separate conversation thread when I can send webmentions from my comments section and keep the context?).
Matt later approved my comments and posted his replies on his own website. Because his site is built on WordPresss, I got email notifications about his replies, and I was able to use the following URLs with the appropriate fragments of his comments in my manual webmention box:
After a quick “massage” to change them from “mentions” into “replies” and add his gravatar, they now live on my site where I expect them and in just the way I’d expect them to look if he had Webmention support on his website.
I’ll mention that, all of this could be done in a very manual cut-and-paste manner–even for two sites, neither of which have webmention support. But having support for incoming webmentions on one’s site cuts back significantly on that manual pain.
For those who’d like to give it a spin, I’ll also mention that I’ve similarly used the incredibly old refbacks concept in the past as a means of notification from other websites (this can take a while) and then forced manual webmentions to get better data out of them than the refback method allows.
Syndicated copies: WordPress icon
.st0{fill:#FF5C00;}
.st1{clip-path:url(#SVGID_2_);fill:#FF0000;}
.st2{clip-path:url(#SVGID_4_);fill:#FF0000;}
.st3{fill:#FFB100;}
.st4{fill:none;}
IndieWebCamp Icon
Twitter icon Mastodon icon
Replied to a tweet by Paul Jacobson (Twitter)
I can't remember how to mention someone using Webmentions on my WordPress site. twitter.com/ChrisAldrich, did you write something about this? #indieweb— Paul Jacobson (twitter.com/pauljacobson) December 23, 2019
There’s a few quick ways depending on your needs:
If you’re using the Webmention plugin, it will happen automatically on publish. (If you’re also using it to receive, then I highly recommend using Semantic Linkbacks as well.)
For quick “manual” webmentions you can use Aaron Parecki’s Telegraph or Kevin Marks’ Mention Tech. Just input your source URL that has a link to a target URL and the services will send the Webmention on your behalf.
Some sites that receive them will have boxes you can put your URL response in them and click a send button. (See mine below.)
I also maintain a collection for most of my WordPress IndieWeb-based research, which may answer additional questions or go into more depth. Hopefully the above three can get you started quickly though.
Syndicated copies to: Twitter icon Twitter icon
Replied to Sending Webmentions More Intelligently by Jamie Tanna (jvt.me)
You mentioned that you tweaked things a few weeks back and fixed the issue, but I noticed today that your site is hitting mention-tech.appspot.com/ pretty regularly and still automatically sending what appear to be hundreds of old webmentions. I’m not sure what you were using to send them on your behalf or what your tweak was, but thought I’d mention it if you had previously used Kevin’s service and either forgot to turn it off/disconnect it or something else odd was going on.
Some of us have thought about doing it before, but perhaps just jumping into the water and trying it out may be the best way to begin designing, testing, and building a true online IndieWeb Book Club.
Ruined By Design
Earlier this week I saw a notice about an upcoming local event for Mike Monteiro‘s new book Ruined by Design: How Designers Destroyed the World, and What We Can Do to Fix It (Mule Books, March 2019, ISBN: 978-1090532084). Given the IndieWeb’s focus on design which is built into several of their principles, I thought this looked like a good choice for kicking off such an IndieWeb Book Club.
Here’s the description of the book from the publisher:
The world is working exactly as designed. The combustion engine which is destroying our planet’s atmosphere and rapidly making it inhospitable is working exactly as we designed it. Guns, which lead to so much death, work exactly as they’re designed to work. And every time we “improve” their design, they get better at killing. Facebook’s privacy settings, which have outed gay teens to their conservative parents, are working exactly as designed. Their “real names” initiative, which makes it easier for stalkers to re-find their victims, is working exactly as designed. Twitter’s toxicity and lack of civil discourse is working exactly as it’s designed to work.The world is working exactly as designed. And it’s not working very well. Which means we need to do a better job of designing it. Design is a craft with an amazing amount of power. The power to choose. The power to influence. As designers, we need to see ourselves as gatekeepers of what we are bringing into the world, and what we choose not to bring into the world. Design is a craft with responsibility. The responsibility to help create a better world for all. Design is also a craft with a lot of blood on its hands. Every cigarette ad is on us. Every gun is on us. Every ballot that a voter cannot understand is on us. Every time social network’s interface allows a stalker to find their victim, that’s on us. The monsters we unleash into the world will carry your name. This book will make you see that design is a political act. What we choose to design is a political act. Who we choose to work for is a political act. Who we choose to work with is a political act. And, most importantly, the people we’ve excluded from these decisions is the biggest (and stupidest) political act we’ve made as a society.If you’re a designer, this book might make you angry. It should make you angry. But it will also give you the tools you need to make better decisions. You will learn how to evaluate the potential benefits and harm of what you’re working on. You’ll learn how to present your concerns. You’ll learn the importance of building and working with diverse teams who can approach problems from multiple points-of-view. You’ll learn how to make a case using data and good storytelling. You’ll learn to say NO in a way that’ll make people listen. But mostly, this book will fill you with the confidence to do the job the way you always wanted to be able to do it. This book will help you understand your responsibilities.
I suspect that this book will be of particular interest to those in the IndieWeb, A Domain of One’s Own, the EdTech space (and OER), and really just about anyone.
How to participate
I’m open to other potential guidelines and thoughts since this is incredibly experimental at best, but I thought I’d lay out the following broad ideas for how we can generally run the book club and everyone can keep track of the pieces online. Feel free to add your thoughts as responses to this post or add them to the IndieWeb wiki’s page indieweb.org/IndieWeb_Book_Club.
Buy the book or get a copy from your local bookstore
Read it along with the group
Post your progress, thoughts, replies/comments, highlights, annotations, reactions, quotes, related bookmarks, podcast or microcast episodes, etc. about the book on your own website on your own domain. If your site doesn’t support any of these natively, just do your best and post simple notes that you can share. In the end, this is about the content and the discussion first and the technology second, but feel free to let it encourage you to improve your own site for doing these things along the way.
Folks can also post on other websites and platforms if they must, but that sort of defeats some of the purpose of the Indie idea, right?
Syndicate your thoughts to indieweb.xyz to the stub indieweb.xyz/en/bookclub/ as the primary location for keeping track of our conversation. Directions for doing this can be found at https://indieweb.xyz/howto/en.
Optionally syndicate them to other services like Twitter, Facebook, Instagram, LinkedIn, etc.
Optionally mention this original post, and my website will also aggregate the comments via webmention to the comment section below.
At regular intervals, check in on the conversations linked on indieweb.xyz/en/bookclub/ and post your replies and reactions about them on your own site.
If your site doesn’t support sending/receiving webmentions (a special type of open web notifications), take a look at Aaron Parecki’s post Sending your first Webmention and keep in mind that you can manually force webmentions with services like Telegraph or Mention-Tech.
I’ll also try to keep track of entries I’m aware about on my own site as read or bookmark posts which I’ll tag with #IWBCMM (ostensibly for IndieWeb Book Club Mike Monteiro), which we can also use on other social silos for keeping track of the conversation there.
Perhaps as we move along, I’ll look into creating a planet for the club as well as aggregating OPML files of those who create custom feeds for their posts. If I do this it will only be to supplement the aggregation of posts at the stub on indieweb.xyz which should serve as the primary hub for the club’s conversation.
If you haven’t run across it yet you can also use gRegor Morrill‘s IndieBookClub.biz tool in the process.
If you don’t already have your own website or domain to participate, feel free to join in on other portions of social media, but perhaps consider jumping into the IndieWeb chat to ask about how to get started to better own your online identity and content.
If you need help putting together your own site, there are many of us out here who can help get you started. I might also recommend using micro.blog which is an inexpensive and simple way to have your own website. I know that Manton Reece has already purchased a copy of the book himself. I hope that he and the rest of the micro.blog community will participate along with us.
If you feel technically challenged, please ping me about your content and participation, and I’m happy to help aggregate your posts to the indieweb.xyz hub on your behalf. Ideally a panoply of people participating on a variety of technical levels and platforms will help us create a better book club (and a better web) for the future.
Of course, if you feel the itch to build pieces of infrastructure into your own website for improved participation, dive right in. Feel free to document what you’re doing both your own website and the IndieWeb wiki so others can take advantage of what you’ve come up with. Also feel free to join in on upcoming Homebrew Website Clubs (either local or virtual) or IndieWebCamps to continue brainstorming and iterating in those spaces as well.
Kickoff and Timeline
I’m syndicating this post to IndieNews for inclusion into next week’s IndieWeb newsletter which will serve as a kickoff notice. That will give folks time to acquire a copy of the book and start reading it. Of course this doesn’t mean that you couldn’t start today.
Share and repost this article with anyone you think might enjoy participating in the meanwhile.
I’ll start reading and take a stab at laying out a rough schedule. If you’re interested in participating, do let me know; we can try to mold the pace to those who actively want to participate.
I’ve already acquired a copy of the book and look forward to reading it along with you.
Syndicated copies to: Flipboard icon Plurk icon Tumblr icon WordPress Twitter icon
Dank je voor de tips Ton. Je weet, webmentions zijn niet mijn sterkste kant en ik kan alle hulp gebruiken om ze goed over te zetten naar de nieuwe site. Inmiddels heb ik via de Indieweb Chat al meer tips gekregen waaronder de Send A Webmention service van Telegraph en Mention.tech om eveneens handmatig ze opnieuw te versturen. Aangezien het om een flink aantal webmentions gaat, vermoed ik dat een importer in WordPress met een PHP script toch de beste route is. Dat ik het dan weer voor een groot deel zelf moet bouwen….tja…dat is de Indieweb spirit nietwaar?
Watched EDU 522: Daily Update VI: Sending A Manual Webmention from YouTube
A short video on how to send a manual webmention to a WordPress site that's using the Webmention plugin.
WordPress sites also have a separate visual endpoint that can be used manually. They’re typically found at example.com/wp-json/webmention/1.0/endpoint.
Other manual methods for both WordPress-based and non-WordPress sites include:
sendawebmention.commention-tech.appspot.com/
Read Sending your First Webmention from Scratch by Aaron Parecki (Aaron Parecki)
Webmention is one of the fundamental indieweb building blocks. It enables rich interactions between websites, like posting a comment or favorite on one site from another site. This post will walk you through the simplest way to get started sending webmentions to other sites so that you can use your ...
A stupendous article, I just wish I’d had it all those many years ago. Thanks Aaron!
One useful thing for beginners that I don’t think got mentioned (pun intended!) in the article is that for receiving websites which don’t have a built in webmention form you can use a service like mention-tech.appspot.com/ which will allow you to manually put in the sending site and the receiving site and it will act as a bridge to send the webmention for you.
Syndicated copies to:
With many pages vanishing from the web this week, we've been thinking about archiving in #indiewebOne thing that several people have started to do is to send their posts and the pages they link to to the internet archiveI was already doing this for all SVG's posted to svgshare.com, my vector image sharing site (though I fixed some bugs in that today too).But what could I do for my other posts? Well, I previously made mention-tech to send webmentions, which is handy for my static posts on kevinmarks.com, so I made it ping the archive for both source and target URLs in the webmention sent. Do try it yourself.#100DaysOfIndieWeb
mention.tech