It’s not exactly an implementation of Webmention, but I was interested to find that there’s a tool from Hypothes.is that will show you (all?) the annotations (and replies) on your website.

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.

The user interface for the side bar of Hypothesis with a "Site Notes" element added in red next to "Annotations" and "Page Notes"

Improving user experience with links, notifications, and Webmentions

Back in December, I was thinking about html links and the functionality of sending notifications using webmentions. Within the IndieWeb, this is known as mentioning or potentially person-tagging someone (inline). By adding a link to a person’s website onto any mentions of their name in my posts, my website will automatically send them a notification that they were mentioned. They can then determine what they want to do or not do with that information.

While I want people that I mention in some of my posts to be aware that they’ve been mentioned by me, I don’t necessarily need to add to the visual cruft and clutter of the pages by intentionally calling out that link with the traditional color change and underline that <a> links in HTML often have. After all, I’m linking to them to send a notification to them, not necessarily to highlight them to everyone else. In some sense, I’m doing this because I’ve never quite liked that Twitter uses @names highlighted within posts. All the additional cruft in Twitter like the “@” and “#” prefixes, while adding useful functionality, have always dramatically decreased the readability and enjoyment of their interface for me. So why not just get rid of them?! I’m glad to have this power and ability to do so on my own website and hope others appreciate it.

In the past I’ve tried “blind notifying” (or bcc’ing via Webmention) people by adding invisible or hidden links in the page, but this has been confusing to some. This is why one of the general principles of the IndieWeb is to

Use & publish visible data for humans first, machines second.

Thus, I’ve added a tiny bit of CSS to those notification links so that they appear just like the rest of the text on the site. The notifications via Webmention will still work, and those who are mentioned will be able to see their names appear within the post.

For those interested, I’ve left in some hover UI so if you hover your mouse over these “hidden” links, they will still indicate there’s a link there and it will work as expected.

As an example of the functionality here within this particular post, I’ve hidden the link on the words “mentioning” and “person-tagging” in the first paragraph. Loqi, the IndieWeb chat bot, should pick up the mention of those wiki pages via WebSub and syndicate my post into the IndieWeb meta chat room, and those interested in the ideas can still hover over the word and click on it for more details. In practice, I’ll typically be doing this for less relevant links as well as for tagging other people solely to send them notifications.

I’m curious if there are any edge cases or ideas I’m missing in this sort of user interface? Sadly it won’t work in most feed readers, but perhaps there’s a standardizable way of indicating this? If you have ideas about improved presentation for this sort of functionality, I’d be thrilled to hear them in the comments below.

Twitter:

👓 How to Configure Your iPhone to Work for You, Not Against You | Better Humans

Read How to Configure Your iPhone to Work for You, Not Against You by Coach Tony (Better Humans | Medium)
The Very, Very Complete Guide to Productivity, Focus, and Your Own Longevity

Optimize First for Single Tasking
#1. Turn OFF (almost) all notifications
#2. Hide social media slot machines
#3. Hide messaging slot machines
#4. Disable app review requests
#5. Turn on Do Not Disturb
#6. Be strategic about your wallpaper
#7. Turn off Raise to Wake
#8. Add the Screen Time widget
#9. Add Content Restrictions
#10. (Optional) Use Restrictions to turn off Safari
#11. Organize your Apps and Folders alphabetically
Switch to Google Cloud to Work Faster
#12. Choose GMail
#13. Choose Google Calendar
#14. Replace Apple Maps with Google Maps
#15. Install the GBoard keyboard for faster typing
#16. Switch to Google Photos
Install These Apps for Productivity
#17. Use Evernote for all note taking, to-do lists, everything
#18. The Case for Calm as your go-to meditation app
#19. Install the right goal tracker for you
#20. Store all your passwords in a password manager, probably LastPass
#21. Use Numerical as your default calculator
#22. Put the Camera app in your toolbar
#23. Use this Doppler Radar app
#24. Use this Pomodoro app
#25. Use Brain.fm for background noise
Use These Apps and Configurations for Deep Learning
#26. Subscribe to these podcasts
#27. Install the Kindle app but never read it in bed
#28. Use Safari this way
#29. Organize your home screen for deep learning over shallow learning
Use These Apps and Configurations for Longevity
#30. Track steps this way
#31. Prefer Time Restricted Eating Over Calorie Counting
#32. Schedule Night Shift
#33. Set up Medical ID
Make The Finishing Touches with These Configurations
#34. Change Siri to a man
#35. Change your phone’s name
#36. Turn off advertising tracking
#37. Set auto-lock to the maximum time
#38. Set your personal hotspot password to a three word phrase
#39. Turn on control center everywhere
#40. Turn on Background App Refresh
#41. Delete Garage Band
. Develop verbal memory for talking to Siri
#43. Set up these text replacement shortcuts
#44. Set your address
#45. Backup this way
Appendix A: Principles
Appendix B: Budget & Costs
Appendix C: Case Study
Appendix D: Updates

A terrifically long post about improving one’s productivity (on many levels), but primarily focused on one’s mobile experience.

Reply to Ian O’Bryne on annotations

Replied to a tweet by William Ian O'ByrneWilliam Ian O'Byrne (Twitter)

Ian, thanks for putting together all of these examples. I think my preference is for option three which provides the most context and seems easiest to read and understand. I like the way you’ve incorporated the blue arrow, which makes semantic sense as well.

I’m sure I’ve seen other versions, but Jon Udell has at least one example of some annotations on his own website like yours too.

When it comes to the “conversation” side of what you’re looking for, I think the biggest piece you’re really missing and which some on the Hypothes.is side (except perhaps for Nate who may have a stronger grasp of their value after the recent IndiewWeb Summit) are apt to miss is that Hypothes.is doesn’t support sending webmentions. Presently you’re putting your data out there in a one-sided manner and Hypothes.is isn’t pushing the other side or any of the follow up back to you. As a result it’s operating as a social silo the same way that sites like Facebook and Twitter do. Based on their GitHub repository, I know that they’ve considered webmentions in the past, but apparently it got put on a back burner and hasn’t been revisited.

Ideally they’d want to have webmentions work in two places. It would be great if they could send webmentions of annotations/highlights to the original page itself, so that the site owner is aware that their content is being marked up or used in this manner. This also means that Hypothes.is could be used as a full-blown and simple commenting system as well so that those who aren’t using their own sites to write replies could use Hypothes.is as an alternative. The second thing it might want to do is to send webmentions, particularly for replies, to the original page as well as to any URLs that are mentioned in the comment thread which appears on Hypothes.is. This would mean that you’d want to add the permalink to your post back to the copy you put on Hypothes.is so that you and your website stay in the loop on the entirety of the conversation. In many senses, this is just mirroring what is going on in threaded Twitter conversations that get mirrored back to your WordPress website. [I’ll note that I think I’ve got the last of the moving pieces for this Twitter/WordPress workflow properly linked up in the past week.] Since Twitter doesn’t support webmentions itself, Brid.gy is handling that part for you, but in Hypothes.is’ case you don’t have any of the details coming back for allowing you to display the discussion on your site except by doing so manually. Doing it manually for extended conversations is going to become painful over time.

From an IndieWeb perspective, you’re primarily implementing a PESOS workflow in which you post first on Hypothes.is and then send a copy of it to your own website. Naturally it would be better if you were posting all the details on your own website and using the Hypothes.is API to syndicate your copy there for additional public conversation outside of the readership of your website. Unfortunately building the infrastructure to do this is obviously quite daunting. Since they’ve got an API, you might be able to bootstrap something webmention-like onto it, but for your purposes it would obviously be easier if they had direct webmention support.

It would also be wonderful if Hypothes.is supported the micropub specification as well. Then you could ideally log into the system as your website and any annotations you made could be automatically be published to your website for later storage, display, or other use. In some sense, this is what I’m anticipating by making  explicit standalone annotation and highlight post kinds on my website. In practice, however, like you, I’d prefer to have a read, like, or bookmark-type of post that aggregates all of my highlights, annotations, and marginalia of a particular piece for easier future use as well as the additional context this provides. I suspect that if I had the additional tag within the Hypothesis Aggregator plugin for WordPress that would let me specify the particular URL of an individual article, I would have most of the front side PESOS functionality we’re all looking for. The rest will require either webmention or a lot more work.

I may have mentioned it before, but in case you hadn’t found it I’ve got a handful of posts on annotations, many of which include some Hypothes.is functionality.

Not itemized in that list (yet?) are some experiments I’d done with the Rory Rosenzweig Center’s PressForward plugin for WordPress. It allowed me to use a simple browser bookmarklet to save a webpage’s content to my personal website with a rel=”canonical” tag for the page pointing at the original page. (Here’s a good example.) Because of the way the canonical set up works within Hypothes.is, I noticed that annotations I (and others) made on the original were also mirrored and available on my website as well. In my case, because PressForward was copying the entirety of the article for me, I used the <mark> HTML tag to make the highlights on my page, but with Hypothes.is enabled, it also shows the other public annotations as well. (Use of the title attribute adds some additional functionality when the mark tagged text is hovered over in most browsers.)

In another example, I annotated a copy of one of Audrey Watters’ articles (after she’d disabled the ability for Hypothesis to work on her site, but before she changed the Creative Commons licensing on her website). But here I added my annotations essentially as pull-quotes off to the side and syndicated copies to Hypothes.is by annotating the copy on my website. If you visit Audrey’s original, you’ll see that you cannot enable Hypothesis on it, but if you’re using the Chrome extension it will correctly indicate that there are five annotations on the page (from my alternate copy which indicates hers is the rel=”canonical”).

In any case, thanks again for your examples and documenting your explorations. I suspect as time goes by we’ll find a more IndieWeb-centric method for doing exactly what you’ve got in mind in an even easier fashion. Often doing things manually for a while will help you better define what you want and that will also make automating it later a lot easier.