Social Web

Intercontinental Exchange

CSS in Depth, Manning Publications (2017)

What happened to

Why social networks?

  • Quick & easy signup
  • Better UI
  • Large number of users
  • Short-form content

our social networks

A long list of tweets complaining about twitter showing liked tweets

with social networks

  • Little control
  • Don’t own your data
  • Requires account on each network
  • Virtually no cross-compatability
  • Neglect of personal & corporate websites

TLDR: not a blog

Attempts to
Facebook/Twitter fail

  • Buzz
  • Ello
  • Diaspora
  • Ping
  • Mastodon

Another social network clone is not the answer


Grassroots movement

Formalized standards

W3C Specifications

Return to the
original vision
of the web


My first post on the indieweb

A reply to that post

My reply to the reply and the resulting conversation

Multiple pieces to the puzzle

  • Microformats
  • Webmentions
  • IndieAuth
  • Micropub
  • Syndication
  • ...

Adopt incrementally

IndieWeb wiki/documentation:

Get your
own site

One central location for your
broader online presence

browser address bar reading

Put all your content on your site

  • Articles
  • Notes
  • Replies
  • Likes
  • Reposts


Ensures markup is

Example microformat 2 markup

<header class="h-card">
  <a class="p-name u-url" href="">
    Keith J. Grant
  <img class="u-photo" src="/images/keithjgrant.jpg" alt="Photo of Keith" />
  <div class="bio-links">
    <p>Atlanta, GA<br>United States</p>
      <dd><a href="" rel="me">@keithjgrant</a></dd>
      <dd><a href="" rel="me">keithjgrant</a></dd>
      <dd><a href="">CSS in Depth</a></dd>

Microformat vocabularies

  • h-card
  • h-entry
  • h-event
  • h-adr
  • h-product
  • h-recipe
  • ...

Microformat properties

Describe parts of an “h-*” item

  • p-name
  • p-summary
  • p-author
  • p-category
  • p-geo
  • ...
  • e-content (“entry”)
  • u-url (refers to href)
  • u-email
  • dt-published (“date”)

h-card example

<header class="h-card">
  <a class="p-name u-url" href="">
    Keith J. Grant
  <img class="u-photo" src="/images/keithjgrant.jpg" alt="Photo of Keith" />

  <div class="bio-links">
    <p>Atlanta, GA<br>United States</p>
      <dd><a href="" rel="me">@keithjgrant</a></dd>
      <dd><a href="" rel="me">keithjgrant</a></dd>
      <dd><a href="">CSS in Depth</a></dd>

h-entry example

<div class="post-body__item h-entry">
  <div class="post-preview">
    <div class="post-preview__date metadata">
      <a class="u-url dt-published" href="">
        17 Mar 2017 13:22:38

    <div class="post-preview__content">
      <div class="content e-content show-embeds">
        <p>Developers somehow acquired the idea that CSS should be easy. Like, learn
        in a weekend easy.</p>
        <p>CSS isn’t like that. Nobody <em>in the world</em> knows all of CSS. You
        need to commit to learning it just as you do conventional programming.</p>

Don’t need to memorize them all


Tracking the conversation

Notify a page when you link to it

  • Simplification of older “pingback”
  • Send POST to a specified endpoint

W3C Recommendation Spec (2017)

Specify your webmention endpoint in <head>

<link rel="webmention" href="" />

Webmention process

  • Create source document that mentions the target
  • Find webmention endpoint for target
    (<link rel="webmention">)
  • Notify endpoint of source url & target url
  • Endpoint verifies source url

Reply, like, repost…

Specified by microformats in the source document

    <a href="" class="u-in-reply-to">
      a post on
  <div class="e-content">…</div>

<p>Liked <a href="" class="u-like-of">
  a post on

<p>Reposted <a href="" class="u-repost-of">
  a post on

Implementations service

screenshot of homepage

Useful for static sites

webmentions in action

replies, likes, and shares displayed for a post


Simplified version of old OpenID

OpenId → RelMeAuth → IndieAuth

rel="me" links in h-card…

<a href="" rel="me">@keithjgrant</a>
<a href="" rel="me">keithjgrant</a>

…rel="me" links in OAuth profile

Screenshot of my Twitter bio, with link back to my website

Two-way verification

OAuth login with my twitter account
authenticates me as owner of my website

Specify your auth endpoint in <head>

<link rel="authorization_endpoint" href="" />
<link rel="token_endpoint" href="" />

Authenticating via IndieAuth

IndieAuth login page for a web app

OAuth links during login process

OAuth app redirecting back to app's IndieAuth page

Successfully logged in to App


Open API standard for
to your site

  • Publish posts, comments, photos, etc.
  • Post to your site from a third-party client
  • Update/delete posts

W3C Recommendation Spec (2017)

1. Specify your micropub endpoint in <head>

<link rel="micropub" href="" />

2. Login to micropub client using IndieAuth

indieauth login screen

3. Post content

Quill micropub client

Some micropub servers

Some micropub clients

Omnibear demo

Open context menu on a web page with Omnibear's 'Reply to entry' option highlighted

Composing a reply post in the Omnibear popup window

Screenshot of the post published on my website

Inspecting the DOM of the published post, with u-in-reply-to microformat link highlighted


Post to your site first.

Syndicate to Twitter/Facebook/Instagram


Publish on your Own Site, Syndicate Elsewhere

Bridges your IndieWeb site with social media silos


(sends webmentions)
(monitors social network activity)

A note on my website

Markup for the note with empty link to bridgy highlighted

Entering url to my note into Telegraph app

Sending webmention to Bridgy from Telegraph

A note reposted to Twitter by Bridgy

Replies to my post on twitter

Twitter replies backfed to my site from Bridgy

IndieWeb Generations

The four conceptual 'generations' of the indieweb, from technically-minded development leaders up to non-technical users of social networks

Each Generation should be best at explaining IndieWeb to the next Generation

IndieWeb Generations Theory

  1. Highly technical; comfortable programming
  2. Comfortable with web; sees benefit of backfeed technology like Bridgy
  3. Comfortable with 3rd party hosts like Wordpress; can register own domain name
  4. Nontechnical; needs turnkey solution

It’s still for fairly technical people

…but can work in conjunction
with mainstream social media

If you don’t want to put in too much work:

If you want more control:

Build incrementally. Lots of open source libs!

  1. Use microformats (use a validator)
  2. Add webmention endpoint
  3. Syndicate/backfeed with Bridgy
  4. Setup Micropub endpoint
  5. Automate sending of webmentions
  6. Explore

W3C Social Web WG

  • Webmention
  • Micropub
  • WebSub (formerly PubSub/PubSubHubbub)
  • Activity Streams
  • ActivityPub
  • Social Web protocols

Off topic!

ICE logo Intercontinental Exchange

Now hiring: Sr. Web Developer (front-end)

  • JavaScript (ES6+)
  • React
  • Redux
  • Node
CSS in Depth book cover

CSS in Depth

ctwconntech17 — 40% off

CSS in Depth eBook giveaway

  1. Tweet with hashtag #CSSinDepth
    (1 winner chosen randomly)
  2. Send reply webmention to
    (2 winners - first webmentions received)

See you on the IndieWeb!