👓 The Web’s Arrow of Time | Parallel Transport

Read The Web’s Arrow of Time by Kartik PrabhuKartik Prabhu (kartikprabhu.com)
I was looking into adding some navigation links to my post feed/archive pages, when I ran into an old confusion of mine. The Web has a completely messed up arrow of time!

Social Reading User Interface for Discovery

I read quite a bit of material online. I save “bookmarks” of all of it on my personal website, sometimes with some additional notes and sometimes even with more explicit annotations. One of the things I feel like I’m missing from my browser, browser extensions, and/or social feed reader is a social layer overlay that could indicate that people in my social network(s) have read or interacted directly with that page (presuming they make that data openly available.)

One of the things I’d love to see pop up out of the discovery explorations of the IndieWeb or some of the social readers in the space is the ability to uncover some of this social reading information. Toward this end I thought I’d collect some user interface examples of things that border on this sort of data to make the brainstorming and building of such functionality easier in the near future.

If I’m missing useful examples or you’d like to add additional thoughts, please feel free to comment below.

Examples of social reading user interface for discovery

Google

I don’t often search for reading material directly, but Google has a related bit of UI indicating that I’ve visited a website before. I sort of wish it had the ability to surface the fact that I’ve previously read or bookmarked an article or provided data about people in my social network who’ve done similarly within the browser interface for a particular article (without the search.) If a browser could use data from my personal website in the background to indicate that I’ve interacted with it before (and provide those links, notes, etc.), that would be awesome!

Screen capture for Google search of Kevin Marks with a highlight indicating that I've visited this page in the recent past
Screen capture for Google search of Kevin Marks with a highlight indicating that I’ve visited his page several times in the past. Given the March 2017 date, it’s obvious that the screen shot is from a browser and account I don’t use often.

I’ll note here that because of the way I bookmark or post reads on my own website, my site often ranks reasonably well for those things.

On a search for an article by Aaron Parecki, my own post indicating that I’ve read it in the past ranks second right under the original.

In some cases, others who are posting about those things (reading, commenting, bookmarking, liking, etc.) in my social network also show up in these sorts of searches. How cool would it be to have a social reader that could display this sort of social data based on people it knows I’m following

A search for a great article by Matthias Ott shows that both I and several of my friends (indicated by red arrows superimposed on the search query) have read, bookmarked, or commented on it too.

Hypothes.is

Hypothes.is is a great open source highlighting, annotation, and bookmarking tool with a browser extension that shows an indicator of how many annotations  appear on the page. In my experience, higher numbers often indicate some interesting and engaging material. I do wish that it had a follower/following model that could indicate my social sphere has annotated a page. I also wouldn’t mind if their extension “bug” in the browser bar had another indicator in the other corner to indicate that I had previously annotated a page!

Screen capture of Vannevar Bush’s article As We May Think in The Atlantic with a Hypothes.is browser extension bug indicating that there are 329 annotations on the page.

Reading.am

It doesn’t do it until after-the-fact, but Reading.am has a pop up overlay through its browser extension. It adds me to the list of people who’ve read an article, but it also indicates others in the network and those I’m following who have also read it (sometimes along with annotations about their thoughts).

What I wouldn’t give to see that pop up in the corner before I’ve read it!

Reading.am’s social layer creates a yellow colored pop up list in the upper right of the browser indicating who else has read the article as well as showing some of their notes on it. Unfortunately it doesn’t pop up until after you’ve marked the item as read.

Nuzzel

Nuzzel is one of my favorite tools. I input my Twitter account as well as some custom lists and it surfaces articles that people in my Twitter network have been tweeting about. As a result, it’s one of the best discovery tools out there for solid longer form content. Rarely do I read content coming out of Nuzzel and feel robbed. Because of how it works, it’s automatically showing those people in my network and some of what they’ve thought about it. I love this contextualization.

Nuzzel’s interface shows the title and an excerpt of an article and also includes the avatars, names, network, and commentary of one’s friends that interacted with the piece. In this example it’s relatively obvious that one reader influenced several others who retweeted it because of her.

Goodreads

Naturally sites for much longer form content will use social network data about interest, reviews, and interaction to a much greater extent since there is a larger investment of time involved. Thus social signaling can be more valuable in this context. A great example here is of Goodreads which shows me those in my network who are interested in reading a particular book or who have written reviews or given ratings.

A slightly excerpted/modified screen capture of the Goodreads page for Melanie Mitchell’s book Complexity that indicates several in my social network are also interested in reading it.

Are there other examples I’m missing? Are you aware of similar discovery related tools for reading that leverage social network data?

Watched A bold idea to replace politicians by César Hidalgo from ted.com
César Hidalgo has a radical suggestion for fixing our broken political system: automate it! In this provocative talk, he outlines a bold idea to bypass politicians by empowering citizens to create personalized AI representatives that participate directly in democratic decisions. Explore a new way to make collective decisions and expand your understanding of democracy.

“It’s not a communication problem, it’s a cognitive bandwidth problem.”—César Hidalgo

He’s definitely right about the second part, but it’s also a communication problem because most of political speech is nuanced toward the side of untruths and covering up facts and potential outcomes to represent the outcome the speaker wants. There’s also far too much of our leaders saying “Do as I say (and attempt to legislate) and not as I do.” Examples include things like legislators working to actively take away things like abortion or condemn those who are LGBTQ when they actively do those things for themselves or their families or live out those lifestyles in secret.

“One of the reasons why we use Democracy so little may be because Democracy has a very bad user interface and if we improve the user interface of democracy we might be able to use it more.”—César Hidalgo

This is an interesting idea, but definitely has many pitfalls with respect to how we know AI systems currently work. We’d definitely need to start small with simpler problems and build our way up to the more complex. However, even then, I’m not so sure that the complexity issues could ultimately be overcome. On it’s face it sounds like he’s relying too much on the old “clockwork” viewpoint of phyiscs, though I know that obviously isn’t (or couldn’t be) his personal viewpoint. There’s a lot more pathways for this to become a weapon of math destruction currently than the utopian tool he’s envisioning.

👓 Baby Snarf | Tom Woodward

Read Baby Snarf by Tom WoodwardTom Woodward (bionicteaching.com)

This is a ridiculous thing. It came into my head the other day and it amused at least a few of my children . . . once I explained what Snarf was. I plan to make ridiculous things more often. I initially had it up on...

Content Warning (Earworm: Baby Shark)

This does make me wonder if Ryan Barrett’s website name is related? It would have been in his formative youth (circa 1985) in a nascent pre-web era. Do tell…

Incidentally Tom’s example here is another good reason for Why IndieWeb–one needn’t rely on a silo’s algorithm which may remove content for copyright violations even when it was done with fair use and/or satire in mind.

It’s also been a while since I’ve seen someone with a site that had a Trackback/Pingback URL box on their website like Tom does. Very cool and similar to the Webmention box on my own.

Watched Fraidycat (Prototype Vid) by Kicks CondorKicks Condor from Kicks Condor

Futilely attempting to build an RSS reader that’s not at all an RSS reader.

The year of the reader continues. This is wicked awesome. I want this reader!

There are some interesting UI pieces hiding in here. I love the way things are sortable by importance. I like the sparklines for posting frequency. The color differentiation to give an idea about recency of posts is cool.

And one of the best things is that it’s not really a reader. In true Kicks fashion, it’s all just links, which means that one goes to the original site to read the content. I mentioned just yesterday the fact that some of my “identity” is lost with the CSS and details of my site being stripped within sterile readers. This sort of reader decimates that.

Of course, the verso of that is a reader that could be CSS configurable so that every site looks as busy or crazy as mango zone does in the video. Naturally, many browsers support local CSS, so I suppose I could make the New York Times look like Kicks Condor’s site, but who has the time to do all that configuration?? (Maybe one day…) Maybe some readers will have their simple chrome, but pull in not only the content, but the CSS and visual goodness along with them? The best of both worlds?

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

I don’t use it frequently, but I just noticed that the WordPress.com feed reader has some functionality to concatenate and display multiple posts together for feeds that update relatively frequently. I like the fact that there’s a little less cognitive load in changing contexts from one source’s posts and those of others which have longer inter-post times.

Screencapture of the WordPress reader UI in which the New York Times feed has four items collected together despite other sources being posted between them in time.

While some don’t like feeds that aren’t ordered temporally, this seems like a useful compromise when looking at feeds with large numbers of different sources.

This is somewhat reminiscent of the way Tantek Çelik concatenates likes within his homepage.

A screencapture of Tantek's homepage showing two blocks of concatenated likes amidst other posts

Whether within a stream of posts on a personal site or within a feed reader, this UI pattern is very subtle, but incredibly useful.

👓 The evolution of linkblogging | Manton Reece

Read The evolution of linkblogging by Manton Reece (manton.org)
In my posts about defining what makes a microblog post and guidelines for RSS, I talked a little about links but didn’t explore linkblogging. While many blog authors post primarily long essays, shorter link blogs are a common approach for bloggers who want to post new content several times a day. ...

Some subtle, but valuable disntinctions here. When is a bookmark not a bookmark.

🎧 Solving the Facebook Problem at Home and Abroad | On the Media | WNYC Studios

Listened to Solving the Facebook Problem at Home and Abroad by Bob Garfield from On the Media | WNYC Studios

When former Facebook co-founder Chris Hughes penned a New York Times op-ed calling for the breakup of the platform, he was lauded by anti-corporate politicians and the press. Then came a series of hard questions: how exactly would breaking up Facebook, which owns WhatsApp and Instagram, address free speech concerns? Or help stifle the spread of propaganda on the platform? And how would American regulations affect the majority of Facebook users, who live in the global south? According to Michael Lwin, an American-born antitrust lawyer living in Yangon, Myanmar, US regulators should tread lightly. He and Bob speak about how calls to break up Facebook could have wide ranging unintended consequences, especially outside of the US.

As bad as Facebook is, there are some potential second and multiple-order effects to be careful of when considering breaking them up or heavily regulating them.

👓 New home page for Micro.blog | Manton Reece

Read a post by Manton ReeceManton Reece (micro.blog)
New home page for Micro.blog manton.org

Some interesting thoughts in the replies here. Deserves some additional thought for UI/UX, particularly for the number of services micro.blog provides.

👓 I Ran Out of Likes! Wtf? | Here in the Silence

Read I Ran Out of Likes! Wtf? by silentfall2016silentfall2016 (❦ Here in the Silence ❦)

So, I was clicking stars, reading blogs, clicking stars, reading more…..click, click, click, feeding all of my loveys their beloved stars…

and then…….

WordPress started rejecting my likes! Grrrrrr!

So, no more stars tonight. Sorry if I missed you!

This WordPress.com user had liked at least four of my posts almost in a row, so I thought I’d see what they were writing. This post about running out of likes was one of the first things I saw. While her like activity may appear genuine, albeit a bit spammy, there are apparently limits to how many times you can use the WordPress.com like functionality.

👓 The former lead designer of Gmail just fixed Gmail on his own | Fast Company

Read The former lead designer of Gmail just fixed Gmail on his own (Fast Company)
The free Chrome extension Simplify will give you the Gmail you want.

A Modest Proposal Review

Will you look at this?! Twitter has recreated the WordPress Gutenberg editor interface into their web product. Currently it only has a few blocks for text, photos, gifs, video, embeds, and polls, but it’s not completely horrible and it’s relatively fast and convenient.

The Gutenberg editor in WordPress:

The title of the pending post is "Hello to the New Editor"
Screen capture of the new Gutenberg interface

In fact it appears that they’ve pared the editor down substantially. A few more tweaks and it might be as clean as the Medium editor experience.

Want to add a video, just drop a youtube link:

Want to embed a blog post from somewhere else? Add the link in your tweet and get a spiffy Twitter Card (just like oEmbed!)

An Introduction to the IndieWeb

I can see people getting awfully tired of clicking that “plus” button interminably though. Maybe if the interface could algorithmically choose where to break text the same way it determines what tweets I’m going to see?

Now they just need an edit button and they’ve got a “real” blogging experience, but one that’s editable in tiny 280 character chunks. Who has the attention span for more content than this anyway?

I can already tell that newspapers and magazines are going to love this. Just imagine the ease of doing shareable pull quotes this way?!

I can see journalistic institutions rebuilding their entire platforms on Twitter already!

Old CMS -> Tumblr -> Medium -> Twitter!

What is your favorite editing experience?

  • The Tweetstorm-o-matic
  • WordPress’ Gutenberg
  • WordPress Classic Editor
  • Medium

Uh oh! I’m noticing that they’ve neglected to put a block in for a title area. Maybe we could just do a really short tweet up at the top of the thread instead? If only we could drag and drop tweets to reorder them? At least you can add new tweets into the middle of the stream.

Besides, who’s going to read anything but the headline tweet anyway. No one is ever going to read this far into a tweetstorm. Maybe a blog post where they at least know what they’re getting into, but never a 20+ card tweetstorm.

And would you look at that? They almost jumped ahead of Medium on inline annotations by allowing people to reply to very specific pieces of the text. I’m kind of disappointed that they don’t have the pretty green highlighter colors though.

Screencapture from Medium.com with an example of an inline response.
An inline annotation on the text “Hey Ev, what about mentions?” in which Medium began to roll out their @mention functionality.

Now if only I could register a custom domain on their service and have control over the CSS, Twitter could be a first class open web CMS.

#​I​CanOnlyDream

*Sigh* I suppose until then I’ll just stick with my humble little website that allows me to own and control my own data on my own domain name and communicate with others using simple web standards.

#​​IndieWebForever

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?