2014/Demos
IndieWebCamp 2014 Demos
New York Start Demos
transcribed from IRC logs
Tantek Çelik
- Shows notes, replies, POSSE and blogposts.
- post-to-post sequential navigation (in contrast with Twitter)
Jeremy Zilar
- shows POSSE
- backfeed from multiple POSSE copies using Bridgy
Bear
- showed bear.im.
- notes that webmention is broken (plans to fix that)
Sandro Hawke
http://www.w3.org/People/Sandro/
- give overview of CrossCloud
Andrei Sambra
- shows deui.rww.io for personal site
- RSVPed with Fcns.eu - was easier to put a rel=me on my blog than on my server deui.rww.io
- this is a data CMS written in PHP called LDPHP ( on github [1])
- hierarchy of files of data on his site e.g. deiu.rww.io/shared/mb
- cimba.co which is a Tweetdeck-like client that is a reader for the data that Andrei publishes on his own server
- identity is deiu.rww.io/profile/card
- logging in with his WebID into cimba.co. from that the app goes and discovers everyone he follows
- deui.rww.io/apps/cal/index.html
- "thus my server can also hope [sic] the app files, the HTML, CSS, JS instead of just cimba.co". "this way I can host my own apps on my own domain"
- a calendar he uses - on my own domain, (the UI is some calendar javascript found on github)
- moving an event, with browser traffic debug tab showing PUTs to his personal domain
- clicking on a permalink in cimba.co goes to the original on his own domain which displays the data as HTML
- cimba.co viewing posts from others also, e.g. Joe has presbrey.data.fm
David Shanske
- shows david.shanske.com running WordPress
- was working on in test mode, and debuted shortly after the indiewebcamp NYC in April
- footer of his posts, footer has icons to the POSSE copies by silo
- comments link shows existing comments - via other sites and webmention
- facepile of likes, on a particular post, UI to click through to respond via any POSSE copy, or webmention
- his reply context on individual replies and on replies in his composite stream uses a medium light gray background on the reply context
- github.com/dshanske with all the plugins for the stuff he demo'd and in-progress like getting location for a post!
Kartik Prabhu
- demonstrates kartikprabhu.com
- has notes working, can post replies too, only shows "reply to URL" - wants to expand that, also gets replies back from Twitter.
- not pro-comment form, only has a "send webmention link" form
- shows replies to his /article/indieweb-love-blog
- is using the python microformats parser mf2py, drove him to add backcompat microformats parsing
- has a facepile of mentions, reposts (retweets?), and likes (integrated across twitter favorites, google+ +1s, facebook likes). all of which are shown uniformly
- shows a "futured" post, that has published date in the future.
- "if I want to post a draft to edit, I put it in the future... tantek's idea...
- I know the URL… so I can send it to people to comment on. does not appear in stream/feeds.
- all the comments looking the same, on the marginalia article (https://kartikprabhu.com/article/marginalia),
- some comments using fragmentions -- briefly explains fragmentions
- paragraph level notes/comments
- paragraphs with comments have a (show) button, clicking the show button shows a sidebar with the comments on fragmentions in that paragraph
- webmention to the fragmention rather than just the permalink to the post, server then saves it and shows it as a normal reply on the post.
- all of the side comments appear below, even if you don't have js turned on. and this is where the in-reply-to to the fragmention works. (unlike in Medium where it requires JS to see any comments)
Portland Start Demos
Amber Case
- Sign in using indieauth
- Demoing posting from her site and syndicating to twitter
- Demo replies coming back to her site
- Showed posting a photo from instagram http://caseorganic.com/notes/2014/06/28/3/indiewebcamp
Ben Werd
- showing posting from his site
- showing known mobile web interface
- checking in from his mobile phone POSSEing to foursquare
- recorded audience saying "hello world", posting the sound recording to twitter and soundcloud
Ward Cunningham
Federated Wiki
- http://ward.fed.wiki.org/view/federated-wiki
- Showing federated wiki "recent farm changes"
- Showing activity happening on other wikis making changes to his wiki
- Has 4-5 server implementations running
- Completely open source
Johannes Ernst
IndieBox http://indieboxproject.org/blog/
- Showing live video feed of his home pool, running from the indie website of his pool
- Remote control pumps in the pool
- The pump publishes a list of events on its own site
- Indie Box OS
- make it easy as possible to run your own site
- showing apps installed on the indiebox sitting at the front of the room
Kyle
- Showed POSSE post discovery - getting feedback from twitter without including a link in the tweet to your site
Aaron Parecki
- Demoing the GPG IndieAuth endpoint
- https://indieauth.com/gpg
Shane Becker
iamshane.com
- https://github.com/homesteading/homesteading-article/issues/4
- Showing using Micropub apps posting to his own site
Eric Holscher
- readthedocs.org
- searchthedocs.org
Jon Pincus
Building community sites, where people want most of their content to be private.
Jason Champion
Paul Munday
New York Hack Day Demos
transcribed from IRC logs
People Focused Mobile Communication
tantek, mrflix
- Alex used the txt message link successfully to send a message - which showed up as an email (and green on Alex's phone). Apparently the first time you "txt" a new contact from iPhone, it sends as old school SMS or email instead of iMessage. When Tantek replied it showed up in Alex's Messages as a blue iMessage.
- Alex clicked the Facetime icon which succesfully started a Facetime call ring with Tantek's iPod in about 10 seconds the first time. Subsequently it took only about 3 seconds to initiate the call.
- Alex tapped the AIM icon which gave the Safari cannot load error (as expected for when you don't have the AIM app installed)
- Alex tapped the Skype icon it launched the Skype app, and then put up an alert saying "Placing your call / tantekc / (Cancel) (Voice Call)"
- When Alex tapped the (Voice Call) button it placed a Skype audio call, which rang Tantek's iPod in 14 seconds.
- JeremyZilar taps on the txt message icon to send Tantek a txt message "Hi" from his iPhone
- JeremyZilar clicked on the Facetime icon on his *laptop* to start a Facetime call - and Tantek's iPod rang accordingly.
- JeremyZilar clicked on the AIM icon on his laptop which opened up the Messages app (which he has set as his default) with the text "greetings+program" which when he pressed return it sent
- mrflix used tantek.com contact.html to call Tantek on Facetime and it worked!
Keplr.me
Jeremy Zilar
- Jeremy is demonstrating keplr.me - his son's bday announcement site
- his son sometimes asks him to txt mom, he likes to tweet too, so instead of Twitter, how about a tweeting on his own site?
- Jeremy made a simple WordPress Theme called "IndieWeb"
- shows install of WP theme,
- logged in view on keplr.me/blog, blog home page
- upload an image as the home page requests, next time you go back the image is there
- once you set things up, you have a simple form immediately - headline, text, and a related link URL .
- and then you hit post and it shows up on the home page
- wants to set it up to tweet from keplr.me to his twitter
- and that's a starter IndieWeb theme for achieving IndieMark level 1
Marginalia
Kartik Prabhu with Tantek and Chloe Weil
- marginalia post is LIVE! (https://kartikprabhu.com/article/marginalia)
- if there is marginalia on a paragraph then there's black comment icon after the paragraph.
- if you click it then it shows the marginalia in a sidebar for that paragraph and the comment icon turns green so you know which commet is being shown
- if you click another comment icon it hides the other comment and shows this one
- if there are multiple comments in the sidebar, it does scroll
- the javascript for this is on github (https://github.com/kartikprabhu/marginalia)
- for small screens, the marginalia comments appear inline indented and immediately below the paragraph that it is about
- the javascript puts the div in place and adds attributes. all the styling is done with responsive CSS.
- the inline vs. sidebar showing of marginalia is all through responsive CSS and live based on the size of the screen!
- the javascript is only finding all the comments by fragmention and toggling their display on or off
- also have footnotes but those are done by hand footnotes could also be author marginalia
- right now the footnotes are just HTML - no javascript, but could hook it up using the same display way of doing fragmentions
- also documented a photo of actual physical marginalia
- showed what marginalia post looked like on an iPod on the projector
Webmentions in Go
Sandro Hawke
- if I do a fetch on mentions it shows nothing, if I do a post of a webmention via curl on the command line
- it took a moment because it is verifying it synchronously
- now we can check the mentions - and it shows 1 mention recorded, source URL mentions target URL : true
- now can try a curl with a bad URL and show that it tries to validate the URL and says false
- still records it in the log as a failed webmention, you may want that or may want to drop them on the floor
- demonstrates a webmention across two other domains, validates and shows true
- started learning go a week a go, need to add it to github
POSSE music meta-data
Chloe Weil
- trying to POSSE music metadata, first by exporting it from iTunes, and keeping it in my own storage
- have all the metadata then on my local server and I have a drag & drop area where I can add MP3 files and it will read the ID3 tags
- what's most important to me are the tags I add
- e.g. like <1999, 2013SPR seasons etc. for when a song was important to me in my life
- I don't want anything locked into iTunes forever I want to maintain this data that I've added to for 15+ years on my own site etc
- I used bootstrap for this site but I don't really like it.
- iTunes meta-data export documented at iTunes
http://happynchill.in/
Happy Enchill
- f you go to http://happynchill.in/ it has an h-card and then I worked on social-aggregator.happynchill.in
- this is the foundation of the project I'm going to be working on. right now this does nothing but is a shell application that you can use for crosscloud applications.
- and I can log into the wiki with happynchill.in. IndieAuth options: email Personal, twitter, github, google
- uses Persona to sign in, goes to indiewebcamp.com/2014/Cambridge, goes to Guest_List, edit, copy and paste Attendee template. adds himself to RSVP!
- And with that Happy has graduated from Apprentice to IndieWeb Creator! and gets a IWC sticker
http://noakes.in/
Alex Noakes
- shows he's already logged into the wiki.
- edits the Cambridge RSVP page, moves his RSVP to the right spot
- shows noakes.in created with the hCard creator and got Node running on his server as well.
- and with that Alex has graduated from Apprentice to IndieWeb Creator! Alex gets an IndieWebCamp sticker
Portland Hack Day Demos
June 29, 2014 4PM-ish
Fix the wiki
- Crystal, Peat, Lillian, Reid
- CSS instead of tables - Used the Foundation CSS framework
- Responsive design works on mobile!
- Improved legibility of the fonts
- Development instance at http://github.com/peat/wiki
- needs to be tested with indieweb plugins still
- No more left hand column; moved to links at the top
- Next small event and next IWC listed in top right
- Cleanup of links and general typography
- added a favicon
- updated to the current logo
- After testing with content, we should add photos - The design accomodates whatever content is in the wiki. No change there.
- screenshot of the new pretty http://cl.ly/image/2R0z3S1C0b2X
Starting to track work to do here: 2014/wiki-redesign
gRegor + Amanda working on her blog
- Got the blog set up with basic uF! Looking good!
- http://battlestaramandica.amandamaclean.com
- Using Processwire content management framework, PHP/MySQL
Indie plugin Wordpress installer on Indiebox
Johannes Ernst: create a full Wordpress install, with several pre-activated indie web plugins, with a single command, on IndieBox running on VirtualBox. (plugins: web mention, semantic linkbacks, social.) Works the same on physical IndieBox. A Site JSON file describes the configuration, IndieBox does the rest (database provisioning, access control, web server configuration, software download etc.). Still requires manual connection to Facebook and Twitter because we can't script Facebook and Twitter authorizations.
Federated Wiki
- Ward Cunningham
- How do edits get joined back together? Inspired by lots of questions about how to merge changes and thinking about it for 3 years, he implemented it today!
- Icons indicate previous states of the wiki
- When mousing over a paragraph the corresponding edit icons light up
Faire
- Updating site in Markdown, deploy with Ruby
- "You know more about Ruby than I do." -Johannes
- Signed into the wiki. Youngest IndieAuth Sign in to date! Used beeminder to log in to indieauth.
h-card address book
- Shane Becker, h-card adders book for collecting contacts and using it as a storage system
for other features like POSSE PESSOS stuffs (post de-duplication maybe?)
- High level view contains name, website, email, phone number
- More detailed views will contain additional fields
- Strong focus on which fields are most important and setting the auto focus fields and such.
- First whale joke of the demos. OoooHHHHoooHHHoooooo
wolftune.com
- Learned a lot about the web framework he's using
- Moving away from blogger to his own blog.
wordyard.com
Got bridgy working!
Indie Reader
- Dr. Ben, Aaron, Emma
- Login using indieauth, following the ownyourgram workflow debug checker thing screenshot here
- Maintain a list of subscriptions on your own site using mf2, new u-feed attribute
- Ben logged in. Logged out, now Emma is logging in.
- issues signing in on someone else's computer * (no whale jokes)
- Aaron's dev copy, clicked "reply" in the reader and posted a reply which went to aaronparecki.com successfully.
- "Bookmark" and "Reply" options on each item.
- Code is up on github: https://github.com/benwerd/indiereader
Philip
Not a website, but a web interface for a "thing[2]."
DEJE is a distributed hosted JSON system, with a cool permission system that does not rely on central services (except as message routing). The immediate use for this is a massively democratic DNS registry, designed to provide plenty of room for experimentation within its own format, but also capable of forwarding to other alternative DNS's (and even resolving traditional ICANN). In this way, it's a meta-alt-DNS.
DEJE is capable of a lot more than storing DNS data, though. It's smart enough that you can play a game of chess, where the rules of chess are not built into either client, but the rules are built into the document content itself, and events like "rook to B6" can be validated against current board state and turn, and applied to the JSON data. One player could be on a very basic text mode client that knows nothing about chess, the other could be using a fancy OpenGL-based 3D client that only does chess. Both clients would be fully capable of enforcing the rules on each other, and the server would act as nothing more than a routing intermediary.
The protocol is, by choice, something that browsers can speak as easily as any command line client. Thus, browsers are first class citizens, but also not the only first class citizens. The demo was of a browser-based interface to the protocol, which allows for monitoring message broadcasts, constructing and publishing raw messages, and creating and publishing new events (changes to the document state). This interface has been maturing a bit since then on Github. [3]
Erin
- withknown.com dev instance
- Known did not have a good system for providing people with a lot of theme options
- Worked on a theme
- Cleaned up some of the interface for posting types and sign up
- Pretty soon they'll have a couple theme options for people who sign up.
Kyle
"Static Hosting on the Cheap"
- Easy to use and possibly anonymous/obscured identity for pseudonyms artists activists.
- Hook to push to nearlyfreespeech.net
- Creating a new markdown file for a post, save, git push, triggers a rebuild on the static site
- Possibly integrate with gitpub :)
Paul and Dean
- Indiewebified tumblr theme for the purpose of introduction to web publishing and indieweb sites. A good demonstration on how to "hack their way out of the box"
- rel-me links, posts marked up correctly
- Link format posts can function as replies. Webmentions sent manually.
- Since it's a tumblr theme, it automatically marks up all your previous posts
you get your own subdomain out of the box, but you can also use your own domain.
- Bridgy supports tumblr web mention sending and backfeeding data.
- https://gist.github.com/tallus/43e09af02cbad58534a4
beeminder.com
- Global callback URLs on quantified self data, to keep track of your data on your own site.
IndiePushups.
- Can be used to synchronize data back to their website?
using localstorage for email tokenization
Related to personas in some way… demo troubles. Someone add details here?
Daniel
Mockup of sharing the content you're viewing with friends in real time.
The web is a solitary activity. Lets you brows the web with your friends in realtime. Would be done through a tabbed interface and allow for sharing of movies and music listening. Would make browsing the web kind more of a shared experience.
Includes a text chat view.
When a new person joins the group…
You could touch through to information on someone else's screen (without disturbing them?)
You could rate and review other peoples web history. YouBrowser!
Aaron demoing on behalf of Tantek in NY
It would be way cooler if contacts were just on your homescreen and you can interact with them, instead of going into an app and then selecting a contact.
Tantek set up a page on his site that resembles iOs and lists his preferred contact methods in order.
Aaron saved the page as a bookmark on his homescreen, shows up as a photo of tantek.
Opened the bookmark from his homescreen, Facetimed Tantek, and then the iPod died shortly after.
Bret
- Micropub endpoint working for a static site.
- Automates the git workflow, pushes result to a site.
- Publishing a photo to instagram, ownyourgram.com will pull it back in realtime.
- Showed up on his site within a few seconds.
- Worked on refactoring and cleaning up code. Lots of work to do still, but the app is a good reference for anyone interested in this model.
- https://github.com/bcomnes/gitpub
- thanks http://ngoldman.me for help and future collaboration
Sponsors!
- You can help sponsor IWC using a prospectus form
- next indiewebcamp is after dConstruct in brighton
- another one is in cambridge right after cyborg camp at mit media lab
Other Years