2018/Baltimore/Building Blocks

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

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
 * aaronpk.com tantek.com
 * 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

 * People often like to use their website to post blog posts and short notes, "microblog" updates
 * https://aaronparecki.com/notes
 * https://gregorlove.com/notes/
 * http://snippets.bellebcooper.com/
 * http://rhiaro.co.uk/notes
 * http://www.manton.org/category/micro
 * Note there is no title for these posts

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
 * You can automate the syndication using tools like Bridgy Publish or silo.pub, or a Wordpress plugin like SNAP
 * 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.


 * anomalily.net - comments from facebook, twitter
 * aaronpk.com - comments from facebook, instagram, micro.blog

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
 * https://martymcgui.re/2017/12/24/182250/ - a podcast episode shows likes and comments
 * https://aaronparecki.com/2018/01/16/12/ - a post with a reply from micro.blog

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.

Blog Post Name by Some Person  Here is the blog post content

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.

 Blog Post Name by Some Person  Here is the blog post content

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.

This represents a "post", any of the following kinds of posts will use :
 * article
 * note
 * photo
 * video
 * bookmark
 * checkin
 * like
 * repost

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.


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

The simplest h-card is:

Your Name

You can add a photo easily as well:

 Your Name

More complicated h-cards:
 * http://boffosocko.com
 * https://aaronparecki.com
 * https://vanderven.se/martijn/

building block h-card

Micropub

 * has no posting interface in his website
 * Instead, only uses external apps to make posts
 * Quill - web app
 * notes, photos, blog posts, events, favorites, bookmarks
 * https://quill.p3k.io
 * logging in - Quill asks your site how to log you in, where to send posts
 * live demo!
 * micro.blog iOS app
 * app store link
 * even though it was designed for Micro.blog, it uses Micropub so I can post to my website from the app directly
 * Omnibear - browser extension
 * Indigenous - iOS app
 * Together and Woodwind - readers
 * with Micropub support, so you can reply to things inline
 * OwnYourGram - posts your Instagram photos to your website via Micropub
 * https://ownyourgram.com
 * OwnYourSwarm - posts your Swarm checkins to your website
 * https://aaronparecki.com/checkins
 * It also includes backfeed from Swarm, including Swarm coins, and likes/comments from your friends

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"


 * https://www.w3.org/TR/micropub/
 * https://indieauth.spec.indieweb.org/

building block Micropub

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


 * WebSub - makes web pages and feeds realtime
 * When you post something, anyone who has subscribed to it will get the new content immediately
 * A good place to start for a following feature
 * https://www.w3.org/TR/websub/ - spec
 * https://websub.rocks - testing tool

A good start to an IndieWeb reader:
 * Together - https://together.tpxl.io
 * Woodwind - https://woodwind.xyz

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