2012/UK/Indie Anywhere

From IndieWeb

Indie Anywhere was a brainstorming session during IndieWebCampUK 2012.

Archived Session

Archived from:


Welcome to the IndieAnywhere EtherPad!

2012-253 The Bridge room / The Skiff

Participants:

  • Tantek - tantek.com (@t)
  • Barnaby - waterpigs.co.uk (@barnabywalters)

This is a session at indiewebcampUK covering the use cases and implementation of a possible indieweb version of twitter's @anywhere.

Per their description[1] Twitter's @anywhere consists of four things: ([1] https://dev.twitter.com/docs/anywhere/welcome )

  • "Follow Buttons" - this is handled by indieweb WebActions.
  • "Hovercards" - ...
  • "linkify Twitter usernames" - ...
  • "Connect to Twitter" - this is handled by IndieAuth

Focusing on the indieweb equivalent of 

  • Linkify usernames and hovercards.

Twitter says:  "need a registered client application" [1]

On the indieweb, ideally we shouldn't require any kind of registration to make this functionality work.

Linkifying

Twitter's @Anywhere provides a javascript that does "Auto-linkification of Twitter usernames".

In  the "Linkify Example", Twitter seems to only hyperlink the username portion, and not the "@" symbol.

This doesn't make sense, because:

  • it makes a smaller click/tap target
  • it implies the that @ is not part of the reference, but it is.

Twitter also linkifies all potential @-names on a page (or within a selector) which seems prone to false positives.

Instead it seems to make more sense to provide a function for deliberately linkifying chunks of specific text (either serverside, or clientside).

Simple Indieweb linkify answer is:

e.g. 

Next step for better IndieWeb UX:

  • @-names should link to the equivalent indieweb URLs, using user full name, and microformats.
    • e.g. @t -> <a class="h-card" href="http://tantek.com/">Tantek Γ‡elik</a>
    • e.g. via a static server-side lookup table (aaronparecki.com does this)
    • better: do discovery via Twitter profile retrieval on their "website" URL and use that
    • even better: cache the results of that discovery (on client and/or serverside)
    • even better: do rel-me verification on @-name vs. respective website
    • even better: persistently cache rel-me verified @-name + website pairs on your indieweb server

Hovercards

Twitter has:

Hovering on an @-name shows:

  • logo/avatar
  • full name
  • location from profile
  • "more..." link
  • follow button

Clicking "more..." link shows in addition:

  • website URL
  • bio
  • latest tweet
  • stats: tweets, following, followers

These are nearly all hCard related features which we can use microformats2 h-card to easily upgrade the above auto-linkify markup :

the hCard indicates that the link is a person with properties:

then we could create a javascript library to automatically provide "hovercard" like functionality purely based on that markup.

indiehovercard.js implementation outline:

  • for all hCards:
    • go get the representative hCard from the url
    • from that rep hCard, get:
      • logo/photo
      • updated full name
      • location (via adr / geo / or street-address/locality/region/country-name)
      • bio (via note)
      • latest post (p-name of most recent h-entry on that URL)
      • stats? punt on this for now. question why each of these stats is interesting at all (# of tweets? how is that useful. # following, what does that really mean in an indieweb scenario? # followers, is that even possible to determine in a fully distributed system?)
    • attach handlers to all .h-card elements to hover / first-tap show hovercard
    • mimic display / styling of Twitter hovercards (perhaps consider FB hovercards also)

Similarly on Facebook, their "hovercards" (when you hover over hyperlinked full names) shows you

  • cover photo
  • avatar/logo
  • full name
  • workplace
  • # of mutual friends that the reader and that link have in common
  • 5 hyperlinked avatars of those friends
  • mini-hovercard on those avatars that just popup and display their full name

Wordpress.com Blogs have Hovercards screenshot

  • Profile Photo
  • Nice border
  • Username
  • location
  • Bio
  • the Reply links are some kind of z-index bug
  • Note ability to turn hovercards off

indiehovercard.js could get mutual friends using XFN.


See Also