Fragmention is a portmanteau word made up of fragment and mention (or even Webmention), but in more technical terms, it’s a simple way of creating a URL that not only targets a particular page on the internet, but allows you to target a specific sub-section of that page whether it’s a photo, paragraph, a few words, or even specific HTML elements like <div> or <span> on such a page. In short, it’s like a permalink to content within a web page instead of just the page itself.
Back in December Aaron Davis had made a quote card for one of his posts that included a quote from one of my posts. While I don’t think he pinged (or webmentioned) it within his own post, I ran across it in his Twitter feed and he cross-posted it to his Flickr account where he credited where the underlying photo and quote came from along with their relevant URLs.
Fragmentions could have not only let him link to the source page of the quote, it would have let him directly target the section or the paragraph where the quote originated or–even more directly–the actual line of the quote.
They both obviously point to the same specific page, and their beginnings are identical. The second one has a # followed by the words “I’m not looking” with some code for blank spaces and an apostrophe. Clicking on the fragmention URL will take you to the root page which then triggers a snippet of JavaScript on my site that causes the closest container with the text following the hash to be highlighted in a bright yellow color. The browser also automatically scrolls down to the location of the highlight.
This can be a very useful thing, particularly on pages with huge amounts of text. I use it quite often in my own posts to direct people to particular sub-parts of my website to better highlight the pieces I think they’ll find useful.
It can be even more useful for academics and researchers who want to highlight or even bookmark specific passages of text online. Those with experience on the Medium.com platform will also notice how useful highlighting can be, but having a specific permalink structure for it goes a step further.
I will note however, that it’s been rare, if ever, that anyone besides myself has used this functionality on my site. Why? We’ll look at that in just a moment.
Extending fragmentions for easier usability.
Recently as a result of multiple conversations with Aaron Davis (on and between our websites via webmention with syndication to Twitter), I’ve been thinking more about notes, highlights, and annotations on the web. He wrote a post which discusses “Page Bookmarks” which are an interesting way of manually adding anchors on web pages to allow for targeting specific portions of web pages. This can make it easy for the user to click on links on a page to let them scroll up and down specific pages. Sadly, these are very painful to create and use both for a site owner and even more so for the outside public which has absolutely no control over them whatsoever.
His post reminded me immediately of fragmentions. It also reminded me that there was a second bit of user interface related to fragmentions that I’d always meant to also add to my site, but somehow never got around to connecting: a “fragmentioner” to make it more obvious that you could use fragmentions on my site.
In short, how could a user know that my website even supports fragmentions? How could I make it easier for them to create a fragmention from my site to share out with others? Fortunately for me, our IndieWeb friend Kartik Prabhu had already wired up the details for his own personal website and released the code and some pointers for others who were interested in setting it up themselves. It’s freely available on Github and includes some reasonable details for installation.
So with a small bit of tweaking and one or two refinements, I got the code up and running and voilà! I now have a natural UI for highlighting things.
How?
When a user naturally selects a portion of my page with their mouse–the way they might if they were going to cut and paste the text, a simple interface pops up with instructions to click it for a link. Kartik’s JavaScript automatically converts the highlight into the proper format and changes the page’s URL to include the appropriate fragmention URL for that snippet of the page. A cut and paste allows the reader to put that highlighted piece’s URL anywhere she likes.
Highlighting text pulls up some simple user interface for creating a fragmention to the highlighted text.
The future
What else would be nice?
I can’t help but think that it would be fantastic if the WordPress Fragmention plugin added the UI piece for highlight and sharing text via an automatically generated link.
Perhaps in the future one could allow a highlight and click interaction not only get the link, but to get a copy of both the highlighted text and the link to the URL. I’ve seen this behavior on some very socially savvy news websites. This would certainly make a common practice of cutting and pasting content much easier to do while also cleverly including a reference link.
The tough part of this functionality is that it’s only available on websites that specifically enable it. While not too difficult, it would be far nicer to have native browser support for both fragmention creation and use. This would mean that I don’t need to include the JavaScript on my website to do the scrolling or highlighting and I wouldn’t need any JavaScript on my site to enable the highlighting to provide the specific code for the custom URL. How nice would it be if this were an open web standard and supported by major browsers without the need for work at the website level?
Medium-like highlighting and comments suddenly become a little easier for websites to support. With some additional code, it’s only a hop, skip, and a jump to dovetail this fragmention functionality with the W3C Webmentions spec to allow inline marginalia on posts. One can create a fragmention targeting text on a website and write a reply to it. With some UI built out, by sending a webmention to the site, it could pick up the comment and display it as a marginal note at that particular spot instead of as a traditional comment below the post where it might otherwise loose the context of being associated at the related point in the main text. In fact our friend Kartik Prabhu has done just this on his website. Here’s an example of it in his post announcing the feature.
Example of inline marginalia on Kartik Prabhu’s website “Parallel Transport”.
You’ll notice that small quotation bubbles appear at various points in the text indicating marginalia. By clicking on them, the bubble turns green and the page expands to show the comment at that location. One could easily imagine CSS that allows the marginalia to actually display in the margin of the page for wider screens.
How could you imagine using fragmentions? What would you do with them? Feel free to add your thoughts below or own your site and send me a webmention.
Diigo provides a 2 step method to help you make the best use of your kindle highlights.
Step 1: Import your kindle highlights to your Diigo library.
Step 2: Organize highlights from a book in your own knowledge structure.
Another interesting way to potentially cut out data from Amazon Kindle e-books in terms of annotations, marginalia, and notes.
Back in April, Audrey Watters’ decided to block annotation on her website. I understand why. When we project our identities online, our personal sites become extensions of our homes. To some online writers, annotation overlays can feel like graffiti. How can we respect their wishes while enabling ...
It’s been well over a month since I blocked annotations (Hypothesis and Genius) on my websites. I’m a little taken aback that some folks are still muttering about it. Perhaps I need to restate a couple of things:
You can still annotate my work. Just not on my websites.
My work here and on Hack Education is openly licensed. As long as you follow that license – CC BY NC SA – you can copy and redistribute my articles without my permission.
The CC license on my work also means you can post my articles in another file format or medium – that is, they needn’t stay in HTML. You can publish my articles as PDFs. You can hit “print.”
Some important things about control of one’s own website here. She doesn’t say it, but having one as a platform is a means of self-distributing one’s own work. It shouldn’t also necessarily mean distributing someone else’s and amplifying their voice too.
In this episode, we talk about Audrey's decision to block annotations from her websites.
A great little episode that talks about annotations, but impinges on a lot of issues relating to ownership and running of a (personal) website. It discusses a lot of things that folks on the web often take for granted, but which should really be done with a lot more civility and care for others.
While I have been seeing some really great and thoughtful conversations, particularly in the last 6 months or more, as a result of people posting on their own websites and using open standards like webmentions to carry on conversations, the rest of the internet still needs to take great strides to improve itself. A lot of these issues are ones of bias, and particularly of the white male sort, but I think that the ideas encapsulated in this short podcast will help to open people’s eyes. While it’s sad that Audrey had these experiences on Twitter, I’m glad that she and Kin took the time to discuss them here in hopes of improving the space in the future for others.
ReadUn-Annotated by Audrey Watters(Hack Education)
Why Audrey Watters has blocked annotations from News Genius and Hypothes.is from her website.
I thought Audrey Watters’ post on why (and how) she prevents others from annotating her website was so important that I needed to highlight and annotate a few sections for myself for future use on my own site cum commonplace book. Her comments about ownership, control, and even harassment are all incredibly germane to the Indieweb movement as well.
I also wanted to use this post as an experiment of sorts to see how sound her script actually is with respect to people using both of the annotation services she mentions.
The text of her post appears below in full and unaltered (as it did on 2017-05-17 aside from my obvious annotations and highlights). It (and my commentary and highlights) is (CC BY-NC-SA 4.0) as she originally licensed it.
I have added a script to my websites today that will block annotations – namely those from Genius and those from Hypothes.is. I have been meaning to do this for a while now, so it’s mostly a project that comes as I procrastinate doing something else rather than one that comes in response to any recent event.
I took comments off my websites in 2013 because I was sick of having to wade through threats of sexualized violence in order to host conversations on my ideas.
My blog. My rules. No comments.
The article linked at the bottom of the paragraph is a must read in my opinion and sparked some of my original thoughts last year about this same phenomenon. I suspect that Ms. Watters has been wanting to do this since this article was posted and/or she read it subsequently. — {cja}
I’ve made this position fairly well known – if you have something to say in response, go ahead and write your own blog post on your own damn site. So I find the idea that someone would use a service like Hypothes.is to annotate my work on my websites particularly frustrating. I don’t want comments – not in the margins and not at the foot of an article. Mostly, I don’t want to have to moderate them. I have neither the time nor the emotional bandwidth. And if I don’t want to moderate comments, that means I definitely do not want comments to appear here (or that appear to be here) that are outside my control or even my sight.
This isn’t simply about trolls and bigots threatening me (although yes, that is a huge part of it); it’s also about extracting value from my work and shifting it to another company which then gets to control (and even monetize) the conversation.
Does the script Audrey Watters is using really stop people from annotating her site directly?
Based on my quick test, one can still (carefully) use Hypothes.is to highlight and annotate her site, but the script at least prevents Hypothes.is from showing that annotation. When visiting her site with Hypothes.is’ Chrome browser extension on, it does show that there is one annotation on the page. It then requires some hunting to find this comment.
And this particular post is proof of the fact that it can still be annotated, but without impinging on the sovereignty of the original author or her site. — {cja}
Blocking annotation tools does not stop you from annotating my work. I’m a fan of marginalia; I am. I write all over the books I’ve bought, for example. Blocking annotations in this case merely stops you from writing in the margins here on this website.
Web annotations became a W3C standard last week but the world hardly noticed. For years, most conversations on the web have happened in the form of comments. Annotations are different in that they usually reference specific parts of a document and add context. They are often critical or explanatory in nature.
Web annotation seems to promote more critical thinking and collaboration but it’s doubtful that it would ever fully replace commenting systems.
But why not mix annotations and comments together the way some in the IndieWeb have done?! A few people are using the new W3C recommendation spec for Webmention along with fragmentions to send a version of comments-marginalia-annotations to sites that accept them and have the ability to display them!
A good example of this is Kartik Prabhu’s website which does this somewhat like Medium does. One can write their response to a sub-section of his post on their own website, and using webmention (yes, there’s a WordPress plugin for that) send him the response. It then shows up on his site as a quote bubble next to the appropriate section which can then be opened and viewed by future readers.
While annotation systems have the ability to overlay one’s site, there’s certainly room for serious abuse as a result. (See an example at https://indieweb.org/annotation#Criticism.) It would be nice if annotation systems were required to use something like webmentions (or even older trackback/pingbacks) to indicate that a site had been mentioned elsewhere, this way, even if the publisher wasn’t responsible for moderating the resulting comments, they could at least be aware of possible attacks on their work/site/page. #
I’ve started into the documentation, but I’m curious if there’s a simple way of doing this without some 3rd party like Hypothes.is, Genius, etc. or some other massive framework?
In a project which I started just before IndieWebCamp LA in November, I’ve moved a big step closer to perfecting my “Read” posts!
Thanks in large part to WordPress, PressForward, friends and help on the IndieWeb site too numerous to count, and a little bit of elbow grease, I can now receive and read RSS feeds in my own website UI (farewell Feedly), bookmark posts I want to read later (so long Pocket, Instagram, Delicious and Pinboard), mark them as read when done, archive them on my site (and hopefully on the Internet Archive as well) for future reference, highlight and annotate them (I still love you hypothes.is, but…), and even syndicate (POSSE) them automatically (with emoji) to silos like Facebook, Twitter (with Twitter Cards), Tumblr, Flipboard, LinkedIn, Pinterest, StumbleUpon, Reddit, and Delicious among others.
Syndicated copies in the silos when clicked will ping my site for a second and then automatically redirect to the canonical URL for the original content to give the credit to the originating author/site. And best of all, I can still receive comments, likes, and other responses from the siloed copies via webmention to stay in the loop on the conversations they generate without leaving my site.
Here’s an example of a syndicated post to Twitter:
I’ve just noticed that the metadata PressForward scrapes is enough to allow highlights and marginalia from Hypothes.is on the original web page to also appear in my copy on my own website! How awesome is that?
In an interview seven days before leaving office, Mr. Obama talked about the role books have played during his presidency and throughout his life.
Not since Lincoln has there been a president as fundamentally shaped — in his life, convictions and outlook on the world — by reading and writing as Barack Obama.
There are a couple of fragmentions plugins in the WordPress repository. I use and recommend WP Fragmention. Mostly it comes down to supporting a chunk of javascript that is the brainchild of Kevin Marks.
For Hypothes.is, I use the plugin referenced in the tweet above, but I’ve also been using Hypothes.is Aggregator by Kris Shaffer. I will note that the latter broke for me recently (possibly with the upgrade to WP 4.7, but I’ve filed a ticket and hopefully it’ll get sorted shortly). Shaffer’s plugin also makes using and posting with Hypothes.is’ Chrome extension more useful and interesting to me, since I can own copies of my highlights/annotations on my own website.
I’m hoping that sometime soon that Hypothes.is highlights and annotations on pages will also support sending webmentions so that when someone annotates one of my pages that I’ll receive a notification about it, almost as if it were a comment. If you’re interested in this sort of thing, Kartik Prabhu has a fantastic write up and some code on mixing marginalia and webmentions which I’m hoping to implement sometime soon myself.
If you need any help with any of the above, I (and surely others) are happy to help you via IndieWeb Chat.
This morning while breezing through my Woodwind feed reader, I ran across a post by Rick Mendes with the hashtags #readlater and #readinglist which put me down a temporary rabbit hole of thought about reading-related post types on the internet.
I’m obviously a huge fan of reading and have accounts on GoodReads, Amazon, Pocket, Instapaper, Readability, and literally dozens of other services that support or assist the reading endeavor. (My affliction got so bad I started my own publishing company last year.)
READ LATER is an indication on (or relating to) a website that one wants to save the URL to come back and read the content at a future time.
I started a page on the IndieWeb wiki to define read later where I began writing some philosophical thoughts. I decided it would be better to post them on my own site instead and simply link back to them. As a member of the Indieweb my general goal over time is to preferentially quit using these web silos (many of which are listed on the referenced page) and, instead, post my reading related work and progress here on my own site. Naturally, the question becomes, how does one do this in a simple and usable manner with pretty and reasonable UX/UI for both myself and others?
Current Use
Currently I primarily use a Pocket bookmarklet to save things (mostly newspaper articles, magazine pieces, blog posts) for reading later and/or the like/favorite functionality in Twitter in combination with an IFTTT recipe to save the URL in the tweet to my Pocket account. I then regularly visit Pocket to speed read though articles. While Pocket allows downloading of (some) of one’s data in this regard, I’m exploring options to bring in the ownership of this workflow into my own site.
For more academic leaning content (read journal articles), I tend to rely on an alternate Mendeley-based workflow which also starts with an easy-to-use bookmarklet.
I’ve also experimented with bookmarking a journal article and using hypothes.is to import my highlights from that article, though that workflow has a way to go to meet my personal needs in a robust way while still allowing me to own all of my own data. The benefit is that fixing it can help more than just myself while still fitting into a larger personal workflow.
Brainstorming
A Broader Reading (Parent) Post-type
Philosophically a read later post-type could be considered similar to a (possibly) unshared or private bookmark with potential possible additional meta-data like: progress, date read, notes, and annotations to be added after the fact, which then technically makes it a read post type.
A potential workflow viewed over time might be: read later >> bookmark >> notes/annotations/marginalia >> read >> review. This kind of continuum of workflow might be able to support a slightly more complex overall UI for a more simplified reading post-type in which these others are all sub-types. One could then make a single UI for a reading post type with fields and details for all of the sub-cases. Being updatable, the single post could carry all the details of one’s progress.
Indieweb encourages simplicity (DRY) and having the fewest post-types possible, which I generally agree with, but perhaps there’s a better way of thinking of these several types. Concatenating them into one reading type with various data fields (and the ability of them to be public/private) could allow all of the subcategories to be included or not on one larger and more comprehensive post-type.
Examples
Not including one subsection (or making it private), would simply prevent it from showing, thus one could have a traditional bookmark post by leaving off the read later, read, and review sub-types and/or data.
As another example, I could include the data for read later, bookmark, and read, but leave off data about what I highlighted and/or sub-sections of notes I prefer to remain private.
A Primary Post with Webmention Updates
Alternately, one could create a primary post (potentially a bookmark) for the thing one is reading, and then use further additional posts with webmentions on each (to the original) thereby adding details to the original post about the ongoing progress. In some sense, this isn’t too far from the functionality provided by GoodReads with individual updates on progress with brief notes and their page that lists the overall view of progress. Each individual post could be made public/private to allow different viewerships, though private webmentions may be a hairier issue. I know some are also experimenting with pushing updates to posts via micropub and other methods, which could be appealing as well.
This may be cumbersome over time, but could potentially be made to look something like the GoodReads UI below, which seems very intuitive. (Note that it’s missing any review text as I’m currently writing it, and it’s not public yet.)
Overview of reading progress
Other Thoughts
Ideally, better distinguishing between something that has been bookmarked and read/unread with dates for both the bookmarking and reading, as well as potentially adding notes and highlights relating to the article is desired. Something potentially akin to Devon Zuegel‘s “Notes” tab (built on a custom script for Evernote and Tumblr) seems somewhat promising in a cross between a simple reading list (or linkblog) and a commonplace book for academic work, but doesn’t necessarily leave room for longer book reviews.
I’ll also need to consider the publishing workflow, in some sense as it relates to the reverse chronological posting of updates on typical blogs. Perhaps a hybrid approach of the two methods mentioned would work best?
Kindle Notes and Highlights are now shoing up as a beta feature in GoodReads
Comments
I’ll keep thinking about the architecture for what I’d ultimately like to have, but I’m always open to hearing what other (heavy) readers have to say about the subject and the usability of such a UI.
Please feel free to comment below, or write something on your own site (which includes the URL of this post) and submit your URL in the field provided below to create a webmention in which your post will appear as a comment.
There are potential solutions to the recent News Genius-gate incident, and simple notifications can go a long way toward helping prevent online bullying behavior.
There has been a recent brouhaha on the Internet (see related stories below) because of bad actors using News Genius (and potentially other web-based annotation tools like Hypothes.is) to comment on websites without their owner’s knowledge, consent, or permission. It’s essentially the internet version of talking behind someone’s back, but doing it while standing on their head and shouting with your fingers in their ears. Because of platform and network effects, such rude and potentially inappropriate commentary can have much greater reach than even the initial website could give it. Naturally in polite society, such bullying behavior should be curtailed.
This type of behavior is also not too different from more subtle concepts like subtweets or the broader issues platforms like Twitter are facing in which they don’t have proper tools to prevent abuse and bullying online.
A creator receives no notification if someone has annotated their content.–Ella Dawson
On March 25th, Ella Dawson wrote a blog post in which she requested that Genius disable its Web Annotator for her site.
Towards a Solution: Basic Awareness
I think that a major part of improving the issue of abuse and providing consent is building in notifications so that website owners will at least be aware that their site is being marked up, highlighted, annotated, and commented on in other locations or by other platforms. Then the site owner at least has the knowledge of what’s happening and can then be potentially provided with information and tools to allow/disallow such interactions, particularly if they can block individual bad actors, but still support positive additions, thought, and communication. Ideally this blocking wouldn’t occur site-wide, which many may be tempted to do now as a knee-jerk reaction to recent events, but would be fine grained enough to filter out the worst offenders.
Toward the end of notifications to site owners, it would be great if any annotating activity would trigger trackbacks, pingbacks, or the relatively newer and better webmention protocol of the W3C which comes out of the IndieWeb movement. Then site owners would at least have notifications about what is happening on their site that might otherwise be invisible to them. (And for the record, how awesome would it be if social media silos like Facebook, Twitter, Instagram, Google+, Medium, Tumblr, et al would support webmentions too!?!)
Perhaps there’s a way to further implement filters or tools (a la Akismet on platforms like WordPress) that allow site users to mark materials as spam, abusive, or “other” so that they are then potentially moved from “public” facing to “private” so that the original highlighter can still see their notes, but that the platform isn’t allowing the person’s own website to act as a platform to give safe harbor (or reach) to bad actors.
Further some site owners might appreciate gradable filters (G, PG, PG-13, R, X) so that either they or their users (or even parents of younger children) can filter what they’re willing to show on their site (or that their users can choose to see).
Consider also annotations on narrative forms that might be posted as spoilers–how can these be guarded against? For what happens when a even a well-meaning actor posts an annotation on page two which foreshadows that the butler did it thereby ruining the surprise on the last page? Certainly there’s some value in having such a comment from an academic/literary perspective, but it doesn’t mean that future readers will necessarily appreciate the spoiler. (Some CSS and a spoiler tag might easily and unobtrusively remedy the situation here?)
Certainly options can be built into the annotating platform itself as well as allowing server-side options for personal websites attempting to deal with flagrant violators and truly hard-to-eradicate cases.
Note: You’re welcome to highlight and annotate this post using Hypothes.is (see upper right corner of page) or on News Genius.
Do you have a solution for helping to harden the Internet against bullies? Share it in the comments below.
Reply
Repost
Like
Jon Udell
Audrey Watters
Brash Equilibrium
