Traces of Inspiration is the personal weblog of Adam Darowski. Adam is a daddy of two and a User Experience Designer for BatchBlue Software. (more about Adam)
It always kind of bugged me a bit that comments I made on my own posts looked exactly like everyone else’s. It took me a long time to dig into how to make them look different, but I finally did. So, here’s how I styled author comments differently on this blog and on the BatchBlue Blog.
First of all, so you can get an idea of what I’m talking about, here’s how comments I leave on this blog look:
And on the BatchBlue Blog, here’s how a comment I leave looks:
First thing I did was find this great blog post by Matt Cutts (now with Google). His solution involved taking this:
<li class="<?php echo $oddcomment; ?>"
from the comments.php page and replacing it with:
<li class="<?php
/* Only use the authcomment class from style.css if the user_id is 1 (admin) */
if (1 == $comment->user_id)
$oddcomment = "authcomment";
echo $oddcomment;
?>
Basically, what that is doing is taking any comments left by a logged in user with the user_id of 1 and applying the class “authcomment” to it. That works great if you have only one author. But the BatchBlue Blog has eight authors, with user_id from 1 to 8. Because I wanted to show a photo of the author next to his/her comment, I needed to give each author their own class name.
So, instead I used:
<li class="
if (1 == $comment->user_id)
$oddcomment = "comment-ransom";
if (2 == $comment->user_id)
$oddcomment = "comment-riggen";
if (3 == $comment->user_id)
$oddcomment = "comment-lynch";
if (4 == $comment->user_id)
$oddcomment = "comment-ohara";
if (5 == $comment->user_id)
$oddcomment = "comment-darowski";
if (6 == $comment->user_id)
$oddcomment = "comment-calhoun";
if (7 == $comment->user_id)
$oddcomment = "comment-sweeney";
if (8 == $comment->user_id)
$oddcomment = "comment-larson";
echo $oddcomment;
?>"
This way, comments I left would get the class “comment-darowski”, comments Michelle left would get “comment-riggen”, etc.
And the CSS to make it look like the image above…
li.comment-darowski {
background: transparent url(../images/5-thumb.jpg) no-repeat left top;
padding-left: 100px;
}
And repeat that for each author, swapping out a different photo file name.
For this blog, I used a mild variation on the original code by Matt, just naming the style “comment-darowski”. The CSS:
li.comment-darowski {
background: #FFC url(images/adam.png) no-repeat 14px 14px;
border: 1px dotted #999999;
padding: 10px 10px 10px 50px;
}
So, there you are. Have fun!
2 comments so far. Wanna add one?
Let me start by saying… no, I’m not obsessed with FriendFeed lately. 
I’m merely obsessed with finding the best way to consume the neverending supply of online content. FriendFeed is merely the best way I’ve found so far to consume this data.
I’ve heard a lot of people complain that FriendFeed is an uncontrollable firehose of data. I disagree. If anything, I’ve found that with a few tweaks it can actually help you manage your information better. Here’s a few tips:
You Don’t Have to Follow Everyone
This one sounds obvious. But ever since I started subscribing to feeds or following folks on Twitter, I’ve been very selective about adding A-listers. Why? Those folks tend to produce a hell of a lot of content. Following too many prolific A-listers can really turn your feedreader into a mess.
My theory has always been to follow bloggers with whom you share similar interests. They’ll tend to chime in about the stuff that’s worth talking about. I’m thinking of Brian Oberkirch here. You can’t believe how much time I’ve saved over the last two years by reading Brian and NOT reading other people.
FriendFeed gets this. I don’t need to follow Robert Scoble. I just wait for some of my friends to let me know when they’re interested in something Robert posted. It appears in my feed like so:
Never Miss an Important Tweet Again
I’ve already talked about how I can filter my FriendFeed feed by service, letting me read all tweets on Twitter and not duplicate them on FriendFeed.
But, I’m hitting that “following” threshold that makes it difficult to keep up with EVERY tweet on Twitter. So, if I only have time to skim the last few pages of tweets or I go offline for a few hours (or, more realistically, Twitter does) and can’t catch up on every tweet, FriendFeed will let me know which of my friends’ tweets are being “liked” or commented on.
Follow Stuff that was Previously Clunky to Follow
Does Del.icio.us even have a “friends” feature? I don’t even know. It very well might.
If it does, nobody uses it. And that’s a shame. Think about the mundane things you find yourself reading about folks on Twitter. Then, when you consider that you’re missing an important activity like taking the time to read an article online and save it for later… It’s crazy.
It’s true that everyone with a Del.icio.us account has had an RSS feed, but with FriendFeed it has never been so easy to subscribe to all of someone’s services at once. There’s gold in those Del.icio.us feeds. And the more you rely on your friends’ bookmarks, the less you’ll need to subscribe to a billion blogs.
Saved bookmarks on Del.icio.us appear as individual entries in FriendFeed. This is awesome because now I can see, for example, what Joshua Porter is bookmarking. Chances are, if he’s bookmarking it, I want to read it.
I used to appreciate when people would have a post of “this week’s links on Ma.gnolia” or whatever. I didn’t want to have to hunt for their bookmark feeds. But now, there’s a downside to those blog posts. I’m now subscribed (through FriendFeed) to the blog feed AND the social bookmarking feed. That means I get duplicate content.
But, FriendFeed has all sorts of options for hiding this duplicate content. For example, if you have a FriendFeed friend who has social bookmarking links published in their blog feed, you can just hide all social bookmarking entries from that person. Similarly, you can turn off the other two features I profiled here—you can choose not to see friend of friends’ content or tweets that people “liked”/commented on.
So, FriendFeed can be a firehose, I suppose. But they have put a lot of tools in place to help you turn down the pressure.
5 comments so far. Wanna add one?
I recently wrote about how to de-clutter FriendFeed. I also alluded to the fact that there were some things that were keeping me from consuming all my data in FriendFeed. I wanted to talk about some here.
First of all, I have some specific requirements for data consumption applications. It simply has to be a web application. Desktop clients such as Twhirl (which works for both Twitter and FriendFeed) simply won’t do for me because I spend so much time on that damn iPhone. So, it needs to be a web app, but it also needs to have an acceptable interface for a mobile device.
Recently, I have been enjoying aggregating my feeds within FriendFeed and then reading them in Google Reader. Google Reader’s mobile interface is superb. Also, it has many of the features that I’d like to see in a FriendFeed client—for example, read/unread and starring (”liking” an entry is nice, but I don’t necessarily want it public).
But, I have some complaints about FriendFeed in Google Reader.
Imaginary Friends Aren’t in Your FriendFeed Feed
I have long touted FriendFeed’s “Imaginary Friends” feature as super cool. The dirty truth is that I haven’t really used it much. And now I realize that I can’t really use it for what I want.
First, what is it? To follow someone’s feeds in FriendFeed, you need to subscribe to the set of feeds that they have chosen to group together under their identity. But, what if you want to follow a person that hasn’t signed up for FriendFeed? The service allows you to aggregate their feeds by creating an “Imaginary Friend”.
I demoed the feature for Pam (BatchBlue’s President) and added her as an imaginary friend. But for some reason, I wasn’t getting her updates in Google Reader. Today, I paged until I could find her latest blog post (it’s her birthday!) on friendfeed.com. It looked like this on friendfeed.com:
“Why the lock?” I thought. I hovered over it and it said “Pamela O’Hara has a private feed”. Well, actually it’s not a private feed. It is all public data that I have aggregated. She’s just an imaginary friend. If that’s the reason I can’t see the feed in Google Reader, just let me know somewhere that imaginary friends’ data can’t be passe through the API or RSS. Instead, I’m confused.
Even though it is private, I can “like” it or comment on it. But I checked—that info is only visible to me when I’m logged in (not others).
Why does this bug me? I was hoping I could use FriendFeed to make a master feed of ALL services from ALL of my contacts (portable to and from anything that reads an RSS feed). For those contacts not on FriendFeed, I could create imaginary friends and insert them that way. Alas, no luck. I still need to keep dozens of extra feeds in addition to the FriendFeed one.
Inconsistent “more” Link Solutions
FriendFeed makes very few attempts (by default) at hiding some of the feed clutter from you. But one thing they do is group multiple postings from the same person to the same service over a short period of time into one feed entry. This, for the most part, is pretty awesome.
So, in Google Reader, I would see this if my friend TJ posted 20 photos at once to Flickr:
If I was on friendfeed.com, clicking that blue arrow would make the other thumbnails appear using Ajax. Of course, in an RSS feed entry, you can’t employ Ajax. So, Google Reader sends me to the permanent link for that single entry on friendfeed.com.
From there, I can expand to reveal the other thumbnails.
This is a sweet solution, though you could argue Step 2 is unnecessary.
BUT they don’t keep this functionality throughout. For example:
Again, nice of them to try to limit the clutter by grouping more than two recent Delicious entries into one entry. On FriendFeed.com, clicking that “one more” link shows the third with more Ajaxyness. But in Google Reader? Nope. It opens up the main page of friendfeed.com. Totally useless.
Why does this bug me? It’s not consistent. In fact, it is so blatant that I’m thinking it might just actually be a bug. I hope so.
Next, I promise to focus on some features of FriendFeed I really like. Because, while I’m complaining a bit in this post, I find the service extremely compelling. Sure it’s not pretty and sure the best way to consume the content has not yet been discovered. But remember, things like @replies weren’t originally part of Twitter. It was a usage pattern that was adopted as a feature. FriendFeed doesn’t have enough established usage patterns.
But rest assured, these are smart people. FriendFeed will continue to improve.
Wanna leave a comment?
I like FriendFeed. I haven’t yet jumped headfirst into using it all the time, though. While wondering why, I realized the biggest reason was duplicate content.
I’ve already subscribed to most of my FriendFeed friends in some way over the past couple of years (be it their blog feed, Flickr stream, Twitter feed, etc.). So, a large amount of content in FriendFeed was stuff I’d seen before (or was about to see). However, the chief offender was Twitter.
Here’s how much of my friends’ content came from Twitter:
And that’s nothing. About 75% of my own personal feed content is from Twitter.
I skim or read every single tweet from the people I follow. So, that meant for a LOT of duplicated content. Through FriendFeed’s Advanced Search feature, I stumbled upon the fact that you could filter the feed by service using a nicely hackable URL. If you enter http://friendfeed.com/adarowski?service=blog, you get just my blog posts. Swap out “blog” and put in “flickr” and you get my photo stream. Swap in “twitter” and get my tweets. And so on.
I wondered how I could instead set my feed to show all services EXCEPT one… that one, of course, being Twitter. I was about to write to FriendFeed when I saw that someone else had asked the same question. I had assumed the “Hide” link under EVERY entry was to hide an individual entry. I never understood how helpful that would be. But it turns out, that link offers you a popup:
There ya go. You can hide all the Twitter updates. They even let you decide if you want to show tweets that people have commented on/favorited. A nice touch. My feed is much more manageable now.
There are still a few things that are keeping me from replacing Google Reader with FriendFeed as my #1 source of feeds, but I’ll save those thoughts for another time.
5 comments so far. Wanna add one?
On Monday, I announced the release of BatchBook for iPhone over at the BatchBlue Blog. Check out the post for the details of what features we launched with and what’s coming next. Don’t have a BatchBook account yet? You can sign up for free.
But what I wanted to talk about here is how I set up the development environment. Obviously, designing for a phone is much different than for a desktop or laptop. Luckily, there are plenty of tools available to make developing for the iPhone both a breeze and—quite frankly—incredibly enjoyable.
iui
I highly recommend starting with Joe Hewitt’s wonderful iui framework for iPhone-optimized web apps. The framework has a very small footprint, can be heavily customized, and is downright fun to experiment with.
iPhoney
Testing can be interesting… you don’t want to keep pushing code live and firing up your phone, so what’s the best approach to take?
First, I tried iPhoney. iPhoney is your own gorgeous iPhone sitting your desktop. You can tell iPhoney what User Agent to behave as—the iPhone, standard Safari/WebKit, or more.
Safari 3.1
Once you get to a certain point, though, you need to use some developer tools to fine tune your code. Safari 3.1 came with a bunch of developer tools. Among them are an element inspector so you can see the cascade of styles attached to an element (think a prettier version of Firebug that isn’t quite as powerful). Also, you can choose from a huge list a of user agents.
Using the iPhone user agent with the element inspector lets you troubleshoot any display issues you may be having.
To turn on the iPhone Developer Tools, head to Safari’s preferences:
Once you quit Safari and open it back up, you’ll see the Develop menu.
From there, just choose iPhone from the User Agents list and you’re in action!
So, have fun! I’m personally looking forward to updating the BatchBook iPhone app and am tempted to play with some other ideas for creating iPhone apps. I have found that working with a totally different canvas (a phone as opposed to a desktop browser) after all these years can actually be quite thrilling.
Plus, developing for iPhone means no Internet Explorer!
Wanna leave a comment?
« Older Posts
Newer Posts »
