2020/West/hovercards

Hovercards was a session at IndieWebCamp West 2020.

Notes archived from etherpad: https://etherpad.indieweb.org/hovercards

IndieWebCamp West 2020
Session: Hovercards
When: 2020-06-27 17:00

Proposal

Many social silos (like Twitter, WordPress (via Gravatar)) have hovercard functionality that allows one to hover over a user's name and it pulls up

a convenient card to provide more information about ther person often including photos, a description, and where they can be found on the web. How can we create an easier way of doing this on IndieWeb sites (preferrably using only HTML with a bit of CSS)? Perhaps we can leverage the idea of an h-card or services like unmung.com or other parser coded? Could a service along the lines of Quotebacks be created to make it easier to cut and paste data into posts? Could they include simple one button functionality that dovetails with readers to make following people in feed readers or social readers?

Examples:
- https://kartikprabhu.com/static/demo/simple-hovercard.html
- http://www.kevinmarks.com/indiewebcamplondon2020.html
- Perhaps this is another piece to think about as well:

I think though that if we want the IndieWeb to succeed, we will have to find some method of making directly mentioning people in posts simpler; it's really difficult to do @-mentions without middleman platforms right now.
— Katherine M. Moss (@Cambridgeport90) June 21, 2020

#Hovercards

Maxwell Joslyn I am way into this. After all, if you have (a link to) someone's h-card, aren't you one (?) step away from all the info you need? The JS demands don't seem too high -- make a request, put those values into an HTML tree, insert into the DOM -- but devils dwell in details, and I am not a web developer. "find some method of making directly mentioning people" YES

+1 Jacky Alciné
+1 Tantek Çelik - would love to understand the use-case to see if we can do pure-CSS (no JS) hovercards, sounds like a fun hack project, maybe even a web component? (My demo linked above already does CSS-only! ;) - Kartik)

Participants

Chris Aldrich
Joseph Dickson
Chaitanya
Maxwell Joslyn
Kartik Prabhu
mJordan
Paulo Pinto
Peter Molnar
Hibs
Add yourself here… (see this for more details)

Notes

Joseph Dicksons notes from this session at https://www.linuxbookpro.com/hovercards/ This is an area of interest for me as I've tried to set up a hovercard before and failed. Early discussion during the session looks like I'm not alone :)

Kartik presents a CSS only hovercard example from his website. Alough the image doesn't display the hidden info works when hovered by the mouse pointer. This feature then displays links to all of Kyle Mahan's social media accounts via rel links. Although the example isn't accessible for screen readers and text based browsers the concept clear.

My thoughts: To make it accessible create an unordered list "menu" allowing users to tab through the site using anchors to the #ID tag a hrefs a "skip to" or past that part of the page just as any WordPress dynamic sidebar. https://developer.wordpress.org/reference/functions/dynamic_sidebar/

People would use h-cards if it was easier to implement and tag others. Although implementations often require Javscript it's worth mentioning that most browsers force JS by default and users have to turn it off manually within their settings. The issue of js;dr is not really about S being turned off, but more about what happens if JS fails to load (network issue, server down...) or if the JS fails to parse (someone missed a semi-colon in the code!)

Some users have extremely expansive hovercards that can get in the way of browsing and slow down your own website.

Oldschool CSS dropdown menu examples:

   - https://alistapart.com/article/dropdowns/
   - https://www.htmldog.com/articles/suckerfish/dropdowns/

For accessibility one would want ARIA attributes and may require JS to hide the data in the hovercard.

- they could be footnotes

Quotebacks example: https://chaitanya.page/categories/quotes Here's what the raw html of a quotebacks quote looks like:

Reduced time in the classroom could exacerbate the learning differences that already exist in schools across the country, Johns Hopkins education expert Jonathan Plucker says <footer> https://hub.jhu.edu/2020/06/09/school-closures-worsen-knowledge-gaps-in-public-school-classrooms/</footer>

Quotebacks without JS:

What if Libravatar API used for this?

What if Chrome's TextFragments be used for getting data somehow?

We'll have to look at some additional examples in the wild.

Soundcloud does hover comments as annotations or comments on audio files as an examples
Some of this functionality is an extension of the title attribute on tags like `<a>`

Proposal

Participants

Notes

See Also