Camino 1.0b2 is here

Camino 1.0b2 is now available for download, I've been using it since last night, so far it has zero bugs.

It's not quite up with safari on quality, but it's a very nice browser and has some great features, certainly a *lot* better than firefox.

How to become an independent programmer in just 1068 days

Gus Mueller (author of some popular mac indi software) tells how he became an independent developer.

read more | digg story

CSS shadows using multiple bg images

A css shadow tutorial which was posted on digg inspired me to demonstrate how cool safari's ability to do multiple background images is.

With the story, they show the method I've been using for ages to apply drop shadows to an image. Read the article for the full description of how to implement it, but the basic idea is to apply some background images, margins and positioning css to the following html:

<div class="shadow">
   <img src="shufflegirl.jpg" />
   <div class="topleft"></div>
   <div class="topright"></div>
   <div class="bottomleft"></div>
   <div class="bottomright"></div>
</div>
<br class="clear">

As you can see, it's pretty messy. A lot of code for something that should be simple.

Starting with version 1.3 of safari (which was released *ages* ago, we're now at version 2.0.2), you can have more than one background image on a single element. This means you can apply the exact same background images using this html:

<img src="shufflegirl.jpg" class="shadowed" />

And this CSS:

img.shadowed
{
   padding: 0px 2px 4px 2px;

   background-image:
      url(shad_tlcorner.png),
      url(shad_trcorner.png),
      url(shad_blcorner.png),
      url(shad_brcorner.png),
      url(shad_top.png),
      url(shad_bottom.png),
      url(shad_left.png),
      url(shad_right.png);

   background-repeat:
      no-repeat, /* top left */
      no-repeat, /* top right */
      no-repeat, /* bottom left */
      no-repeat, /* bottom right */
      repeat-x, /* top */
      repeat-x, /* bottom */
      repeat-y, /* left */
      repeat-y; /* right */
      

   background-position:
      top left,
      top right,
      bottom left,
      bottom right,
      top,
      bottom,
      left,
      right;
}

As you can see, the CSS isn't much simpler using multiple bg images, however the html is one line of code instead of eight! And even more important, his method uses float left, which might not always be desirable. With my method the image behaves exactly the same as an image without a shadow.

I should note that there are two differences between my shadow and his. First of all he's using a combination of border and bg color to generate the left and right "shadow". I prefer using an image on the left and right, though both methods work fine.

And secondly, his example puts a 5px white margin around the image, which looks very nice. To implement this in mine, you would either use different images (and I was too lazy), or apply the shadow to a div that's around the image, with a margin on the image. I did test the second approach and it works fine, however once again you need to float the div, which requires more code and won't fit in well with some page layouts.

So can you use the multi bg image method in your website? As usual this comes down to too factors, how many of your visitors will the shadow break for, and how badly will it break.

On my website (codeservant.com), 55% of all traffic is either Safari or a Safari based browser. This drops down to about 10% FireFox, 5% IE, 3% Camino, and so on. So for me, it's probably perfectly fine to use safari only features, so long as they don't break too bad on other browsers.

And this one doesn't break badly at all, there's simply no shadow on other browsers. Just a slight padding around the image (which isn't noticeable). And since it's entirely based on standard CSS 3, future versions of FireFox and IE should be capable of rendering the site perfectly.

So, if I had a database full of photos on my website, and wanted a shadow around all of them, I would use the multi bg image method.

The iPod of home computers

Apple has announced a brand new iMac. Basically they took the previous iMac G5 and added a whole lot of new features, both hardware and software.

It's got a built in iSight for video conferencing (apparently it's even higher quality than the normal iSight, which is already way above standard for webcams). It's obviously intended for video conferencing, but we all know how that works (If you don't, google for iChat AV), what I want to talk about is the new application called Photo Booth, which is for taking pictures of yourself with the iMac. It's a tiny app but really fun, basically it uses the iSight to take a picture of you, complete with live preview of what it will look like on the screen, you can easily pick from a handful of fun special effects to apply to the picture (everything from sepia tone to high end core image filters like Light Rays). Just incase you're in a dark room, it will flash the screen white at full brightness to create a primitive but effective "flash", and the whole UI is done with slick animations and sound effects that generally just make the whole app fun to use. It's pointless but extremely attractive and entertaining, and as steve said this is going to hurt productivity for a good few hours after you stick one on your desk.

But even cooler than a built in video camera is the new "Front Row" feature. Which is similar to what I assume windows media center would be like (I've never used or even seen media center). It allows you to easily use your mac to listen to music, watch DVD's, browse your photo library, and watch any home movies/music videos/tv shows/etc that you have on your mac. All of this is done with a well designed user interface that can easily be used from the other side of a large room, it's controlled by a 6 button remote control that comes with all new iMacs, the remote control and user interface is somewhat similar to what you see on an iPod with the exception of a lot more "goo" since it's running on fast hardware. Actually, I'm pretty sure it's very different from windows media center. The [hilarious] slide comparing Apple's remote to the ones used with WMC was enough to make that very clear.

And that's just the major two features, there are tons of other improvements ranging from a significant speed bump on the CPU and GPU, to an ambient light sensor tied to the brightness of the throbbing sleep LED that allows it to be clearly visible in a bright room without disturbing your sleep if you have it in your bedroom.

To top all that off, they also managed to make it thinner, while still being able to drop the price of the 17" SuperDrive model to what the 17" Combo Drive used to be (which they have discontinued). The 20" model also was graced by a $100 price drop.

Oh and they also released a video iPod, and you can buy a handful of TV shows on the iTunes music store (I'm sure more will come, this is the TV producers dipping their toes in before wading out into what is almost certainly pleasant water). I love the new iPod, and iTunes 6 is pretty cool stuff too, but the iMac overshadows them in my opinion.

I'm calling it "The iPod of home computers" because I feel this is the first computer that's truly perfect, which is exactly what I thought when I replaced my cd walkman with a 4G iPod. I don't really fit very well into the iMac's target market, but I might buy one of these.

Good Code will pay off later

Late last night, I started work on a "list view" class in php, pretty much the same basic concept as an NSTableView in Cocoa/AppKit. The main aim of the class is to make it extremely easy to create a list of tabular data via PHP (mainly for use in control panels).

In my attempt to achieve ultimate simplicity, I designed the setColumns() method like this:

$listView->setColumns("First Name", 130,
                      "Last Name", 130,
                      "Email", 170,
                      "Phone", 100);

I was quite happy, hardly any code at all to specify columns! This is good right?

But after it was all working, I realized how fast this would degrade to chaos if I ever wanted more than two arguments for each column... So I re-worked the whole shebang to work like this:

$listView->addColumn("First Name", 130);
$listView->addColumn("Last Name", 130);
$listView->addColumn("Email", 170);
$listView->addColumn("Phone", 100);

Or like this (which is handy if the columns are stored in a DB):

$listView->setColumns(Array("First Name", 130),
                      Array("Last Name", 130),
                      Array("Email", 170),
                      Array("Phone", 100));

It was a good half an hour of coding where I basically ripped the guts out of the whole class, and replaced it with something fundamentally different. Not to mention it's quite a bit more code now to specify the columns for the list view, but I went to sleep happy with the fact that I'd written Good Code.

----------

This morning I actually used the class in the real world, and within a few minutes realized a major flaw. I needed it to work with keyed arrays (I refuse to use the A word), which means I need to assign a key to each column! Since not all uses would involve a keyed array, I also wanted the key argument to be optional. Now it looks like this:

$listView->addColumn("First Name", 130, "firstname");
$listView->addColumn("Last Name", 130, "lastname");
$listView->addColumn("Email", 170, "email");
$listView->addColumn("Phone", 100, "phone");

It took fully 4 lines of code to implement that in the new class, and it worked flawlessly while still being fully backwards compatible. Wohoo. But what if I had kept the original setColumns() method? I would have had to make a whole bunch of changes all over the class, and worried about bugs that might have been caused. Not to mention any existing code using the class would have instantly broke.

Motto of the story? Good Code will pay off later.

Blog Skin

A few days ago I changed the skin to Minima, and since then I've been making minor tweaks a few times each day:

• Content is now in the Eurostile font (thin and kind of squarish), which I'm pretty sure is only in Mac OS X 10.4 +. It's my absolute favorite font.


• The header font is Zapfino (advanced calligraphy font), which has been standard on Mac's for a long time, probably not standard for windows either.


• I've changed the width of the content from a fixed size to a size specified in em's (grows/shrinks when you adjust the font size). I pretty much did this to experiment. I've never really used it in clients websites since it can be difficult to work with, so the more practice I get with it the better.


• After the sidebar ends, the post content will now wrap underneath it, this is because I tend to make long posts and the page height was getting out of hand.

I did make a few other very minor changes and might make more in future. But the major ones are done now, so I won't be playing with it too much going forward.

Unleashed

I just returned from watching Unleashed. A movie I've been anticipating since I first saw the preview, many months ago at Apple's Quicktime Trailers website. I know, it's even been screening in Australia for ages. I've been way too busy lately!

Anyway, on to the movie. It was exactly what I expected. An intelligent (mostly) drama with a touching story line, threaded with some of the most brutal fight scenes I've ever watched.

I really enjoyed this film, though I imagine not everyone would.