Annotated An Outline for Using Hypothesis for Owning your Annotations and Highlights by Chris AldrichChris Aldrich (boffosocko.com)

Create an IFTTT.com recipe to port your Hypothesis RSS feed into WordPress posts. Generally chose an “If RSS, then WordPress” setup and use the following data to build the recipe:

Input feed: https://hypothes.is/stream.atom?user=username (change username to your user name)
Optional title: {{EntryTitle}}
Body: {{EntryContent}} from {{EntryUrl}}
{{EntryPublished}}

Categories: Highlight (use whatever categories you prefer, but be aware they’ll apply to all your future posts from this feed)
Tags: hypothes.is
Post status (optional): I set mine to “Draft” so I have the option to keep it privately or to publish it publicly at a later date.

Posting this solely to compare my Hypothes.is highlights and annotations on my website with Will’s version.

I’m still tinkering with mine and should have a Micropub based version using IFTTT and Webhooks done soon.

Annotation posts >> Highlight posts

Because they’re so similar, I’ve decided to discontinue the custom highlight posts my site had in lieu of the more prevalent annotation post kind. The layout and format of both as highlighted text quoted from another site was almost exactly the same with the primary difference being my additional commentary added to the highlighted text to call it an annotation. Conceptually I considered “highlight + commentary/reply = annotation”. The difference is marginal at best–pun intended.

Since I only had 13 highlight posts versus 121 annotation posts (plus various additional annotations and highlights which I’ve rolled up into the body of some of my read posts) over the last year and a half, I felt it seemed redundant and bothersome to maintain two separate, but nearly identical post kinds. Semantically one may think of a highlight on some text as an annotation anyway, thus the idea of annotation subsumes that of a simple highlight.

As of this evening, I’ve changed all the custom highlight posts to be of the annotation kind. Other than the one word visual difference of the post kind text changing from “highlight” to “annotation” this change won’t affect much except for those who may have been subscribed to the highlight feed. Going forward you may consider subscribing to my annotation feed instead.

I had created highlight posts first, but in the end annotation posts have won the day. And for those that don’t have them, fear not, because honestly annotation posts are really just glorified bookmarks with custom text in the context. (The glorification only entails a highligher icon instead of a bookmark icon and a bit of CSS to color the text yellow.) I do find having them delineated for my personal research purposes useful though.

Liked a tweet by ReadwiseReadwise (Twitter)
Read Read Trump’s Letter to Pelosi Protesting Impeachment (New York Times)
President Trump sent a letter on Tuesday to Speaker Nancy Pelosi expressing his “most powerful protest” against the impeachment process. The House is expected to vote on two articles of impeachment against Mr. Trump on Wednesday.
An interesting UI presentation for highlights and annotations on the web. There is no click/interactivity within it however.

In general I don’t think for a moment that he actually wrote any of this. I suspect some of it was dictated or pulled from prior communication/thoughts. It definitely sounds like his “voice”, but I can’t imagine that it came from him in the same psuedo-logical structure, which I highly suspect was imposed on it after-the-fact by someone else.

!

He really used 8 exclamation marks in a six page letter?! Has any president used this many in an entire term I wonder?
–December 20, 2019 at 09:00AM

Impeachment Fever

There are several instances in this document where words are improperly capitalized, presumably in an attempt to make them stand out and make them more memorable. Or possibly to provide them more emphasis than they deserve.
–December 20, 2019 at 09:17AM

American People

Here’s another case of the mis-capitalization. American should be capitalized, but people should not.
–December 20, 2019 at 09:18AM

I slept my way through most of IndieWebCamp Berlin2 this weekend (mostly due to the time zone differential), but in the spirit of the event, I did want to work on a few small hack projects.

I started some research and work into creating a plugin to effectuate making “vias” and “hat-tips” easier to create on my site since I often use them to credit some of my sources. I was a bit surprised not to see any prior art in the WordPress repository. Sadly, there’s nothing concrete to show off just yet. I think I’ve got a clear concept of how I want it to look and what will go into the first simple iteration. It will be my first “real” WordPress plugin, so there’s some interesting learning curve along the way. 

On a more concrete front, I made a handful of CSS tweaks and fixes to the site, and particularly to some of my annotation/highlighting related posts, that I’ve been meaning to take care of for a while.  Now on read posts where I’ve aggregated some annotations/highlights, the highlighted portions should appear in yellow to better differentiate them in portions of text and represent them as highlights. This prevents me from creating a read post for the content and one or dozens of related, but completely separate, follow-up annotation posts. Now they’re combined, and I think they provide a bit more contextualization for the original, but still include the timestamps for the annotations. I’m sure there’s some more I can do to tweak these, but I like the result a bit better than before. Today’s post about a research paper I read on food is a good example of to highlight (pun intended) some of the changes. Ideas for further improvements are most welcome.

I also slightly tweaked and then further experimented with some of the CSS for my reply contexts. I’ve been considering reformatting them a tad to try to highlight the fact that the content within them is context for my responses. In some sense I’m looking at making the context look more card-like or perhaps oEmbed-esque. I still haven’t gotten it the way I’d ultimately like it, but perhaps one day soon? I played around with changing the size of the context with respect to my content as well as adding some outlines and shadows to make the context look more like cards, but I haven’t gotten things just right. Perhaps some more research looking at others’ sites will help? Which sites do you think do reply contexts incredibly well?

I’m glad there’s a holiday coming up so I can spend a bit of time catching up on some of the sessionsand  notes and hopefully see some of the demos from the camp.

👓 New plugin allows the far-right to ‘graffiti’ any website | Columbia Journalism Review

Read New plugin allows the far-right to ‘graffiti’ any website by Martin Goillandeau and Makana Eyre (Columbia Journalism Review)
Dissenter acts as a workaround for people wishing to comment on websites, even those without a comment section. One user, Cody Jassman, describe the plugin as “like the graffiti painted in the alley on every web page. You can take a look around and see what passersby are saying.” The plugin was launched in beta at the end of February by Andrew Torba, who co-founded Gab, a far-right social network. Gab is well known for being the platform where Robert Bowers, the suspected Pittsburgh synagogue shooter, published anti-Semitic comments before he allegedly killed 11 people and wounded many others at the Tree of Life synagogue.
Replied to a tweet by (((Dr. Dean)))(((Dr. Dean))) (Twitter)
Boy, what I wouldn’t give to have a digital, searchable copy of every book or article I’d highlighted or annotated since I was 14! Even my handwritten commonplace books from those eras are difficult to read and search through.

Ideas for IndieWeb-ifying Hypothes.is

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:

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 https://hypothes.is/a/_tLJyA-cEemE-qPndyfQow 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:

  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 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:

  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 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 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>

Page note with an annotation

(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>

Highlights (aka quotes)

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>

Annotations (replies)

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.

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.

🔖 Highly: Highlight to share.

Bookmarked Highly (Highly)
Highlight the web to share the important parts.
Signing up for yet-another-silo. This one has some slick-looking UI and lots of social and sharing integrations. Their shares to Twitter look interesting, but I really wish there were some better ways to share so well to my own website. Sadly, unlike Hypothes.is, it doesn’t have any annotation functionality. I didn’t find my Twitter colleagues like Jon Udell, Nate Angell, or Jeremy Dean on the service through their Twitter integration set up.

After a cursory look, I’m worried what their funding and monetization plans are and where my data will be in just a few years. While it’s certainly pretty, I far prefer the functionality (and community) that Hypothes.is offers, so I’m not moving any time soon. Definitely worth taking a look at for some of its UI features and interactions and future functionality.

Spent a few minutes late this afternoon to update the CSS on my website to hide the automatic titles given to annotation and highlight posts. Also modified these slightly to give the highlighted/quoted portion of other sites a highlighter-yellow color.

An example of the yellow highlight color of highlighted/annotated posts on my website. Previously the quoted portions had been a muted grey like other posts.

👓 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.