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.
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!
Something bugs me just about every time I mark up a list in (X)HTML.
There’s no list-head (<lh>) element.
Let’s say I’m marking up a list of my top three Last.fm artists. It would look something like:
<ol>
<li>Teenage Fanclub</li>
<li>Mogwai</li>
<li>Yo La Tengo</li>
</ol>
Which, of course, would then render like:
- Teenage Fanclub
- Mogwai
- Yo La Tengo
But what if I wanted to label that list something like “My Top 3 Artists on Last.fm”. What are my options? I could throw it in a paragraph (<p>) tag. But a random paragraph doesn’t really semantically relate it to the list. I could put it in a header tag (<h1>, <h2>, etc.). That would at least tell me it is a header to something and not just an arbitrary paragraph. But still, that header isn’t associated with the list itself in any meaningful way (beyond proximity).
If I marked this up in a table, I have the option to add a table header (<th>). Tables are for tabular data, so for this example, I’ll show what the markup would look like if I wanted to make a table of my top three artists with the number of times I played them.
<table>
<tr>
<th>My Top 3 Artists on Last.fm</th>
<th>Play Count</th>
</tr>
<tr>
<td>Teenage Fanclub</td>
<td>855</td>
</tr>
<tr>
<td>Mogwai</td>
<td>755</td>
</tr>
<tr>
<td>Yo La Tengo</td>
<td>705</td>
</tr>
</table>
And that would render like this:
| My Top 3 Artists on Last.fm |
Play Count |
| Teenage Fanclub |
855 |
| Mogwai |
755 |
| Yo La Tengo |
705 |
Like the header tags and <strong> tag, most (if not all) user agents will show the <th> in bold. Also, since the <th> is a different element than the standard <td>, it is really easy to style headers differently from other table cells.
Best of all, though, the <th> is nested inside the <table>, meaning that it is explicitly a part of that table. Simply adding a <p> or <h3> above the <table> wouldn’t have the same semantic value.
Really all I’m wondering is… why don’t we have a <lh> to use when marking up ordered and unordered lists?
