Delta Tango Bravo

While working on a project this week, I came across a really useful way to use CSS to improve the display of composite images. I think most web designers by now have the idea of when to use a JPG and when to use a GIF or PNG to save an image — basically save photos as JPGs and save graphics as GIFs or PNGs. However, there are lots of times when this distinction is blurred and neither one file type nor the other is particularly appropriate. A composite photograph with graphical text such as the example below is a classic example.

The image below is saved as a GIF, which has two problems. First, it's pretty big (about 24kb) and second, the limited palette of a GIF made the colors look terrible in the photographs.

See the close-up below showing the terrible color compression in the sky above the Capitol Building.

Saved as a JPG, the results aren't any better. The photographs look fine, but there's heavy compression visible on the not-so-crisp lines and text.

See in the example below how bad the compression looks in the image. I could set the JPG compression to be very low, but that would make the image really big.

So, get to the point already, you're saying. Without any extra HTML code we can grab the best from both worlds. First, save the photographic parts as a JPG and the graphical parts as a GIF or PNG. Here's our two parts (I've outlined the JPG in red to give you the idea). Make sure to cut a transparent hole in the GIF or PNG where you want the photo part to show through.

Then simply make the image tag as you would normally and set the JPG as the background of the GIF. You probably want to put this in your separate CSS file, but I'll just write it inline for ease here: <img src="example.gif" style="background: url(example.jpg)" alt="" />. And there you have it... all done.

This isn't perfect... it requires two requests to the server because there are two images instead of one, for instance, but it's a pretty good way of solving a fairly common design problem. I've tested this quickly in Firefox, Safari, and Internet Explorer 5.5/6 and it works perfectly for me. Hope you find it useful sometime.

Way back in June I upgraded my iBook to OSX Tiger and was playing around with widgets that were available for the whole new dashboard thing. Some guys had developed a Google Maps widget that had some nice functionality that I liked using. However, its rudimentary interface was pretty cumbersome and unattractive so I whipped together some stuff in Photoshop and pieced it together into the widget. To cut a not-so-long story short... I didn't hear from them for ages and I thought the project had just dropped off the map so to speak.

One of my coworkers just pointed out that the project is alive and kicking and it looks like there should be a new release coming out soon. I'm not quite so enamored with the slow-loading dashboard as I was back in the summer, but it will be really cool to see this get implemented. It sounds like there's a lot of nice work being done by Lokkju in this upcoming release.

And... for any Torontonians who want to picky... yes, I know that Forest Hill Florist is not located under the Lakeshore as seen in the screenshot, but thanks for pointing it out.

Clouds are a way of grouping a bunch of information together on a single page and defining the importance of each item based on size or a size and color combination. So, popular or important items are large and less popular or important items are relatively smaller.

Clouds are one of the defining characteristics of the whole web twenny phenomenon. Almost every site that's labeled Web 2.0 has clouds, usually in the form of tag clouds. Technorati and Flickr use clouds to show what's currently popular among their users. However, as Jeffrey Zeldman accurately opined, unstructured categorization leaves a lot to be desired.

So, when Kevin suggested that we implement a cloud view on Digg, I was a bit skeptical to start with. Weren't we just falling into the whole web twenny trend? What value would clouds serve on Digg when we've already got a nicely structured category taxonomy and you can already easily sort stories based on their popularity. Kevin and I sat down for an afternoon and worked it out and I think clouds have a place in digg that makes them uniquely useful.

What Problem Are We Trying to Solve?

We're addressing a very specific problem with clouds on Digg. In the Digg queue (the place newly submitted stories wait until they're popular enough for the homepage) the following scenario occurs frequently: a great story gets submitted and begins gaining a lot of support, lots of other stories get submitted and the first story moves down the first page quickly, the first story gets pushed off the first page, the first story is forgotten about and dies in the queue. So, in the end, a promising story never gains the popularity to get promoted to the homepage even though it may have been of high enough calibre to make it. That sucks.

So, How Do Clouds Help?

We've implemented a secondary queue view that allows diggers to see the stories in a cloud view. One of the advantages of clouds is that a lot of information can be displayed in a compact space in a meaningful way. We can display 300 stories in the queue on a single page that really isn't very tall, while still allowing quick visual scanning of the stories. Particularly with tabbed browsing, this kind of density (which means you're only seeing the titles of stories) isn't too much of a hindrance as you can open the whole story before digging it yourself. So, you can view the entire contents of the queue in a manageable space while being enabled to visually jump through only the most popular stories if you choose.

How Are We Sorting the Stories?

There are two ways we're sorting stories. As with most clouds, we're sorting by popularity. Popularity is, of course, the fundamental idea behind digging stories. So, the most popular stories are bigger and bolder and the less popular stories are smaller and more subdued. We're calculating this by relative terms — if you're browsing the "Gaming" category, for instance, the top 10% of stories are huge, the next 20% are smaller, etc. The second method of sorting is chronological. The most recent stories are at the top and the oldest stories are at the bottom.

What's So Special?

Chronological sorting might seem obvious and not very special. However, it's what adds structure to the cloud and what makes it really useful. Whereas tag clouds are often an amorphous grouping that looks cool but is hard to wrap your head around, the vertical timeline gives each item meaning even if it's not very popular. Even all of the tiny grey titles are interesting. We envision many people browsing down the entire page reading all of the stories quickly but using the sizing the consider stories more closely. Other people will quickly scan down the page and only check the biggest stories. Of particular interest will be stories of medium popularity at the top of the queue. They're not only pretty popular but they've gained that popularity quickly.

Why Don't We Simply Sort By Popularity?

You've been able to sort stories in the queue by popularity since the summer. So, you can easily view the most dugg stories in the queue that haven't made it to the homepage yet. However, this fails in two ways. First, it's only easy to browse the really popular stories that are on the brink of being promoted — say the top 30 or 40 stories. You still have to go from page to page to see them. Second, you're missing the chronological aspect of the queue. Stories are interesting not just because they have a lot of diggs, but because they received a lot of diggs very quickly. So, semi-popular items in the queue that are recently submitted are likely of more interest than more popular items in the queue that are a couple of days old.

Is this Revolutionary?

Not really. It's a slight iteration on an existing idea and may even have been implemented elsewhere I'm not aware of. It's also a somewhat intimidating way of browsing for stories that is most suitable for people who aren't complete novices to Digg. The haphazard formatting (weird line-spacing, centered text) inherent to clouds adds to this. At least for now, we're keeping it as a secondary way of viewing the queue because of these things. However, I think the combination of two important factors (time and popularity) in determining position in a cloud is an interesting idea and makes clouds really useful (and meaningful) in cases such as this.

If the title to this post doesn't immediately make your toes tingle with anticipation, you clearly didn't spend enough days of your youth in front of a crappy EGA display trying to figure out the often reasonless riddles of Zak McKracken and the Alien Mindbenders. Oh, the days spent with my siblings trying to figure out how to use the Tibetan monk to find our way out of the aiport into Miami which was permanently labeled "closed for repairs."

This morning I disovered via digg that a fan has made a freeware sequel called Zak McKracken Between Time & Space. The screenshots look great at least when you're not too close to the protagonist's face (hey, it's freeware after all). I can't wait until they get around to releasing an English version as it's currently only in German. And, I've got my fingers crossed that the translator is not the same person who translated the website. Anyway, hopefully it's as frustratingly addictive as the original.

Over the past few months, iFilm, a site with free streaming videos, has been undergoing incremental changes. Although it's still a bit garish, the design has received some nice esthetic as well as important structural changes that make it easier to use as well as slightly more attractive. iFilm's recent changes fit nicely into the category of a 'realignment' as opposed to a 'redesign', a subject Cameron Moll described really well on A List Apart recently. Videos are easier to browse, links to watch the videos get much better focus, and generally it's easier to figure out the interface at a glance.

One especially interesting area they've improved has been their advertising. iFilm has always had a ton of advertising, but it's one of those sites where you feel like you're really getting some decent content in exchange for the assault on your eyeballs — they obviously have to pay for all that bandwidth somehow. Some of their advertising is downright annoying such as the splash page... but at least you can easily skip past it. Other areas are fairly clever, such as forcing you to watch an ad for about ten seconds before your video starts. It only happens with every few videos and it's really really short, so you often don't bother skipping past it manually (which notably you can easily do) and it's never led me to scream obscenities at my screen.

With their latest design iteration, which I only noticed earlier today, they've added something really interesting. The main advertisement on the page is integrated right into the normal top of the site. Currently when I go, I see an ad for the game "Call of Duty 2" and it fits right into the page, even going behind the top menu and the iFilm logo. As opposed to blocky banner ads, which almost always feel patched into a layout as an afterthought, this feels fairly organic and I find it is surprisingly nonintrusive. There are certainly drawbacks — it obscures the navigation, the ad has to be specifically designed to fit in the space, it is a bit distracting — but it is pretty innovative and is a good solution to a necessary evil (in a design sense if not an ideological one). Note that sometimes they show a normal banner ad overlaying it, so I've taken a screenshot of the version I'm talking about for you to see.

Also note that the Kermit the Frog video for Target, which you can see in the screenshot, is totally worth watching.

As I suspect is the case for many people of my generation, I rarely subscribe to print publications. I most frequently do my periodical reading via a Salon subscription, CBC News, The Globe & Mail, Google News Canada, Digg, and a whole slew of weblogs I have in my RSS reader. I also grab free paper publications on the street such Toronto's Now Magazine.

However, in the past few years I have subscribed to a number of magazines such as Bike Magazine (I read it for the articles... seriously) and Wired, which I've since let slide. Currently I've got subscriptions to a couple of great publications that I really like having around the house.

One is Geist magazine, which I first got wind of via a Salon promotion. It's a Canadian literary magazine, which aside from being a little inconsistent offers at least a few gems each issue and is a refreshing change from all the technical literature and news I end up reading during the day.

The other is Toronto's Spacing magazine, which is a truly incredible local publication focused on culture and the arts. Apparently next month they'll be featuring local photo-bloggers, including Sam Javanrouh from the Daily Dose of Imagery.

I'm genuinely curious, when so much material is available online, what actual paper-mailed-to-your-door publications do you subscribe to?

One of the CBC's lead news stories this morning was B.C.'s mystery man ID'd as Colorado resident. Apparently a "mysterious young man who walked into a church in B.C. on Sunday claiming to have amnesia is from Colorado, West Vancouver police say. The man was carrying a hockey bag and had about $1,000 in his pocket." From the accompanying image, I'm pretty sure they screwed up the identification process. It should obviously read "the man [sic] is from Hobbiton and had pawned a piece of jewelry for $1,000."

After lamenting early this fall about the demise of two of Church Street's premier eating establishments, today I bring good news.

First, I had my first sandwich at the newly reopened Garage Sandwich Co. They're now at the back of Pusateri's Grocery just south of Wellesley and have replaced the not-so-spectacular deli. The sandwiches are as good as ever and you can do your grocery shopping at Church Street's finest grocery at the same time. The 'Le Baron' is especially good: peameal bacon, lettuce, sweet potato, honey mustard, and cheddar on a kaiser. So good.

The second piece of news is both good and sad. I got word that the Five Alarm Diner closed due to some sad personal problems the owners experienced that probably aren't weblog material. However, someone else has taken ownership of the place and according to rumor will reopen it as the Church Street Diner sometime soon. Also, at least a few members of the old staff are likely to be coming back. Can't wait to see the doors opened again.

Update: I walked by the diner tonight and it already has new signage and a notice that says it's opening soon. The excitement builds...

This might be old news, but I've just discovered PhilosophyFootball.com: sporting outfitters of intellectual distinction. They've got a decent-sized range of shirts with either clever soccer-related lines by philosophers or philosophical quips by footballers.

I especially like the Albert Camus shirt with "All that I know most surely about morality and obligations, I owe to football" with "Camus #1" on the reverse. And, my friend Joel 'Little Triangles' Walmsley will like coach Brian Clough's sage advice "If God had meant football to be played in the air he would have put grass in the sky."

Yikes, almost twenty pounds for each shirt plus nine pound shipping to this side of the Atlantic leads to a tidy £28.99 price tag. Over sixty Canadian dollars for a t-shirt's a little too rich for me.