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

Extension of the Insights » Posting Activity functionality

Filed an Issue Automattic/jetpack (GitHub)
Increase your traffic, view your stats, speed up your site, and protect yourself from hackers with Jetpack.

I’ve been enjoying the idea that JetPack is providing a Github contributions-like functionality at https://wordpress.com/stats/insights/example.com under the heading Posting Activity.

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.

Seeing this naturally provides me some additional motivation to post more often, which is generally a good thing for the platform. It also dovetails in visually with the “you have posted X days in a row” notifications sent by the mobile app.

I’m sure it all may be on the roadmap somewhere, but in case it’s not I thought I’d leave a few ideas about continuing to extend this awesome functionality and related UI features.

  • It would be nice to be able to display more than one calendar year of activity. Perhaps a tabbed UI could provide access to prior years while still being relatively compact? (This could be similar to “All Time Views” just below it which has button (aka tab) options for “Months and Years” or “Average per Day”.
    A visual representation of the button/tabbed functionality for "All Time Views" described in the text.
  • While hovering over a particular square representing a date provides some useful information like the number of posts on a particular date, it would be awesome if clicking on that date would take one to the correct archive page for that date. This is not too dissimilar to from GitHub’s functionality and the permalinks for each day should already exist in core. Example: https://example.com/2019/04/17 to show all of that day’s posts.
  • Similar to the functionality for posts, it would be interesting to have a similar set up for comments to allow sorting through those visually as well.
  • It would be awesome to have all of the above rolled up into a widget that would allow one to post the visual data for several months and/or years visually on a sidebar, footer, or other widgetizeable area. This also provides site readers the ability to quickly jump to a particular date and/or set of posts much like the Archives widget allows, but with a more visual interface.
  • If there is a widget, while I’m sure that many will love the blue WordPress-based color scheme, many will want to key their colors off of their theme as a customizable widget option.
  • Given the infrastructure for creating a lot of the above functionality, one could go a half step further and create an “On this Day” feature similar to that of Facebook, Timehop, and many others which allow one to create archive page views for what happened on this same day a year ago, two years ago, three, four, etc. This could be wonderfully useful for a wide variety of sites to look back at birthdays, anniversaries, and red letter dates as well as the average Tuesday. To my knowledge there is only one old plugin that I was able to find after some serious search that has somewhat similar functionality: Room 34 presents On This Day. There is also some similar functionality like this recently built into the Post Kinds Plugin which creates archive views for several date-based permalinks. This would be all the better if there is a better API for such an endpoint so that it could be tied into third party platforms like Timehop which are overly focused on social sites like Facebook, Twitter, Google, etc., but which could include WordPress-based websites.

Also as I post this, and as I’m thinking the functionality is relatively new, I notice that my JetPack enabled .org site only has Posting Activity that goes back to mid-October 2018 (despite the fact that it should go back much further), while my wordpress.com site has data that goes far back beyond that date. Is this a potential bug, or could it be the case that my self-hosted site hasn’t been parsed back far enough to cover more time yet? It may also be related to the fact that I’ve recently (this week) disconnected and reconnected JetPack to do some troubleshooting.

👓 Creating GitHub-Style Contribution Graphs for Anything | schwertly.com

Read Creating GitHub-Style Contribution Graphs for Anything by Stan Schwertly (schwertly.com)
You can use akerl’s excellent GithubChart tool from GitHub to create contribution graphs using any data you want. Compare my current GitHub streak: Your browser does not support SVG versus all of my repos, public and private: Your browser does not support SVG (You’ll notice differences on the ...
Watched For Patients, by Patients: Pioneering a New Approach in Med-Tech Design by  Innovate Pasadena: Friday Coffee Meetup Innovate Pasadena: Friday Coffee Meetup from YouTube

I was ten years into a career as a user experience designer making new digital products when diabetes blew my family's life apart. The complexity and relentlessness of the burden of care that came with my youngest daughter's diagnosis at 1.5 years old, were overwhelming. I learned that people with diabetes are always 10 minutes of inattention away from a coma. Run your blood sugar too low and risk brain injury or death. Run too high and you do cumulative damage to your organs, nerves and eyes. And as a designer and hardware hacker I couldn't accept the limitations and poor User Experience I was seeing in all the tools we were given to deal with it.

Then I discovered Nightscout (a way to monitor my daughter's blood sugar in real time from anywhere in the world) and Loop (a DIY open sourced, artificial pancreas system that checks blood sugar and adjusts insulin dosing every five minutes 24/7) and the community that produced them. For the first time I saw the kinds of tools I needed and true power of solutions that come from the people living with the problem. When I learned about the Tidepool's project to take Loop through FDA approval and bring it to anyone who wants to use it to give the same freedom and relief that we've experienced from it, I had to get involved. Now we are taking an open source software through regulatory approval and using real-life user data from the DIY community for our clinical trial in a process that is turning heads in the industry. We'll get into the many ways this story demonstrates ways that user driven design, open source models and a counterculturally collaborative approach with regulators are shifting the incentives and changing the landscape toward one more favorable to innovation.

Here’s the video I mentioned yesterday. Those deeply enmeshed in the IndieWeb movement and many of its subtleties will get a ringing sense of déjà vu as they watch it and realize there’s a lot of overlap with how (and why) Matt Lumpkin is working to help those with type 1 diabetes and the IndieWeb. Perhaps there are some lessons to be learned here?