<details> tags, Fragment URLs, and the HTML spec

A few weeks ago I read a post by Jamie Tanna on Using <details> tags for HTML-only UI toggles.

I thought it was a pretty slick use of HTML to create some really simple and broadly useful UI.

Then earlier today I noticed that Jeremy Keith has recently switched to using this on his personal site in the comments section to provide toggles for his various webmention types including shares, likes, bookmarks, etc. But this is where I’m noticing a quirky UI issue that isn’t as web friendly as it could be. Jeremy and others (including myself own my own site) will often provide ID tags so that one can give permalinks to the individual comments using fragments of the form:

https://adactio.com/journal/15050#comment70567 or
https://adactio.com/journal/15050#comment71896

But here’s where the UI problem lies. The first fragment URL only resolves to the page instead of the specific bookmark hiding behind a  <details> tag whereas the second fragment URL resolves to the page and automatically scrolls down to a comment by DominoPivot. It does this in both Chrome and FireFox and I would presume operates similarly in other browsers.

I suspect that most users would expect/prefer that the fragment URL should automatically expand the <details> tag and scroll down the page to that ID  or fragment as well.

Perhaps Jamie, Jeremy, Tantek, Kevin or others may have some trickery to make this happen? Otherwise, do we need to start digging into specs and browsers to get them to better support this sort of fragment related functionality?  Perhaps it’s this section of the HTML spec, the URL of which has such a fragment and therefor scrolls down properly if you click on it? (Meta pun intended.)

<details> tags, Fragment URLs, and the HTML spec was originally published on Chris Aldrich

Advertisements

User Interface to Indicate Posting Activity

User Interface to Indicate Posting Activity

In addition to the sparkline graphs I’ve got in the sidebar of my website, I’ve recently been looking at alternate ways to indicate the posting activity on my own website.

An example of a sparkline graph on Boffosocko.com. A blue line indicates the comment posting velocity and an orange line indicates the comment velocity.
“Monthly activity over 5 years” for both posting activity as well as commenting activity on my website.

Calendar Heatmaps

Yesterday I was contemplating calendar heatmaps which are probably best known from the user interface of GitHub which relatively shows how active someone is on the website. I’ve discovered that JetPack for WordPress provides a similar functionality on the back end (in blue instead of green), but sadly doesn’t make it available for display on the front end of websites. I’ve filed a feature request to see if it’s something they’d work on in the future, so if having something like this seems useful to you, please click through and give the post a +1.

Orderly grid of squares representing dates which are grouped by month with a gradation of colors on each square that indicate in heat map fashion how frequently I post to my website.
A screen capture of what my posting “velocity” looks like on the back end of my website. The darkest squares indicate 30+ posts in a day while the next darkest indicate between 15-30 posts. My “streak” is far longer than this chart indicates. I obviously post a LOT.

Circular Widthmaps

Today I saw a note that led me to the Internet Archive which I know has recently had a redesign. I’m not sure if the functionality I saw was part of this redesign, but it’s pretty awesome. I’m not sure quite what to call this sort of circular bar chart given what it does, but circular widthmap seems vaguely appropriate. Here’s a link to the archive.org page for my website that shows this cool UI, screencaptures of which also appear below: http://web.archive.org/web/sitemap/https://www.boffosocko.com/

Instead of using color gradations to indicate a relative number of posts, the UI is measuring things via width in ever increasing concentric circles. The innermost circle indicates the root domain and successive levels out add additional paths from my site. Because I’m using dated archive paths, there’s a level of circle by year (2019, 2018, 2017, etc.) then another level outside that by months (April 2019, March 2019, etc.), and finally the outermost circle which indicates individual posts. As a result, the width of a particular year or month indicates relatively how active that time frame was on my website (or at least how active Archive.org thinks it was based on its robot crawler.)

Of course the segments on the circles also measure things like categories and tags on my site as well along with the date based archives. Thus I can gauge how often I use particular categories for example.

I’ll also note that in the 2018 portion of the circle for July 11th, I had a post that slashdotted my website when it took off on Hacker News. That individual day is represented as really wide on that circular ring because it has an additional concentric circle outside of it that represents the hundreds of comment URL fragments for that post. So one must keep in mind that things in some of the internal rings aren’t as relative because they may be heavily affected by portions of content further out on the ring.

Interface that presents concentric circles with archived links of a website. The center circle is the domain itself while outside portions of the circle include archive pages, categories, pages, posts, and other portions of a site.
My website posting activity (and a little more) from 2018 and before according to the Internet Archive.
Interface that presents concentric circles with archived links of a website. The center circle is the domain itself while outside portions of the circle include archive pages, categories, pages, posts, and other portions of a site.
My website posting activity (and a little more) from April 2019 and before according to the Internet Archive.

How awesome would it be if this were embed-able and usable on my own website?

User Interface to Indicate Posting Activity was originally published on Chris Aldrich

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:

Improving user experience with links, notifications, and Webmentions was originally published on Chris Aldrich

Extending a User Interface Idea for Social Reading Online

This morning I was reading an article online and I bookmarked it as “read” using the Reading.am browser extension which I use as part of my workflow of capturing all the things I’ve been reading on the internet. (You can find a feed of these posts here if you’d like to cyber-stalk most of my reading–I don’t post 100% of it publicly.)

I mention it because I was specifically intrigued by a small piece of excellent user interface and social graph data that Reading.am unearths for me. I’m including a quick screen capture to better illustrate the point. While the UI allows me to click yes/no (i.e. did I like it or not) or even share it to other networks, the thing I found most interesting was that it lists the other people using the service who have read the article as well. In this case it told me that my friend Jeremy Cherfas had read the article.1

Reading.am user interface indicating who else on the service has read an article.

In addition to having the immediate feedback that he’d read it, which is useful and thrilling in itself, it gives me the chance to search to see if he’s written any thoughts about it himself, and it also gives me the chance to tag him in a post about my own thoughts to start a direct conversation around a topic which I now know we’re both interested in at least reading about.2

The tougher follow up is: how could we create a decentralized method of doing this sort of workflow in a more IndieWeb way? It would be nice if my read posts on my site (and those of others) could be overlain on websites via a bookmarklet or other means as a social layer to create engaged discussion. Better would have been the ability to quickly surface his commentary, if any, on the piece as well–functionality which I think Reading.am also does, though I rarely ever see it. In some sense I would have come across Jeremy’s read post in his feed later this weekend, but it doesn’t provide the immediacy that this method did. I’ll also admit that I prefer having found out about his reading it only after I’d read it myself, but having his and others’ recommendations on a piece (by their explicit read posts) is a useful and worthwhile piece of data, particularly for pieces I might have otherwise passed over.

In some sense, some of this functionality isn’t too different from that provided by Hypothes.is, though that is hidden away within another browser extension layer and requires not only direct examination, but scanning for those whose identities I might recognize because Hypothes.is doesn’t have a specific following/follower social model to make my friends and colleagues a part of my social graph in that instance. The nice part of Hypothes.is’ browser extension is that it does add a small visual indicator to show that others have in fact read/annotated a particular site using the service.

A UI example of Hypothes.is functionality within the Chrome browser. The yellow highlighted browser extension bug indicates that others have annotated a document. Clicking the image will take one to the annotations in situ.

I’ve also previously documented on the IndieWeb wiki how WordPress.com (and WordPress.org with JetPack functionality) facepiles likes on content (typically underneath the content itself). This method doesn’t take things as far as the Reading.am case because it only shows a small fraction of the data, is much less useful, and is far less likely to unearth those in your social graph to make it useful to you, the reader.

WordPress.com facepiles likes on content which could surface some of this social reading data.

I seem to recall that Facebook has some similar functionality that is dependent upon how (and if) the publisher embeds Facebook into their site. I don’t think I’ve seen this sort of interface built into another service this way and certainly not front and center the way that Reading.am does it.

The closest thing I can think of to this type of functionality in the analog world was in my childhood when library card slips in books had the names of prior patrons on them when you signed your own name when checking out a book, though this also had the large world problem that WordPress likes have in that one typically wouldn’t have know many of the names of prior patrons necessarily. I suspect that the Robert Bork privacy incident along with the evolution of library databases and bar codes have caused this older system to disappear.

This general idea might make an interesting topic to explore at an upcoming IndieWebCamp if not before. The question is: how to add in the social graph aspect of reading to uncover this data? I’m also curious how it might or might not be worked into a feed reader or into microsub related technologies as well. Microsub clients or related browser extensions might make a great place to add this functionality as they would have the data about whom you’re already following (aka your social graph data) as well as access to their read/like/favorite posts. I know that some users have reported consuming feeds of friends’ reads, likes, favorites, and bookmarks as potential recommendations of things they might be interested in reading as well, so perhaps this would be an additional extension of that as well?


[1] I’ve certainly seen this functionality before, but most often the other readers are people I don’t know or know that well because the service isn’t huge and I’m not using it to follow a large number of other people.
[2] I knew he was generally interested already as I happen to be following this particular site at his prior recommendation, but the idea still illustrates the broader point.

Extending a User Interface Idea for Social Reading Online was originally published on Chris Aldrich

An IndieWeb Podcast: Episode 0 “Considering the User”

An IndieWeb Podcast: Episode 0 “Considering the User”
An IndieWeb Podcast: Episode 0 “Considering the User”

This is a test or alpha episode of An Indieweb Podcast (working title).

In it, David Shanske and and I talk about a variety of Indieweb topics, with the theme of “Considering the User”, inspired by an article we were reading this week. Other topics include: home automation, generations, itches, Webmention, and some examples of the Post Kinds Plugin in practice (exercise, issues, chickens).

In the future we hope to have additional broad ranging conversations and perhaps interviews with others about various IndieWeb related topics.

Part of this is also an opportunity to improve audio post presentations on our websites over time. While David posted the “original” of this post on his site, I had to debate whether or not I would technically repost it or make an original of my own. Ultimately I opted for the latter.

David, by far the more veteran podcaster, deserves the lion’s share of the credit for his audio set up and recording facilities.

You can subscribe to future episodes here: http://boffosocko.com/tag/an-indieweb-podcast/feed/

If you need more IndieWeb content, guidance, or even help, an embarrassment of riches can be found on the wiki, including the following resources:

An IndieWeb Podcast: Episode 0 “Considering the User” was originally published on Chris Aldrich