From IndieWeb
(Redirected from 2013/UK/demos)

Archive from etherpad, please clean up.

IndieWebCamp UK 2013 Demos


Selfdogfood Demos - Day 1

Jeremy Keith

  • Jeremy Keith - http://adactio.com
    • demonstrated his journal/CMS/article posting UI,
    • bookmarking javascript button in toolbar
      • Bookmarklet + URL API for adding links to linkblog
    • commentary about comments - what he wants to work on, receiving webmentions
      • Comments disabled by default, can be opened
      • can someone who was listening more carefully document comment visibility stuff? -bw
    • Interested in creating a system that allows people to reply through blog posts


  • Luis
    • posts on a single folder in dropbox
    • plain old markdown

Glenn Jones

  • Glenn Jones - http://glennjones.net
    • his blog used to be written in C#, then he used WordPress
    • he just put up a new blog on his site.
    • uses blog as a reference for himself
    • editing local files on his computer which syncs up to a server, which his site pulls from
    • flat files, not database

Amber Case

  • Caseorganic.com
    • used to allow editing of wiki based on if she follows you on twitter
    • demonstrated logging in via IndieAuth
    • posts photos via Skitch to Flickr, then has a cron job that PESOS them into her own site.

Sam Machin

  • Sammachin.com
    • hates phone numbers - /callme
    • wants to get rid of phone numbers and use his domain to have people call him sammachin.com/callme/ -> uses WebRTC to ring his phone
    • using WebRTC to phone
    • his website checks foursquare for which location/country to call a physical phone
    • phone number is really like an IP address. we don't really own phone numbers
    • transcribes voice mail to email

Jason Garber

  • Jason - sixtwothree.org
    • sketchnotes.sixtwothree.org - uses Jekyll and hosted on github pages
    • has created a simple new command line to generate a new post
      • demonstrates it
      • prompts him for information
      • What would like to post
      • What is the speaker's name
      • What is the speaker's site
    • commits and pushes it up to github
    • github regenerates the site
    • wants to take this system and make it work on his main site for normal blogging

Tom Atkins

  • Tom Atkins - knitatoms.net
    • wants to make tools that you don't have to be geeky to be able to use
    • Acrylamid - Python static site generaor
    • edits a post with markdown
    • runs a script to deploy it, rsyncs it up to his server
    • somehow his site didn't update it on the home page

Boris Smus

  • Boris - smus.com
    • blogging engine called Lightning
    • Python static site generator
    • has a drafts folder
    • whenever he changes his markdown, his site updates
    • multiple types of content on his site
    • has links, and posts
    • wants to get away from posting to Twitter and post on his own site instead
    • working on a GUI to post a URL, extract a title from the URL, hello world text, preview in browser

Mime Cuvalo

  • Mime Çuvalo - nightlight.ws
    • home-grown CMS called Hello World
    • has a bult in RSS reader
    • drop in images and video links
    • posts comments back and forth via salmon with identica
    • uses bookmarklets for actions - reblog a URL - pinterest-like-bookmarklet

Michal Stefanow

  • michalstefanow.com
    • cross-posting instagram to twitter, screenshot of G+ to facebook, etc
    • browser profiles
    • wants to build a dashboard to post from one place to all the different events he is promoting
    • posts in lots of places

Aaron Parecki

  • Aaron Parecki - aaronparecki.com
    • started with a static site generator - p3k in php
    • YAML header, post text
    • slowly evolved a posting UI on top of that
    • example of what a note looks like when its rendered
    • posting UI just generatees static files for him
    • shows bookmarklet to reply to Barnaby's post
    • goes to his posting interface
    • autofills his URL, id, tweet id
    • adds content, tag, customize slug
    • previews Twitter copy
    • shows reply post, with reply-context of Barnaby's post
    • and shows that comment shows up on Barnaby's post
    • shows Twitter version of conversation, copies are threaded there.
    • starting with a static site generator, was able to add UI on top, one thing at a time.
    • slowly evolving based on what he was doing and what was working and not working

Barnaby Walters

  • Barnaby Walters - waterpigs.co.uk
    • took a quick video of everyone in the room
    • posting by email to a "secret" address
    • puts content in body of email
    • clicks send
    • shows up on waterpigs.co.uk
    • under 3 minutes for posting a video to an indiewebsite.
    • can email a GPX file and will plot on a map

Amir Chaudhry

  • Amirchaudhry.com
    • interested in Internet of Things
    • Nynmote.org - software infrastructure for internet of things - a way to connect all the devices together
    • using DNS to connect devices
    • e.g. phone to backup.amirchaudhry.com

Kevin Marks

  • Kevin-marks.com
    • noterlive.com - uses for live tweeting
    • Fills in hashtag, twitter handle and name, and quote from a speaker
    • previews the post to twitter
    • also builds generated HTML with all the notes, can be used to paste into an HTML file and push to his site using git

Julien Genestoux

  • Julien ouvre-boite.com
    • how do I follow tantek from his site? find his atom feed and paste into a feed reader, this is too complex
    • SubToMe - uses browser features (local storage) to avoid copy/pasting URLs to feed readers

Alf Eaton

  • Alf Eaton - alf.hubmed.org
    • prefers PESOS
    • on his own site he has everything he's posted to delicious
    • wants to collect all the photos he's posted to Flickr
    • would like to work on easier way to consumer an archive

Pelle Wessman

  • Pelle Wessman voxpelli.com
    • been working more on how to follow people
    • working on a tool to index my social graph
    • relspider.herokuapp.com/api/lookup?url=http://voxpelli.com/&callback=http://requestb.in/
    • builds a Neo4j database of all the social graph connections
    • it is a replacement for Google's Social Graph API

Bjarni Einarsson

  • Bjarni Einarsson bre.klaki.net - running over pagekite connection
    • personal site is running over a pagekite connection hosted on a computer inhis dad's basement
    • project: mailpile.is
    • project: pagekite.net
      • has a webserver running on this lapotp, exposed via HTTP through an ssh tunnel

Brennan Novak

  • Brennan Novak - brennannovak.com
    • part of the mailpile team
    • built social igniter a couple years ago to post to his site
    • inline posting interface with checkboxes to POSSE to other sites
    • "Indie Webify Me" - a guide to getting you on the IndieWeb indiewebify.me
    • validator UIs right in the list in the guide!

Hack Day Demos - Day 2


Tantek demonstrated using webactions with Twitter-specific fallbacks on his site to retweet one of his notes from his site as the @indiewebcampuk account. https://twitter.com/t/status/376729793813037057


Barnaby visits a post on tantek's site, sees a "reply" button which jumps to his own domain and replies to his post. Demonstrated a seamless indieweb to indieweb reply flow. http://waterpigs.co.uk/notes/4RwG2q/


Did some UX brainstorming and design for where web actions could go:

  • Forking the conventions of the UI you’re syndication to adds extra cognitive load for users
  • Clone the UI you’re trying to recreate
  • Language difficulties — ambiguous verbs and nouns!
  • Different verbs for different content types e.g. no-one retweets an article
  • Could use referrer URL to pre-populate the action UI to the culture of that silo
  • Could do referrer handling dynamically in JS on the clientside


Talked about concept of weaving indieweb content directly into the twitter.com UI by using original post discovery algorithms to detect POSSE copies, load full content directly into twitter. This doesn’t break the flow of reading twitter, making a more pleasant experience for everyone.


Is using p3k on her site caseorganic.com. Demonstrates logging into her site.

  • goes to: http://caseorganic.com/notes
  • if logged in shows an inline text box to post a note.
  • Amber demonstrates posting a note, it shows up immediately on the /notes page.
  • Also gets POSSE'd to Twitter.
  • Notification shows up in IRC (due to IndieWeb reference).
  • Never has to visit twitter again (phew!), has it covered via p3k and IRC.
  • Don’t get a romanian domain name (.ro short domain)!
  • Short note posting UI links to “full” UI, which is far more complex, has ability to handle replies, RSVPs, original post discovery etc.


  • Iterating on UI to publish things to his static blog.
  • Menubar app on MacOS!
  • Really easy to post to Twitter with apps, but hard on indieweb, command lines etc.
  • He created a menubar app for ease of us.
  • Has option to create a link blog post.
  • Extracted the title from a link
  • Can enter body text in Markdown
  • get a local preview
  • can iterate
  • updated local preview
  • Twitter and G+ checkboxes in popup window will POSSE to those.
  • Demonstrated posting a link blog to IndieWebCamp.


(on twitter: @voxpelli)

  • Continuing on the theme of enhancing static blog setups.
  • Worked on how to receive and display webmentions.
  • Building an endpoint which returns a JSON representation of webmentions receieved by a URL, to enable * creation of a Disqus-like tool for displaying indieweb comment on static sites.



  • Set up a URL API for following someone — going to be the first consumer of <action do=follow>?
  • Got webmentions mainly set up, a few bugs to work out. Seamless replying to other indie content through his feedreading interface.
  • Total time to add Aaron to reader, comment on post within same UI: about 30 seconds.



  • Problem: too many websites that he manages
  • uses Google docs to track them all! (showed screenshot crops)
  • implemented a live panel admin dashboard
  • Lets him post common banners (or messages) to his multiple websites via a javascript embed.
  • Demonstrated a banner promoting Mailpile's IndieGogo campaign showing up in one of his Tumblrs, and one of his Blogger blogs.


  • Worked on a webmention implementation.
  • Via curl was able to get a webmention from Aaronpk?

clarification about reply vs comment

Tantek clarified reply vs comment — a reply is something you post on your site, we call them comments when they’re shown on other people’s sites.


Worked on indiewebify.me, a guide to building your indieweb identity. Today, implemented validation UIs for people to easily check whether or not their markup is shiny.

  • Built validation UIs for rel values and h-card data, working on h-entry validation.


Code demo When people started implementing webmentions, they started working on microformats parsing. They ran into a dependency in the microformats parsing library.

  • Aaron and Barnaby worked on eliminating the dependency (on a single function).
  • Didn't quite finish it, but there are some test cases. 11 pass, 7 fail in current reimplementation.
  • Goal/end result: single .php file for parsing microformats, drop-in microformats parser.

See Also