Jim Barraud

I’ve always been a fan of the Food Network show Good Eats with Alton Brown. I like the simple and straight forward approach to explaining how the cooking world works. And recently, I’ve become a big Tea fan. Here’s two great videos of a good eats episode where he explains the nuances of tea.

Weezer cover Radiohead’s Creep, live in Portland from Dave Allen on Vimeo.

One of the touted new features of Firefox 3 is a more native look within your operating system of choice. I’m a Mac guy, so lets focus there. The new Mac theme is called Firelight. While it is a huge improvement over the Firefox 2 default theme, it still falls short of feeling like a native Mac app. It feels more like a Windows app pretending to be a Mac app. Gray gradients do not in itself make a Mac interface. While well known Apple pundits have given excellent Safari vs. Firefox comparisons, I figured I’d take a slightly different approach.

I’ve been a Safari fan for a while. I love it’s simple interface and think the webkit rendering engine is top-notch. But most of my day-to-day work involves working on web applications that are predominantly internal facing. And the ones I work on usually don’t have official support for Safari (as much as would love it they did). While Safari’s web development debug tools have made great strides, they still don’t compare to Firebug. That being said, my default browser for the past year or so has been Safari. Firefox 2 was just far to buggy to be considered any more than a development browser. Normal browsing and “getting things done” tasks were left to Safari. Firefox 3 on the other hand has made tremendous leaps over Firefox 2. I’ve been using it since beta 2 and while I still run into the occasional bug, I run into them far less often (days to weeks apart as opposed to hours). Now that Firefox 3 is officially released, I’ve made it my default browser (we’ll see how long that last though).

Default Firefox 3 Theme

Now that I’ve made Firefox 3 my default browser, how do I get around the not so native feeling of the Firefox 3 interface? Turns out there’s a wealth of options to paint your brand spanking new Firefox 3 with a coat of Safari. Lets check them out.

• GrApple
  This is the foundation to your Firefox Safarification. GrApple if a Firefox theme by Aronnax that pretty much mimics Safari in any way possible. You have two flavors to choose from, Yummy or Delicious. The difference between the two are the placement of the tabs in the tab bar. If your going for authentic Safari, you want Yummy.
• Fission
  One of the nicest safari features is the integrated loading bar into the address bar. Fission is a plugin that adds this useful feature to Firefox. You have the options of changing the color of the loading bar or adding a custom image, but the GrApple theme takes this into account adds that for you.
• Stop or Reload Button
  The stop and reload buttons are combined into one button in Safari. This cleans up and simplifies the toolbar a bit (or adds room for even more buttons depending on your taste). Use the Stop-or-Reload Button extension to combine these buttons in Firefox.
• firefox-mac-pdf
  One of my favorite Safari features is the built in PDF viewing support. The day I don’t need to load up the Adobe Acrobat Plug-in is a good day. The firefox-mac-pdf extension adds this same built in PDF viewing support to Firefox.
• Tab to Window
  Sometimes you need to pop out a tab into a new window. This often happens to me when I’m referencing content in one tab to fill out a form in another. Surprisingly this isn’t a built-in feature, but here’s an extension to fix that. Safari makes this easy in that you can just drag a tab off the tab bar and it’ll turn into a new browser window. This solution relies on good old contextual menus. Not as fancy, but it’s functional.
• Color Management
  Safari has great color management support since it reads the color profiles that can be embedded into images. Browsing a site like flickr is different experience in Safari then in any other browser because the colors are displayed “correctly”. Firefox actually has built in color management, but it’s not enabled by default due to performance issues and other small regressions. But the Color Management extension will enable this feature for you if you want to try it out. And I say try it out because I personally don’t recommend using it full-time since I did experience some noticeable performance issues when I had it enabled. The other issue is you need to define your system default color profile and no matter what I did I couldn’t get the colors in the browser to be correct. All colors in the browser, including the toolbar, were dark and over saturated. I’m not an expert on color profiles, so maybe I’m missing something. But the color and performance issues didn’t seem worth having this feature enabled. Which of course is probably why it’s off by default. I only list here as another weapon in your Safarification arsenal. Use it with caution.

Firefox with GrApple Theme and Stop/Reload plugin

Now these add-ons will get you most of the way there. But there will still be things you come across in your day-to-day Firefox use that reminds you of Firefox’s non-native Mac roots.

• There is no integration with the operating system wide keychain for password storage. I’m fully aware of Firefox’s password saving capability (and I use it), but this is functionality that should really be utilizing the system wide keychain. It gets real annoying when passwords are saved in multiple locations and there’s no way to keep them synced. This is probably my biggest Firefox pet peeve.
• Contextual menus have squared off edges and not round. It’s a little thing, but it gives you that “something’s not right” feeling.
• The form controls are not native. They’ve done a lot of work in trying to make them look native, but they still feel a bit off.
• There’s no support for the system wide dictionary. Command+Control+D has to be one of the most under used OS X keyboard shortcuts. I use it constantly, but whenever I mention it or someone sees me use it, they ask “what’s that?”

I know there will be the usual “Just use Camino” comments. I’ve used Camino and I think it’s a great browser. But I rely on Firefox’s web development extensions too much to even consider it.

If anyone has any solutions for the above issues, drop me a comment. I’d love to hear them.

code_swarm - Python from Michael Ogawa on Vimeo.

Visualizing the commit history of the Python scripting language project. (via Chris Glass)

I’m a big flickr fan. It’s a great service for sharing and discovering interesting photos. But I’ve always felt browsing around flickr to discover new photos could get a little tiring. You have your standard single page with a photo, previous & next buttons, or a page of paginated photos. Presented in a very basic way that’s similar to the majority of photo-sharing services out there. I usually prefer to view photos in flickr’s slideshow mode because of it’s darker background and larger photos, but this isn’t a great method for discovering new photos or browsing around.

I’ve just stumbled upon a nifty little app called DestroyFlickr (via). DestroyFlickr provides alternative methods to viewing, downloading and uploading photos on flickr. Photos are presented on a dark gray background in a casual format. The app divides itself into several workspaces. You can load various content into each workspace and easily switch between them. For example, you could have you’re photos displayed in one workspace and various contacts photos in the others. The app is built with on the Adobe Air platform, so it will run on either windows or mac provided you have Adobe Air installed.

DestroyFlickr succeeds in making it seem as though browsing flickr is like browsing photos on your own hard-drive. A desktop native feel is given to content that exists entirely online. At times it feels as though I’m using a kind of “Lightroom Light” app for browsing photos on my computer. It’s the first Air based app that I’ve used that doesn’t feel much like an Air app (and that’s a good thing).

DestroyFlickr is still in the beta stage of development and the developer has stated that there are plenty of other features he wants to add, but currently can’t until June 30th because of its submission to the Adobe Design Achievement Awards. It’ll be interesting to watch this app as it develops because there’s a tremendous amount of potential here.

Playing the Building is a fascinating project by David Byrne where he hooks up an old pump organ to the The Battery Maritime Building in New York. Various motors are attached to the different pipes, radiators and other metal structural elements of the building, each giving off a unique sound when the corresponding key on the organ is played. (via Greg O’Keeffe)

Location based social networking isn’t exactly a new thing. One of the earliest and more popular services in this area was Dodgeball. Dodgeball was eventually bought by Google, but nothing has been done with the service since it’s purchase in 2005. But location based services seem to be on the rise again and Brightkite is one of the newer players on the location based social networking scene.

I was blessed with a Brightkite invite by Mr. Jon Sykes. While Jon has been singing it’s praises, I’ve been more on the fence. Being a big fan of Twitter, I wasn’t sure I needed another Twitter-like service to keep tabs on and update. Plus there’s the selling point of the service, it’s all bout location, location, location. Whenever you’re at a new location, you can check-in via your phone, computer or other mobile device. With your location set, you can then post notes and photos about that location. Notes and photos are essentially twitter-like messages with the ability to post photos. While I can see the value in this for those who work/live in large cities or those who are big into the social scene, it was hard to see the value for someone who’s location may not change that often or who doesn’t have the flexibility to spontaneously meet-up with friends.

Over the past couple weeks I’ve used the service on and off. And honestly, it’s been fun seeing what friends are up to and the photos they’re posting. The challenge for me has been finding where Brightkite fits in my “digital lifestyle”. I already use Twitter for posting short messages and Flickr for posting photos. But lately I’ve been more selective about the photos I post on Flickr and the messages I post on Twitter. I’m not posting as many “going to the store” type of posts to Twitter and I’ve refrained from posting lower quality photos (such as cameraphone) to flickr. But now I’m finding this is the space where Brightkite fits in nicely.

With Brightkite you have various privacy settings available to you. At the high level, it’s public or private. Public is no holds barred. All info about your checkin location will be posted. Private on the other hand has a subset of privacy settings for how to handle your photos, notes and location while you’re in private mode. You could choose to display your exact location to only your friends while the non-friends will only see the city from which you posted. These settings are applied on a per-post basis. So while you’re home you can set your privacy level to private and all posts while in private mode will be marked as such. Then while your out and about getting lunch, set your privacy level to public while you’re at that location. All posts marked private previously will remain private. My only pet-peeve with this is that if you mistakenly post a photo or note as public, you can’t change it to private. You’ll need to delete that post if you’re concerned about the info being public. What I would like to see when it comes to the privacy settings is the ability to set privacy by location. For example, being able say “When I checkin at home, automatically set my privacy level to private”.

I’m now using Brightkite to post the short location based posts I would normally restrain myself from posting on Twitter. Because that post is now within the context of the location it was posted from. And I can set the privacy of that post so only my trusted friends will be able to see it, making Brightkite more personal than something like Twitter. While you can make your Twitter stream private, it’s an all or nothing option, you don’t get the level of privacy controls you get with Brightkite. I’m also using it to post location based photos that I normally wouldn’t be posting on Flickr. In addition to the personal aspects I’m using it for, I can see it being a great tool while traveling or attending conferences.

While I gave Brightkite a hard time at first, I’m beginning to see where it could fit in the current social networking ecosystem. Will I stick with it? Who knows. Ask anyone I know, I’m the most fickle person when it comes to… well, anything. Currently Brightkite is in private beta and is invitation only. I currently have 5 invitations left, so if you’re interested in checking out Brightkite and you want an invite, drop a comment on this post.

iPhone 3G
Very nice. I really dig the white variant. 3G speeds are obviously a good thing. The suits will love the Enterprise Exchange integration and will probably prove to be the killer app of this iPhone. The addition of GPS is huge. This will fuel a slew of awesome location based services. The price drop is very welcome, but still won’t get me to by one since it’s still chained to AT&T.

iPhone 2.0 Software
This is what I was really waiting for since I’m an iPod Touch owner. I was expecting more in the way of new features, but I’m sure the addition of the SDK and App Store will more than make up for it. I’ll be plunking down my $9.95 nominal payment come early July. Oh, and three words. SUPER MONKEY BALL.

MobileMe
.Mac rebranded. The angle this time is “Exchange for everyone”. Which is odd because if by “everyone” they mean people not in an office environment who don’t use exchange, that may be an issue. Because office workers are the only ones who would really know what “Exchange” is. Sure, there’s small business and non-microsoft shops. But they more than likely have their own solutions (Google Apps?). Essentially MobileMe is a glorified way to sync your Address Book, Email & Calendar with your PC, Mac, and iTouch device. I’d call this a minor improvement over the current .Mac and that it falls short of it’s potential.

Big Ideas (don’t get any) from James Houston on Vimeo

Now this is pretty awesome. It’s a remix of the song “Nude” by Radiohead using old malfunctioning electronic equipment.

“I asked him if he’d come up with a few options. And he said “No, I will solve your problem for you. And you will pay me. And you don’t have to use the solution; if you want options, go talk to other people.””

“You never call it art. Art is if you’re lucky.”

Back in the dark ages of web markup, the most reliable way to layout anything was by using a table. One of the best utilization’s of the table-based layout was laying out a form. We’ve come a long way in breaking away from laying out forms in tables. There are plenty of techniques for doing this that have already been discussed, so I’m not going to rehash that. Some would even argue that tables are still the most reliable to layout forms.

There’s one aspect of table based layouts that has eluded the non-table based layouts. The magic of the table cell. Or more specifically, the magic of multiple table cells working in unison. If the width of one table cell expands, all the others in the column follow along. This is especially useful when it comes to laying out forms. When laying out a form with tables, one cell is defined as the form label and the adjacent cell is the actual form element. This is repeated down the table columns for additional form elements. Instead of having to explicitly define a width for the label cell, the form label widths can be defined by width of the cell with the longest text label. This helps keep the form elements and form labels properly aligned without having to define an explicit width for each individual form label.

When it comes to non-table based layouts, each element is independent of the other. If the text size in one form label is longer than the others, the other labels don’t care. They stay right where they are with their own defined width. To get the form labels and elements properly aligned, you need to explicitly define the width of all your labels. Which can be a totally acceptable solution if you know what the content of every form will be and how long the average form label will be. But when it comes to dynamic systems that may have a single form layout framework used for all forms throughout the system, you may never know what text is thrown into the form labels or how large the form may be. Leaving you’re explicitly defined form structure in a highly dynamic system to become inconsistent at times.

Two forms with explicitly defined widths with varying length text labels

So why go with the non-table based solution? Flexibility. The flexibility you have with your form layouts far outweigh this one issue. Want you’re labels to the left of your form element instead of the top? Or maybe on the right instead of the left? It’s a matter of just changing the CSS declarations related to the label. To do that with a table based structure, you need to restructure the table. And within dynamic systems that may have that form distributed through several files, you could be in for a lot of hurt in updating that table.

Which brings us back to the special magic of the table cell. For a long time it’s been defined in the CSS 2.1 specification that the “display” property could not only define the layout of an element as block or inline, you could also define it as table, table-row, table-cell and various other table properties. These table based display properties allow you to define other elements, such as divs, to take on the structural properties of these table elements. But support for these property values has been spotty or non-existent in most of the major browsers. But this will be changing with the upcoming crop of new browsers.

In trying to come up with optimal form layout markup for one of our clients at the Hive, I wanted to find a solution for the form label issue described above. The following is some sample markup of a simple form.

 <div class="myForm">
    <div class="row">
      <label for="text1">Label</label>
      <input type="text" name="text1" />
    </div>
    <div class="row">
      <label for="text3">Here's a super long label</label>
      <input type="text" name="text3" />
    </div>
    <div class="row">
      <label for="text2">Another label</label>
      <input type="text" name="text2" />
    </div>
  </div>

The goal is for all the labels to be align flush right against the form elements, have both the form elements and labels aligned vertically, and have the overall form aligned to the left of the containing element. But I don’t want to assign a width to the label because due to the dynamic nature of the form, I won’t know what the length of the label text will be or how many elements may makeup the form on a given page. For example, if I define the label width as 200px and there’s only two form elements with the labels of First and Last, the form won’t be aligned flush left of the containing element due to the large label width and short text strings within it.

This is where the table based display properties come in handy. I’m able to layout my form using semantic markup, but I’m then able to define that semantic markup to use some of the layout qualities of a table. I’ve essentially defined a sudo table by declaring these table based values in the display properties of various CSS element declarations.

.myForm{
  display: table;
}
.row{
  display: table-row;
}
label{
  display: table-cell;
  text-align: right;
  padding: 0 5px 10px 0;
}

This works in Safari 3.1, Opera 9, Firefox 3 (RC 1) and the IE8 beta. The IE8 beta is a little flaky, but it’s an early beta and there’s still more work to do on the CSS front for IE. Firefox 2 support is partial and IE6/7 support is non-existent. So use of this technique will depend on which browsers you choose to support.

Is this a solution to be used every time you create a form? No, of course not. This may even be an edge case for most people as their forms may be pretty straight forward. But there often times I find myself with the need to have the actual text of the label define width of the form labels. As with all design decisions, it really depends on the context within which your using your form and the problem you’re trying to solve.

You can view example of this technique here