Tantek Çelik

Independent technologist, writer, teacher

  1. IndieWebCampUK 2014 Hack Day Demos: HTTPS, #webactions, new & improved #indieweb sites

    One weekend ago, 18 IndieWebCampUK participants (including 2 remote) showed 25 demos in just under 75 minutes of what they designed and built that weekend in 19 different interoperable projects. Every single demo exemplified an indieweb community member scratching their own personal site itch(es), helping each other do so, and together advancing the state of the indieweb. We can all say:

    I'm building Indie Web Camp.

    During the demos I took realtime notes in IRC, with some help from Barnaby Walters. Archived on the IndieWebCamp wiki, here's a summary of what each of us got working.

    Glenn Jones

    Glenn Jones built improvements to Transmat. (IRC notes)

    He built a map view that shows the venues nearest to his current location (via GeoLocation API).

    He also found an open source HTML5 JS open source pedometer and repurposed it into Transmat so that when running on his Android as a web app, it can detect when he's walking, and only do GPS lookups when he's walking, so it saves battery.

    Now he has an HTML5 JS app that can auto-checkin for him while he's walking.

    Barnaby and Pelle

    Barnaby WaltersPelle Wessman Barnaby Walters and Pelle Wessman built cross-site reply webactions that work purely via their websites - no browser extension needed! This is the first time this has been done. (IRC notes)

    Barnaby has setup registerProtocolHandler on Taproot to register a handler for the "web+indie:" (since updated to "web+action:") protocol when he loads a particular page on his website so that his website is registered to handle webactions via the <indie-action> tag.

    Barnaby demonstrates loading the page that calls registerProtocolHandler. The browser asks to confirm that he wants waterpigs.co.uk to handle "web+indie" URLs.

    Then Barnaby goes to Pelle's website home page where he has a list of posts that he's written, now with "Reply", "Like", and "Tip" webactions next to each post, each webaction represented and wrapped by <indie-action> tags in the markup.

    Pelle's site also has a web component ([https://github.com/voxpelli/indie-action-component open sourced on github]) to handle his <indie-action> tags, which creates an iframe that uses that same protocol handler using a Promise, which connects the iframe to calling the handler that Taproot registered.

    Thus without anything installed in the browser, Barnaby can go to Pelle's site, click the "Reply" button next to a post which automatically goes to Barnaby's site's Taproot UI to post a reply!

    Barnaby Walters

    Barnaby Walters also built a map-view post aggregator that shows icons for people at the locations embedded in their recent posts. (IRC notes)

    The map-view aggregator is at a self-standing demo URL for now, but Barnaby plans to include this view as another column type in Shrewdness, so you can have a map view of recent posts from people you're following.

    Grant Richmond

    Grant Richmond got a fancy new domain (grant.codes) and setup Glenn Jones's Transmat on it - which makes it the second installation of Transmat! (IRC notes)

    Grant also built a contact page: grant.codes/contact that has links for various methods of communication:

    All of the links are text links for now, no icons yet.

    Grant has implemented a people focused communication UI on his site!

    Jeremy Keith

    Jeremy Keith added https on adactio.com, and implemented <indie-action> tag webactions. (IRC notes)

    adactio https

    Jeremy took his site adactio.com from no https support to https Level 4. All adactio.com URLs redirect to https. However subdomains (e.g. austin.adactio.com) are still http.

    adactio webactions

    Jeremy's also implemented the new <indie-action> tag for webactions around his existing Tweet action links, both on his post permalinks, and on his posts in-stream (e.g. on his home page or when paginated).

    Shane Hudson

    Shane Hudson went from no SSL and no comments yesterday to https level 5! He also imported the contents of all his old comments from his WordPress blog to his Craft install (the CMS he's dogfooding, contributing plugins to, selfdogfooding). (IRC notes)

    He was able to get SSL setup on his site with an A rating, and forward secrecy, and is thus https level 5.

    Shane also wrote a script to do the import of comments from WordPress to Craft. It's "a bit crude, dealing with XML to CSV a few times".

    Nat Welch

    Nat Welch (AKA icco on IRC) got his blog running (his own software) in Go (language) hosted on AppEngine with SSL, achieving https level 4! (IRC notes)

    AppEngine does SSL for free if you're ok with SNI.

    So now Nat has SSL Labs rating A- on writing.natwelch.com! And also automatic redirect works from http to https. Thus he has also achieved https Level 4!

    Right now he's using AppEngine default auth, using his Google account. Eventually he wants to use indieauth to auth into his site.

    Tim Retout

    Tim Retout got pump.io running on his site and added support to it for POSSEing to Twitter. (IRC notes)

    His goal is to add all the indieweb feature support too like webmentions, microformats etc. He has to run off to catch a train.

    He is also too humble, as he helped numerous people in person at the camp get on SSL, https level 4 or 5 at that. A round of applause for Tim!

    Tom Morris

    Tom Morris added https to his site, made it responsive, and setup mf2py as a service. (IRC notes)

    responsive tommorris.org

    Tom showed his current site tommorris.org with different window sizes. His CSS is now "less sucky" and he has made his site more responsive on mobile / small display etc.

    mf2py as a service

    Tom also got the Python microformats2 parser (mf2py) running as a service that you can submit your URLs to and get back pretty-printed JSON.

    tommorris https

    Tom got his main site tommorris.org up to https Level 4 with an A- rating, but has not yet done so with *.tommorris.org (e.g. wiki.tommorris.org).

    During the next demo, Tom got his SSL Labs rating from A- to A with some help from Aral. And during the demo after that took his rating up to A+ thanks to this blog post.

    Kevin Beynon

    Kevin Beynon got IndieAuth login to his own site working! (IRC notes)

    Kevin started by showing us his site home page kevinbeynon.com using a tablet. We projected it by holding up to the Talky HD camera.

    He pointed out that there is no admin link on the home page then went to his "secret" URL at /admin/ which has an IndieAuth login screen. He entered his own URL, and chose to RelMeAuth authenticate using Twitter which redirected to it and back and came back with the message "Log-in Successful".

    Kevin went to his home page again, and showed that it now has visible links to "admin" and "log out". Next he plans to bring his post creating and editing interface into his home page front end, so that he can do inline editing and post notes from his home page.

    Joschi Kuphal

    Joschi Kuphal got his site's https support to SSL rating A+, fixed his webmention implementation, and implemented webactions on permalinks. (IRC notes)

    jkphl https A+

    Joschi noted that his site was running with SSL before but had some flaws. He worked on it and improved his site's rating from F to A+.

    jkphl webmentions fixed

    He also fixed some flaws with his webmention implementation thanks to feedback from Ryan Barrett online.

    jkphl permalinks webactions

    Third, Joschi implemented webactions on permalinks, in particular he added <indie-action> markup around his default Twitter, G+, Facebook "share" links. He then demonstrated his site working with Barnaby Walters's Web Action Hero Toolkit browser extension.

    Chris Asteriou

    Chris Asteriou is fairly new to the IndieWeb and started with going through IndieMark, adding h-entry and h-card markup, and a notes section to his site.(IRC notes)

    digitalbliss microformats

    Chris showed digitalbliss.uk.com, noted that he added h-entry on his page with entries. He clicked the "Play" link at top to show this. And then he marked up the info at bottom of his home page with h-card.

    digitalbliss notes

    Chris added a notes section and used the verification tools on indiewebify.me to check it and verify that he reached IndieMark Level 2.

    Tantek

    Tantek Çelik switched his permalink webactions from <action> tags to <indie-action> tags and researched the UX of webactions on posts in a stream (e.g. a home page).

    tantek indie-action

    Based on the webactions discussion session in the first day with Tantek, Jeremy, and Pelle, they concluded that the <indie-action> tag was more appropriate than the <action> tag.

    Tantek initially publicly proposed the <action> tag for consideration in a session on Web Actions at Open Source Bridge 2012, and then later implemented them at last year's IndieWebcampUK 2013 which were then demonstrated working with Barnaby Walters's browser extension.

    Changing from <action> to <indie-action> at a minimum better fits with the web component model. Jeremy Keith pointed out that an <indie-action> tag in particular would be a good example of a web component, worthy as a case-study for web components.

    Tantek updated his permalink webactions to use <indie-action> tags and Barnaby updated his browser extension to support them as well.

    in-stream webactions

    Tantek analyzed the UI of various silos, in particular Instagram and Twitter.

    Instagram has a very minimal simple webaction UI, with just "Like", "Comment", and "..." (more) buttons, the first two with both icon and text labels, which makes sense since their primary content is large (relative to the UI) images/video (visual media). Instagram's webactions are identical on photos viewed on their own screen, and when in a stream of media. Deliberately designed consistency.

    Twitter on the other hand is horribly inconsistent between different views of tweets, and even different streams, sometimes their webactions are:

    • on the right with text labels
    • on the left with text labels
    • on the left without text labels

    Their trend seems to be icon only, likely because the text label distracts from the tweet text content around it, especially in a stream of tweets that are primarily (nearly all) just text.

    Tantek walked through comparisons of Twitter's different webactions button icon/text usage/placements with Aral, who came to the same conclusions from the data.

    It may be ok to use both icon and text labels on note/post permalink pages, as there is more distinction between the (single) content area, and the footer of webactions.

    However, the conclusions is that in-stream webactions should use just icons (clear ones at that) when among posts that are primarily, mostly, or perhaps even often just text.

    Next Tantek is working on implementing icon-only webactions on his home page posts stream. He made some progress but realized it will require him to rework some storage code first.

    Aral Balkan

    Aral Balkan upgraded his site's https support to SSL rating A+ and https Level 5, and his how-to blog post about it! (IRC notes)

    Aral already supported https on his site aralbalkan.com beforehand. On IndieWebCampUK hack day he added support for forward secrecy, which raised its SSL rating from A- to A+ and thus he achieved https Level 5!

    Apparently it took him only 2 lines of code to implement that change on nginx, and noted that it's a bit harder on Apache.

    After his demo, Aral also updated his blog post about SSL setup with nginx with what he learned and how to get to SSL rating A+.

    Rosa Fox

    Rosa Fox created a UI on her site for CRUD posting of projects. (IRC notes)

    Rosa wanted to make her own CMS with support for posting images and tags. She demonstrated her local dev install of her new CMS with the following new features she built at Hack Day:

    • a UI for creating a new project
    • CRUD posting interface for projects
    • using Postgres to store data

    Aaron Parecki

    Aaron Parecki participated remotely, added support for posting bookmarks to his site, and added bookmarks posting via micropub to his Quill app! (IRC notes)

    Aaron has been publishing bookmarks to another place for a long time in a WordPress install at aaron.pk/bookmarks and he wanted to integrate them into his main site aaronparecki.com.

    Once Aaron got the bookmark post type implemented in his publishing software p3k and deployed to his site, he did a mass import from the aaron.pk/bookmarks WordPress XML export.

    That was the last thing aaronpk was using WordPress for, so he's no longer using WordPress to publish any of his own content.

    Now all of Aaron's bookmarks are at aaronparecki.com/bookmarks all marked up with microformats. Each bookmark is an h-entry, and embedded inside is an h-cite of the bookmark itself.

    This also means you can comment, bookmark, and like his bookmarks themselves!

    During later demos, Aaron also updated his Quill app with a bookmark posting interface, as well as a bookmarklet so you can quickly open the Quill UI to make a bookmark.

    Kevin Marks

    Kevin Marks built a feed coverter that takes legacy RSS/Atom feeds and produces modern readable and usable h-entry page, including such niceties as inline playable audio elements in converted podcasts. (IRC notes)

    Kevin noticed that people are building h-feed readers, so he built a tool that takes legacy RSS Atom feeds and unmunges them and produces nice clean h-entry feeds.

    The converter is at feed.unmung.com/. Unmung.com is a URL he bought ages ago, and set it up on Google AppEngine.

    E.g. if you put in xkcd.com/rss.xml into it, it generates a nice readable HTML page with h-entry, which you can then subscribe to in an indie reader like Barnaby's Shrewdness.

    Kevin demonstrated using unmung to convert a podcast feed feeds.wnyc.org/onthemedia into an h-feed with embedded playable HTML5 <audio> elements, providing an actual useful interface, much better than the original feed.

    Kevin made the point that no one wants to parse RSS or Atom any more. Now by parsing the microformats JSON representation, you can get any existing RSS or Atom etc.

    You can now subscribe to iTunes podcasts etc. in your indieweb reader!

    Robin Taylor

    Robin Taylor added support for https (including forward secrecy, getting an SSL "A" rating) to his site robintaylor.uk and automatic redirects from http to https, achieving https Level 5! (IRC notes)

    UK Homebrew Website Clubs

    As we were wrapping up, Tom Morris asked openly if anyone would be interested in coming to a Homebrew Website Club in London. Jeremy Keith similarly asked the group for interest in a Homebrew Website Club Brighton.

    Both had quite a bit of interest, so we can expect to start seeing more Homebrew Website Club meetups in more locations!

    See also

    Join Us At The Next IndieWebCamp In Cambridge

    IndieWebCamp Cambridge is next month on the East Coast.

    Join us. Share ideas. Come work on your personal web site. Help grow and evolve the independent web. Be the change you want to see in the world wide web.

    "The people I met at @indiewebcamp are the A-Team of the Internet. Give them some tape and an oxy-acetalyne torch and they'll fix the web."
  2. #xoxofest @gruber: Never consider CPM advertising. It does not work. Never sell your blog [personal domain]. #indieweb

  3. @timoni he said customers. I say no, Facebook users are not customers. FB advertisers = customers; FB users = product.

  4. Happy 8-bit day 2014! #8bitday

    8-bit day is the 256th day of the year. This year (and most years) that happens to be Gregorian September 13th. Five years ago I proposed making today an (un)official holiday in honor of all things 8-bit: art, music, video, games, and sure programmers too.

    The Math

    If you start the year with day 0, in the year 2014, 2014-09-13 (or 2014-256) is day number 255.

    • 255 decimal = FF hex
    • FF hex = 11111111 binary
    • 11111111 binary = 8 bits.

    Enjoy some 8-bit stuff

    Music

    Videos

    See Also

    Related

    Previously

    Previously I kept this on my wiki, which is unfortunately still on pbworks.com, so starting this year, I'm retaking that content and blogging it here on my site, until I've implemented my own wiki pages. I'll write a new post once a year, like I have in past years.

    Post your favorite 8-bit stuff

    Take a moment today to post and celebrate the 8-bit things that you've found and enjoy, and hashtag it #8bitday (e.g. on your own site, Twitter, Instagram, etc.)

  5. Kevin Kelly @xoxo: Facebook will be "first billion customer company". FB users are not customers. FB advertisers are.

  6. Switching <action> to <indie-action> for #webactions per @adactio suggestion and web components convention. #indieweb

  7. was just 800 short of today's #trackattack workout: 800 warmup, 400 800 1200 1600 1200 800 400, abs I completed: 800 warmup, 400 800 1200 800 1200 800 400, abs http://instagram.com/p/scpM-SA9UJ I fell behind during the first few sprints, and ran 800 instead of the 1600 peak of the pyramid so I could restart with everyone on the second 1200, and finish the remaining runs soon. Did the entire workout except 800 instead of 1600. So close. Almost six complete #trackattack workouts in a row but not quite. And won't be around for the next two. Five in a row is my personal best to beat. http://instagram.com/p/scmXK3A1Wu Ran another 1.75km after walking to coffee to round out today's distance at just over 10km (Nike+ said I hit 10.0km at exactly 1:00:00). I'm back for track on 2014-266 (Gregorian September 23rd), although it appears Kezar Stadium may be "closed for renovation" starting the day before that til early 2015 per this event: https://www.google.com/calendar/event?eid=XzY1MWppY2E2NjEzNDhiYTY2OHBqZ2I5azZkMjM4YjlwNzRyM2ViYTU4cDJrYWRxNThncTM4aGk1NmMgOTVsdTZ2Zm9jM2VydThqcjg3NmV0YXZvY29AZw&ctz=America/Los_Angeles in this calendar: https://www.google.com/calendar/embed?src=95lu6vfoc3eru8jr876etavoco%40group.calendar.google.com&ctz=America/Los_Angeles Found on this Yelp post: http://www.yelp.com/topic/san-francisco-kezar-stadium-closings-schedule-online I'm hoping #NPSF #trackattack has found a substitute track by then! Previously: tantek.com/2014/238/t3/tough-trackattack-relay-did-all