From IndieWeb

IndieWebCamp 2015 Demos July 12, 2015 4PM-ish

Brighton Start Demos

See 2015/Brighton/Demos.

Portland Start Demos

Logs start: http://indiewebcamp.com/irc/2015-07-11#t1436636783383


  • http://tantek.com
  • I demo'd my indie RSVP support, and aaronpk’s indie event support. And also my <style scoped> support for custom post styles.


  • http://buyfocal.anomalily.com
  • Lily is now demoing her site, she takes photos of everything she buys as part of a “buy focal” project
  • she uses Instagrator pro to PESOS Instagram posts to her site
  • problem with using Instagram as the client, they’re owned by Facebook, and their place/venue database is very bad
  • demos purchasing a coffee cup for 2¢ and taking a photo of it with Instagram and it automatically getting posted to her personal site
  • she can also show you a list of things by type e.g. all burritos she’s eaten
  • each post shows map of where purchase happened


  • http://jeena.net
  • everything is on his website and written by him
  • when he travels around the world he almost never has his real camera
  • but still wants to post photos on his website and not on facebook
  • uses Firefox on Android
  • when he logs into his site on his mobile device
  • he can choose file
  • and then choose camera option
  • he’s taking a photo of the main room @IndieWebCamp
  • types a description into his posting UI on his mobile device
  • logs into his site on the laptop
  • shows posting UI on laptop
  • just to show the UI on the screen for everyone to see
  • used to POSSE to Twitter and Facebook with his own code
  • but Facebook keeps changing their API so he gave up on that
  • and just uses Bridgy to POSSE to Facebook
  • POSSEing to Twitter includes the photo!
  • shows jeena.net/photos (!!)
  • awesome grid of thumbnails
  • [Loqi] @jeena #indiewebcamp live demo (https://jeena.net/photos/156) https://twitter.com/jeena/status/619928034179706880/photo/1 (twtr.*)
  • on hover on a thumbnail it shows the text description for the photo
  • result of his post: https://jeena.net/photos/156
  • and possed to twitter: https://twitter.com/jeena/status/619928034179706880
  • POSSE photo to Twitter shows an example of http://indiewebcamp.com/Twitter#POSSE_note_with_photos_to_Twitter


  • http://charlesreid1.com
  • redirects to a static IP
  • uses MediaWiki
  • you essentially get markdown text
  • (media wiki syntax)
  • lets you use media wiki templates
  • everywhere you drop in the template on another page, the template contents get inserted
  • the sidebar templates on wikipedia are templates (for example)
  • you can copy and paste wikipedia templates into your own wiki
  • lets you build off existing template work, and save time
  • demoing a booklist template
  • includes scans of written notes in a book


  • http://thetapestries.net
  • Next up is John!
  • demoing tapestry maker
  • writen in node
  • is a space for a community of people
  • demoing indiemetachat
  • indieweb focuses on the individual
  • spaces for communities compliment individual sites
  • not everyone wants a public profile
  • how do we have areas where we can have private discussions?
  • demoing a social tarot reading
  • a place for discussing tarot readings as a community
  • “Everybody I talk to is ready to be done with Facebook"
  • there is still a lot of work to make indieweb accessable to non technical people
  • “They talk about their time on Facebook like junk food. You do a lot of stuff and you don’t feel good afterwards.”
  • (so quotable!)
  • people just want to have a good time and enjoy themselves
  • (its true it doesn't take much to put together a fun online community)
  • adding audio to a community chat room
  • (plays high pace EDM from a chat channel)


  • http://gregorlove.com
  • gregorlove.com/notes/
  • posting notes to his site for about a year
  • POSSEing to Twitter
  • using Bridgy
  • shows recent post “Solution or go home” in reply to kylewm and how it appears on his site as well [1]



  • http://yourmom.io
  • people were tweeting about projects/software being so easy your mom could run it
  • at one HWC meetup she bought her domain
  • at the next HWC she got hosting and got WordPress setup
  • Jeena asks - what was it that made you come to Homebrew Website Club?
  • Jennifer came to HWC because she wanted to learn from people who already had websites
  • “There’s only one way to learn, and that’s to ask people who know and do stuff”
  • "all it takes is wanting to do it to make it happen"
  • the indieweb plugins have been really helpful


  • http://aaronparecki.com
  • using talky on a mobile device to show his Pebble watch
  • to show posting from his food app
  • has a coffee
  • pushes one button and it posts
  • literally an example of a one-button posting UI
  • his food variety is relatively low, so turns out most of the time its already on the list on his watch
  • it uses micropub to post to his website


  • http://bret.io
  • his 3rd indiewebcamp
  • he’s been focusing on static hosting
  • looking at this thing call IPFS
  • interplanetaryfilesystem
  • pi.bret.io:8080/ipfs/QmdY53gvcuKQgyRQbg1n9LJMBJvcdvpjdGHuMP53LTu3kF

Brighton Hack Day Demos

See 2015/Brighton/Demos.

Portland Hack Day Demos

Video: https://www.youtube.com/watch?v=H2awcInYgw4


  • http://jeena.net/
  • Video
  • implemented micropub on his site!
  • in the long run wants to make an indie reader where he can like and comment stuff
  • to do that he needed the first step to be supporting micropub on his site
  • Jeena shows code
  • shows Quill and indieauth signing in with his domain


  • http://jgraham909.com/
  • Video
  • setup his site just today! running on GoLang
  • setup his h-card
  • pushed the repo up on github
  • github.com/jgraham909/indigo


  • http://gibberish.com/
  • Video
  • github.com/misuba/UserColors
  • went from zero this morning to his first Known plugin
  • plugin for multi-user sites
  • site is theha.us
  • profile: theha.us/profile/misuba
  • shows custom per user colors


  • http://anomalily.net/
  • Video
  • redesign her entire website!
  • meant to say: now has a notes box in the right column of the home page
  • attempted to get Teacup working, but all of her coffees are posting as the date

Paul and Tyson


  • http://tantek.com/
  • Video
  • i tried to work on 3 things. I got 2 and some fraction done
  • the 1st thing is trying to converge comment markup so we can do it consistently (twtr.io/11ZZQoJL0Co)
  • worked it out with a group of us and has updated code on wiki page
  • under comments-presentation
  • each comment should use p-comment h-cite (assuming they are from some other site) since your copy of the comment is really a copy of the text from someone else's site
  • if you're consuming comments this is structure you can rely on (twtr.io/11ZZeVYT7JR)
  • second thing was scoped styles which worked only in firefox
  • ... looking at post in its permalink it covers the whole page (intentionally)
  • the second thing I showed was scoped styles, which I had before on my site (twtr.io/11ZZhSwneE8)
  • but now I got it working in chrome and safari as well as firefox despite them not supporting it (twtr.io/11ZZk4xzLbH)
  • ... opening in chrome or safari, this works equivalently on the other browsers
  • ... those changes do not put any extra work on to the publishing, but is entirely inside the software
  • ... will document later my techniques
  • ... third item is working on mobile version of site
  • the 3rd thing I wanted to do was getting my site looking good on mobile, so lets see if this works (twtr.io/11ZZu1x6HPC)
  • my first goal was to get my homepage looking good on mobile - not wrapping URLs badly (twtr.io/11ZZzxKmHPD)
  • ... text is pretty readable no matter what kind of post
  • ... only improvements left are to get photos to be full bleed (all the way to the edge of the device




  • http://chreekat.net/
  • Video
  • added support for h-entry to the forum he was working on
  • I started with a small discussion and came up with exchanges between people in markup (twtr.io/11Z_WuBHX5c)
  • h-entry for the comment, h-card and p-author dt- for dates and u- for photos (twtr.io/11Z_ZfhYNbo)
  • used glennjones.net/tools/microformats/ to check his microformats
  • microformats are now live: parsed example


  • http://bret.io/
  • Video
  • made a node.js module for parsing bearer tokens
  • with tests!
  • a micropub endpoint has to get a bearer token from a micropub client request (twtr.io/11Z_vhazKKV)
  • I made a node module for parsing bearer tokens that abstracts the complexities away (twtr.io/11Z_yHTCdQ0)


  • http://yourmom.io/
  • Video
  • fully deployed a microformats2 supporting WordPress theme
  • Jennifer still wants to fix things
  • new h-card
  • still needs fixes according to indiewebify.me



  • http://aaronparecki.com/
  • Video
  • then I worked on SWAT0 the tagging test http://indiewebcamp.com/SWAT0 (twtr.io/11ZatxzvZBU)
  • ben took a photo of me https://ben.thatmustbe.me/photo/2015/7/12/9/ and tagged me in a photo and my phone notified me (twtr.io/11Zaxn348fZ)
  • I got hat notification (twtr.io/11Zaz0kXv5b)
  • ben updating the photo was amy hitting the like button (twtr.io/11Zb7fcSAuw)
  • and these comments are now on ben's post, which notified me (twtr.io/11ZbBP2AqNx)
  • @aaronpk: now I can sign into woodwind and log in with twitter - wait, twitter is down (twtr.io/11ZbJnYEqaj)
  • fortunately indieauth means I don't have to use twitter, I can use last.fm (twtr.io/11ZbJP2xcGo)
  • @aaronpk: I cna post my own comment now in the reader and that posts on my site and ping ben's (twtr.io/11ZbQAUaC_8)
  • @aaronpk: and I got a notification that http://aaronparecki.com commented on my photo on ben's site (twtr.io/11ZbTb3v6A8)


  • http://kevinmarks.com/
  • Video
  • worked on indiecards
  • reworked it as a hovercard
  • designed to work in an iframe
  • he’s incorporated indiecards into noterlive.com
  • (aside: they’re not hovercards - hovercards are a very specific presentational effect in response to users *hovering* over something)
  • had to cache tantek.com
  • and thus caches cards in general now

Other Years