A Whole New Dented Reality

Back in April, this blog celebrated 10 years of existence, and it’s been almost five years since the theme on this site changed. Yesterday I decided to just go ahead and flip the switch on something I’ve been working on here and there since late last year. It’s a complete new, very experimental theme that I call “Homeroom“.

There are some specific things driving what I was aiming for with Homeroom:

  1. First and foremost, a lot of the decisions are based around the intention that it would use Keyring and the Social Importers to pull in my content from all over the web. With that much data being collected and displayed here, I realized I couldn’t go exactly with a traditional blog layout, and had to get a bit creative with some types of data.
  2. It’s intentionally heavily integrated with Jetpack (although it works without it). Jetpack powers the comments, infinite scroll, sharing buttons and more. I’ve taken care to try to make that integration feel as native as possible (although I know there’s more to be done there).
  3. Homeroom started out as an _s-based theme, although it’s been pretty radically modified from there.
  4. I’m using a technique that I’ll call “post lookahead” when going through the loop to check the next post, and do some things like collapse sequential posts if they’re the sam type of thing.
  5. I wanted something with a bit of a timeline feel, since it’s now collecting some much data, and it’s all sequential; I wanted to show the relationship of different things along that sequence of time.

It’s not particularly beautiful because, well, I’m not a designer 🙂 In the near future I’ll be talking to some friends who are though, so hopefully I can get some advice on improving things there. I’ve been mainly focused on getting it working the way that I wanted it to. Here are some other bits that might be interesting:

  • Allows custom Header and Backgrounds via wp-admin
  • Options (currently defined in a file, because I haven’t built a UI) to control some preferences around stuff like hiding Foursquare check-ins until a set amount of time after they happened (to help avoid the creepers!).
  • Heavy use of Post Formats
  • Ability to hide Twitter replies, which you probably don’t want showing up on your site.
  • There’s the beginnings of a front-end post box (partially inspired by o2), although it doesn’t actually work yet
  • Handles Foursquare checkins differently. Rather than showing them all as individual posts, it “collects” them and shows a single, multi-point map at the end of each day.
  • Shows a map automatically on any post using the WordPress-recommended postmeta fields.
  • Using the new taxonomy introduced in Keyring Social Importers 1.4, allows you to easily filter your display based on where posts were imported from.
  • Includes a custom icon font from IcoMoon to display social icons indicating where things were imported from.
  • Search results use a Masonry-based layout so that you can quickly scan the results. Unfortunately something is broken with the search mechanism on this site right now, so that’s not working 🙁
  • Automatically lists out child-pages when you view a Page that has them, for example my Projects page.
  • Dynamic heading re-writes: format your posts for individual viewing, and the H1 etc tags are automatically “stepped down” on listing pages to maintain hierarchy
  • Has some fun mapping stuff for TripIt in particular, which draws out a “flight path” between airports. Check it it out in my TripIt section. Here’s a fun one.
  • Uses Photon to apply some effects to images in places
  • Borrows liberally from the styling of sites like Instapaper and Readability.

There’s still a lot of work to go, both on the theme itself and the importers that power a lot of the content. I wanted to get this online because I knew that’d motivate me to spend more time on it. I’m also hoping that other folks might be interested and/or have some ideas on ways to improve the theme. I haven’t got all of my content imported yet (that takes a while 🙂 ), but you’ll see more and more things fill in over the coming week hopefully.

If you’ve got any ideas for improvements, I’d love to hear them down in the comments!

TimesOpen Hack Day/Readtrack

On Saturday, I attended the 2012 New Times/TimesOpen Hack Day. It was a long day, but I had a lot of fun. I sat in on an intro session to Arduino which was pretty cool, and also a session on the EchoNest API, which I ended up using in my project. You can find out all about my project on the Readtrack project page.

It’s a bookmarklet-powered little app that analyzes the page you’re looking at (using the AlchemyAPI) and then tries to find related music (using the EchoNest API) which it then plays back to you in your browser (using rdio). I got a “runner up”/honorable mention prize 🙂

One of the most visually-polished projects was “Story Arc”, which showed a visual representation of the frequency of mentions of keywords over the NYT archives. Probably the most fun one was a set of drivers for a DDR pad, hooked up to commands for things like deploying code!

Where is Your Digital Hub/Home?

I’ve been using WordPress to power my own website for a while now, and working with it in some way or another for even longer. Over the years, I’ve developed the belief that it’s a pretty perfect platform for people to build their own “digital home on the web”, considering the range of plugins and themes available, the flexibility of the publishing options it offers, and the fact that it’s completely open source, so you can do whatever you want with it.

That last bit is important in more ways than you might immediately think. Apart from just being able to write my own plugins or tweak my themes, this also means that I own my own data. I think in this MySpace/Facebook generation, people are all too loose with the data trails they create — giving up ownership of their digital self at the drop of a hat. In case you didn’t realize, when you use something like Facebook, it is not the product, you and your data are the product.


Moving Jetpack Sharing Buttons

I’m working on a new WordPress theme (for this site, and it’ll be released for download once complete). The theme is deeply integrated with Jetpack, and one of the things I wanted to do was have the Jetpack Sharing buttons appear in a location other than the very end of the content. Normally they are applied as a filter on the_content, so they just appear right at the end. I wanted to relocate them into a different location, and it turns out that’s really easy to do with the power of jQuery.

jQuery( document ).ready( function( $ ) {
	// Relocate Jetpack sharing buttons down into the comments form
	jQuery( '#sharing' ).html( jQuery( '.sharedaddy' ).detach() );
} );

The #sharing selector is just the DOM location where I want to move the buttons to, and the .sharedaddy one is the container that Jetpack places its buttons in normally. We just detach it from the normal position and then dump it into the new location exactly as it was.

Welcome to the new server

I’ve finally gotten around to moving this site (along with all my other random sites) onto a single server. It’s all now hosted at Media Temple, on a 512MB (dv). We’ll see how that goes. I’ve got a bunch of things to write up once the move is complete, but if you’re seeing this then it looks like we’re most of the way there.

There’s definitely some more tuning and tweaking to happen, but at least I have my memory usage below 100% 🙂

WordPress Authentication Framework: Keyring

Keyring: An authentication framework for your plugins

Quite a while ago (like, in at least 2009), I started thinking about regaining control of all the content I was producing online. I was posting photos to Flickr, saving bookmarks to Delicious. I started Tweeting. I was checking in. All fun and games, and all of those services offer great tools for interacting with them (let’s face it, tools that are much better than WordPress’, because they are focussed on one thing). So I figured, why not write importers for these services and pull my content back over to my WordPress. And keep doing it periodically, so that I could keep using those tools. I want WordPress to be my “home on the web”, my digital hub, but I want to use these neat tools with their fancy apps and what-have-you.

Very quickly, I realized that if I was going to do anything useful on most web services, I’d need to be able to authenticate with them. No biggie, right? I know my username and password… Oh. Right. OAuth. Turns out that most web services use OAuth (or something similar) to authenticate, and it turns out that that’s actually a bit of a bear to implement, when all you want to do is write a simple little Twitter importer. And then again for a Foursquare importer. And a Flickr importer.

What I needed was a shared, generic authentication framework that would do all the heavy lifting for me. I would tell it I wanted a connection to specific service, and if it didn’t have one, it’d walk the user through the process of getting one. It’d give me a standardized format of authentication credentials and abstract out all the complexity of making authenticated requests against those services. Then it would make me a coffee*. What I needed, was Keyring.

Announcing: SidewalkScribbl.es

I’ve launched a new website that you might like to check out: SidewalkScribbl.es

It feels like every time I walk around in San Francisco (and other places), I see all this cool artwork, quotes, stencils etc on the sidewalk that I’m sure a lot of people are missing or not appreciating. SidewalkScribbl.es will be a place to share those things. The site will most likely get a facelift to make things look better, but in the meantime I’m just getting started with some of the things I’ve already collected from around the place.

Keep an eye out for another *Scribbl.es site soon 😉