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.

(more…)

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.
(more…)

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 ;)

Jetpack

For the past few months, my team at Automattic (Team Social FTW!) has been working on a super-secret project. Today, almost perfectly synchronized with the NASA space shuttle landing (total fluke, but awesome regardless) we launched Jetpack!

Jetpack is a new plugin that delivers a bunch of popular features from WordPress.com (the hosted site, which Automattic runs) to self-hosted installs of WordPress (such as the one that runs Dented Reality). Once you install Jetpack, you get some of the cooler things available on WordPress.com, automatically enabled on your own WordPress site. The modules you get today are just the beginning though, there are a lot more planned for future releases. We’re going to be targeting some of the biggest features that are easier for us to do on our massive grid/cloud infrastructure, but harder for folks to do on their own shared-hosting accounts.

We also managed to partner with a bunch of leading web hosts, so if you’re doing a one-click install on BluehostDreamHostGo DaddyHostGatorMedia Temple, or Network Solutions, you’ll get Jetpack as part of your install. This is huge for people installing their own WordPress.

This has been the coolest thing I’ve worked on at Automattic so far, and it’s been awesome to be involved in a project that has seen so many contributions internally (over 40 people were involved in everything from UX to design to internationalization to testing and debugging) and so many iterations since its inception. I’m really proud of what we’ve created, and hope that it sets a new bar for the design of WordPress plugins (I really think Jetpack is beautiful, amazing work Joen, Hugo and MT!).

So – check out Jetpack if you’re running WordPress on your own server, and let us know what you think!

Which features would you most like to see in Jetpack? Let me know in the comments and I’ll see what I can do ;)

PS: This post proudly proof-read by After The Deadline, as delivered via Jetpack ;)

New Project: ListML

If you’re anything like me, you write a lot of lists. I use lists for pretty much everything — note taking, planning my day, managing projects, shopping, organization, etc etc etc. I have lists of lists. It’s a bit out of control. Over the years, I’ve coalesced on a simple, basic format, where I write things using indented (tabbed) lists of plain text (in TextMate). I kept finding myself converting some of these lists to HTML, so I’ve written something up that will take a plain text list and reformat it as HTML, given a simple set of formatting rules.

That project is available for download now, under the name ListML. Check it out, I use it all the time, so will probably continue developing it. At the moment it’s just a simple script that you drop into a directory, then drop other TXT files in there to view them as HTML. We’ll see where it ends up. If you’ve got any suggestions or find any bugs, feel free to post them as a comment here and I’ll fix things up. I already have some ideas on new features:

  • Ability to load external files (from URL)
  • List files in the current directory if none specified
  • Cut out the parsing engine properly to make it more portable
  • Make the HTML view (optionally) into a lightweight editor as well
  • Quick UI for grabbing the HTML snippet of just the list (sans CSS/extras)

Slinky, a PHP class for URL shortening/lengthening

A few weeks ago, I tweeted that I was writing a PHP library for shortening/lengthening URLs using some of the common/popular services. I said it was going to be called Slinky, and that it’d support a bunch of different services. Well, it’s now available for download and I think it’s pretty cool, even if I do say so myself ;)

Please grab a copy, try it out and let me know what you think. It hasn’t actually been used for anything useful yet, so I’m also interested to hear what you’re using it for!

microformatsDevCamp

Over the weekend, I attended microformatsDevCamp here in San Francisco. It was a chance for a bunch of people who are interested in microformats to get together and hack on some projects that used microformats to Do Cool Things. I ended up being the instigator of one of the projects we worked on, because I had a concrete “system” in mind that would leverage microformats to meet a real need.

The project was to create a web service that would scrape URLs and pull out any content marked up in hCard content (e.g. my contact page) and would then load that content into an LDAP directory. The reason for this is that most Address Book/Contact applications can plug into an LDAP directory to populate their details, so this would provide a direct pipe between client-side contact storage and web-based, decentralized information. The web service would periodically check the URLs it knew about for updates and update LDAP appropriately. If people update their hCard-based information, the LDAP directory would automatically pick up that change and update itself. I’ve talked about this idea before.

Building (or even tinkering with) this system required that we learned about LDAP, and as it turned out, none of us knew much more than the very basic concepts involved with LDAP, so we had a lot of learning to do. I’m putting together a list of LDAP basics that I’ll publish once they’re straightened out a bit. In the meantime, a specifically big thank you to Tantek for organizing ufDevCamp, to Stephen Weber for working with me on the LDAP/code side of things (and showing me how to get started on github.com, and to Mark Ng for setting up an OpenLDAP server for us to play with, and for helping figure out some of the configuration options etc required to get it all working.

Oh, and there’s some code over here if you’re interested, and we made a page on the microformats wiki with some info on our progress.

KRead: a simple feed reader for the Kindle 2

It’s Saturday, and I just got a Kindle 2 this week. I’ve been thinking it’d be neat to be able to read feeds on the Kindle (since it has a built in Web Browser and internet connection), so I whipped up KRead. It’s a super-simple, mostly-text-only feed reader for the Kindle which just requires you to enter the URL of a single feed (or a website, it supports auto-discovery) and it’ll give you the content of the feed in a simply-formatted list so that you can read through it.

Check out the KRead project page for some more details or jump over to http://kread.dentedreality.com.au/ and try it out.

The All-New LiveJournal Importer for WordPress

Over the past few weeks, I have been working on a new importer for people who use LiveJournal, but would like to switch over to WordPress. With LiveJournal laying off a bunch of employees, it seemed like some people might prefer to move to a platform where they had a bit more control over their own content, rather than relying on another company to handle it for them. I decided that my measure of success would be that it needed to be capable of importing Guav’s entire journal — comments and all, without error.

As it turns out, it’s been quite a project. LiveJournal’s API is, shall we say, “challenging” to work with, and the sheer size of Guav’s journal (over 3,700 posts and nearly 200,000 comments) meant that I kept running into time, memory and database limits that would crash the importer. After a lot of back and forth with Guav though, I’m happy to present the new importer (find it under Tools > Import > LiveJournal), sporting the following features:

  • Just enter your LiveJournal username and password and you’re ready to go
  • Via the API, it connects directly to LiveJournal and imports all of your posts,
    • Posts marked as “Friends Only” are assigned a password within WordPress,
    • Posts marked as “Private (you only)” are marked as Private within WordPress, which means that only authors on your new blog can read them,
    • lj-cut tags are converted to the WordPress equivalent, the <! — more — > tag,
    • lj-user tags are converted to normal links, and have class=”lj-user” attached to them to make it easier to style them if you like,
    • Tags are imported properly,
    • If you closed the comments on a post in LiveJournal, then they’ll be closed in WordPress as well,
    • Lots of the “meta” information related to posts is also imported using WordPress’ Custom Fields feature. You could then use these values to reproduce some of LiveJournal’s functionality within your new theme if you like. The fields imported are:
      • If your post contains adult content (lj_adult_content),
      • Your current co-ordinates and location (lj_current_coords and lj_current_location),
      • Your current mood (lj_current_mood),
      • Current music (lj_current_music),
      • Your userpic keyword (lj_picture_keyword)
  • Next up, all of your comments are also imported,
    • Threading is preserved, so replies to other comments show up successfully (provided you enable that feature in WordPress),
    • The “subject” of each comment is included as the first line of the comment itself, because WordPress doesn’t have a comment title/subject value,
    • LiveJournal users get links back to their LiveJournals,
    • Your own comments are linked to your WordPress account, and are linked back to your new WordPress blog,
    • Anonymous users are labeled as “Anonymous”,
    • “Screened” comments on LiveJournal are imported as “Unapproved” within WordPress, so you can decide what to do with them

So there you have it, a brand new, shiny LiveJournal importer. This should be bundled with the 2.8 release of WordPress (it’s available right now on WordPress.com), and will be available for everyone. As I mentioned, it’s been tested with one single, very large blog (and a few smaller test ones), but if you find anything wrong with it, please file a bug on the WordPress Trac!

Huge thanks again to Guav for helping with the testing of this thing (maybe now he can migrate over to WordPress as well)!

FeedGrowler update: Custom icons

I’ve just updated the code for FeedGrowler so that it supports custom icons for each feed that you are monitoring. All you need to do is include the full path to an icon/image file as the second argument when you call feedgrowler.php (or in your crontab).

Custom icons for a WordPress feed, and a Twitter search.

Custom icons for a WordPress feed, and a Twitter search.

This version also supports Atom feeds (in addition to previous RSS 2.0 support).

Check out the latest FeedGrowler.

2 New Projects

I forgot to mention that I have 2 relatively new projects launched in the Projects section of this site:

Check them out and let me know what you think.