2018/Baltimore/Building Blocks

From IndieWeb

The Building Blocks session is the second session of IndieWebCamp Baltimore 2018.



start presentation →


Domain Name

  • Get a domain name from a domain registrar
  • Choose a web host
  • Now you have a place to put things
    • your name, photo
    • bio, portfolio
    • blog posts, short microblog posts, photos
    • anything else you want!
  • Share your domain name with people
    • If you change your mind and want to move hosting, or want to switch from Wordpress to a different CMS, people still know where to find you since you gave them a domain name instead of a Twitter profile

michellejl.com vanderven.se/martijn

building block home page

Links to Other Profiles

  • Link to where people can find you elsewhere on the web
  • such as Twitter, Facebook, GitHub, Tumblr, Medium, etc
  • Now you can use your website to log in to things, like our community wiki
    • if you try to log in, it will ask for your domain name, then will give you ways to authenticate with other services like Twitter
  • makes your website machine-readable
building block rel-me

Posting Blog Posts and Notes

building block note

Syndication

  • You probably want other people to find your content
    • You probably don't want to completely stop using Twitter or Facebook, since that's where your friends are
    • Syndicating your content from your site to silos is the best of both worlds, you own your data and you can still reach your friends where they are
  • You can syndicate manually, by posting first on your site and then copying it to Twitter/FB
  • Include the links to your syndicated copies on your original post

tantek.com aaronpk.com

building blocks POSSE • posts-elsewhere

Backfeed

Once your content is syndicated to other platforms, the next step is to bring the responses on those platforms back to your site.

Backfeed is the process of bringing those responses back to your website. You can bring back the discussion from Twitter and Facebook back to your own website all in one place.

Thankfully I don't need to write special code to handle Facebook and Twitter, since someone else did it for me!

Bridgy

Turns silo responses into webmentions! If you can accept webmentions, then you can start collecting your silo responses.

building blocks backfeed

Webmention

  • webmentions enable your site to tell my site that you wrote a post that linked to me
  • Microformats enable my site to extract the text from your comment
  • This way, sites with completely different code bases can all work together, even static sites working with database-driven sites
  • How to add Webmention support to your site
    • Install a Wordpress plugin
    • Use a service like webmention.io
    • Use a CMS that already supports Webmention, like Known
  • You can display received webmentions, or just keep them for your own review in an admin interface
building block Webmention

Microformats

  • Microformats give other computers a way to know which parts of the page are your post, or profile info, etc
  • Microformats classes make a web page machine-readable without having to create a second copy of the data in some other format

Given a simple blog post like the below, you can add a few classes to make the page machine-readable. 

<article>
  <h2>Blog Post Name</h2>
  by <a href="/">Some Person</a>
  <img src="/images/featured.jpg">
  <div>Here is the blog post content</div>
</article>
building block Microformats

Microformats

  • Microformats give other computers a way to know which parts of the page are your post, or profile info, etc
  • Microformats classes make a web page machine-readable without having to create a second copy of the data in some other format

Given a simple blog post like the below, you can add a few classes to make the page machine-readable. 

<article class="h-entry">
  <h2 class="p-name">Blog Post Name</h2>
  by <a href="/" class="u-author h-card">Some Person</a>
  <img src="/images/featured.jpg" class="u-featured">
  <div class="e-content">Here is the blog post content</div>
</article>

The prefixes tell the parser where to get the value from.

building block Microformats

Microformats

That enables other computers to see the page as a nice clean data structure. 

{
    "type": ["h-entry"],
    "properties": {
        "author": [{
            "type": ["h-card"],
            "properties": {
                "name": ["Some Person"],
                "url": ["https://example.com/"]
            },
            "value": "https://example.com/"
        }],
        "name": ["Blog Post Name"],
        "featured": ["https://example.com/images/featured.jpg"],
        "content": [{
            "html": "Here is the blog post content",
            "value": "Here is the blog post content"
        }]
    }
}
building block Microformats

h-entry

A common Microformat you'll use is h-entry.

This represents a "post", any of the following kinds of posts will use h-entry:

The different kinds of posts are created by defining new properties on the h-entry.

building block h-entry

h-card

Another common Microformat you'll use is the h-card.

  • An h-card describes a person, place or business.
  • An h-card most often contains at least a name, url and photo.
  • An h-card can also contain additional information such as a bio, birthday

The simplest h-card is: 

<a class="h-card" href="/">Your Name</a>

You can add a photo easily as well: 

<a class="h-card" href="/"><img src="/photo.jpg"> Your Name</a>

More complicated h-cards:

building block h-card

Micropub

building block Micropub

Micropub Spec

Micropub is simple enough that writing clients and servers isn't too difficult. 

POST /micropub HTTP/1.1
Host: example.com
Content-type: application/x-www-form-urlencoded
Authorization: Bearer XXXXXXX

h=entry
&content=Hello+World

curl https://example.com/micropub -d h=entry -d "content=Hello World" -H "Authorization: Bearer XXXXXXX"
building block Micropub

Following

Following is a relatively underdeveloped part of the IndieWeb ecosystem, we still have a lot to do here.

A good start to an IndieWeb reader:

I can use these to follow peoples' websites directly, no third party service like Twitter needed.

  • Monocle - a backend to Together, implements the Microsub spec
  • Together is meant to work with other Microsub backends too
building blocks following • WebSub




Retrieved from "https://indieweb.org/wiki/index.php?title=2018/Baltimore/Building_Blocks&oldid=59747"