41°F

Aaron Parecki

  • Articles
  • Notes
  • Photos
  • Day 88: Checkins! #100DaysOfIndieWeb

    March 18, 2017

    I finally have checkins on my website!

    This has been on my todo list for years. I even started a prototype way back in 2013 before I built the first version of p3k. Today I dug up some sketches I had done last April/May, and for some reason felt like I could actually code this up today. It has helped that a lot of the discussion in IRC about checkins has started to solidify.

    Since I use the Microformats vocabulary for the internal storage of posts, I have to know what the Microformats markup of a checkin looks like. I decided that I liked the latest idea of a new "u-checkin" property with a value of an h-card describing the venue you're checking in to, so that's what it looks like in my storage file now.

    I started by working on the HTML and CSS for the post, making sure the checkin looked good in the permalink view as well as when it's viewed in a list of all the posts. I based some of the design off of Swarm's display of checkins.

    Here is a checkin on Swarm:

    Here's what my checkins look like on permalink pages.

    I went with a skinny map view for checkins, where my travel posts have a much taller map.

    This is the first kind of post that includes my face in the post. I think I'm going to migrate the rest of my post layouts to include my photo as well, but that's a different discussion.

    The venue information appears next to my face, I show the venue name hyperlinked to its own website, and I show the city name below. I also include the timestamp of my checkin, since that piece of information is pretty important for checkins. My normal posts only include the timestamp at the bottom. Next is the text I entered with the checkin, and a photo if one is included.

    You might also notice the "15 coins" at the bottom, where you would normally see "3 comments", etc. I added a new response type of "coins", and I plan on having a proxy service send me a webmention for each one of Swarm's coin notes as a comment on my post. In this screenshot you see the note that Swarm added to my checkin rendered as a comment.

    In the list view, everything is the same except I don't include the map.

    I created this checkin with a manual Micropub request to my website. My ultimate goal is to create a service like OwnYourGram for Instagram, but for Swarm checkins. The service will subscribe to the Swarm realtime API, and will receive POST requests whenever I check in. The service will convert the checkin to a Micropub request, and create the post at my site. It will then create URLs for each score Swarm adds to the post, and send a webmention to my site, causing my checkin to show the number of coins each received.

    In the mean time, I can at least post checkins manually now!

    Portland, Oregon
    #100daysofindieweb #checkins #p3k
    Sat, Mar 18, 2017 8:36pm -07:00
    2 likes 4 mentions
    • Eddie Hinkle
    • Björn Stierand

    Other Mentions

    • Aaron Parecki aaronparecki.com
      My 2017 Year in Review
      Thu, Jan 4, 2018 2:40pm -08:00
    • Aaron Parecki aaronparecki.com
      I'm Still Here!
      Fri, May 19, 2017 6:31pm +02:00
    • Aaron Parecki aaronparecki.com
      Day 89: OwnYourSwarm #100DaysOfIndieWeb
      Sun, Mar 19, 2017 4:07pm -07:00
    • 100 Days of IndieWeb aaronparecki.com/tag/100daysofindieweb
      Day 88: Checkins! #100DaysOfIndieWeb: aaronparecki.com/2017/03/18/14/…
      Sun, Mar 19, 2017 3:36am +00:00 (via brid-gy.appspot.com)
Posted in /articles using quill.p3k.io

Hi, I'm Aaron Parecki, Senior Security Architect at Okta, and co-founder of IndieWebCamp. I maintain oauth.net, write and consult about OAuth, and participate in the OAuth Working Group at the IETF. I also help people learn about video production and livestreaming and dabble in product design.

I've been tracking my location since 2008 and I wrote 100 songs in 100 days. I've spoken at conferences around the world about owning your data, OAuth, quantified self, and explained why R is a vowel. Read more.

  • Security Architect at Okta
  • IndieWebCamp Founder
  • OAuth WG Member

  • 🎥 YouTube Tutorials and Reviews
  • 🏠 We're building a triplex!
  • ⭐️ Life Stack
  • ⚙️ Home Automation
  • All
  • Articles
  • Bookmarks
  • Notes
  • Photos
  • Replies
  • Reviews
  • Trips
  • Videos
  • Contact
© 1999-2023 by Aaron Parecki. Powered by p3k. This site supports Webmention.
Except where otherwise noted, text content on this site is licensed under a Creative Commons Attribution 3.0 License.
IndieWebCamp Microformats Webmention W3C HTML5 Creative Commons
WeChat ID
aaronpk_tv