Getting Ready for Snow Leopard

Apple’s new operating system, Snow Leopard, hits the shelves tomorrow morning. Here’s a quick guide to get you through the upgrade process with as little pain as possible.

Check Your Compatibility

Snow Leopard is the first Apple OS to abandon the old PPC architecture that Macs  used to run on. This means that only Intel-based Macs will be able to run it, but what Apple have been somewhat quiet about is that old apps written for the PPC and not upgraded to use Intel probably won’t work either.

There’s a compatibility list of applications for Snow Leopard, so check carefully everything that you rely on beforehand. One of the biggies on the list is Adobe CS2 – still in use by a lot of people due to the high cost of upgrading.

Those used to Growl notifications may have to wait a little while for a new version of the app – there are conflicting reports as to whether it works properly. Also be wary of old versions of Parallels, which will no longer run.

Make Your Backups

It always goes without saying to backup your important data before modifying your OS. If you want a failsafe solution, you can use SuperDuper to create a bootable backup of your Leopard install on an external hard drive. You can then fallback on this install by booting your Mac with the Option key held down.

Have a Clear Out

Take the opportunity to have a clear out of your Applications directory before you upgrade. Remove anything you haven’t used in a while and take out any applications that extend or modify your existing Leopard install. Things like this rarely survive the transition between versions and will generally do more harm than good.

Do A Fresh Install

Reports are emerging that the Snow Leopard “Upgrade Disk” will actually install Snow Leopard regardless of whether there is an existing Leopard install. If you’ve got your data backed up and well-organized and you really want a fresh and clean OS then you can wipe your existing hard drive and install Snow Leopard from new.

PNG Transparency In Internet Explorer 6

Web designers the world over know what a battle it is to support IE6, and nowhere is this more obvious than in it’s lack of PNG support. There are of course Javascript options such as pngFix, but there are issues with this:

  • adds approximately 40kb to your page weight
  • uses Microsoft’s “behaviours” extension so not standards-compliant
  • patchy support if you’re swapping out images through Javascript / CSS

What I’ve started to do instead is use a PNG optimizer to convert images to a lesser-known PNG format not supported by Photoshop. Photoshop’s Save For Web function will only save images out as:

  • 24-bit colour-depth, 8-bit transparency (24+8)
  • 8-bit colour-depth, no transparency

When displayed in IE6, the former will show up as a light blue-grey wherever the transparency was intended. The latter will render as it should, but with no transparency it defeats the point of using the PNG format (you may as well use an 8-bit GIF with binary transparency).

The trick is to save your image out using the 24+8 bit format and then use either pngquant or optipng to shrink this down to a different PNG format (8-bit colour-depth, 8-bit transparency). This is still not entirely supported by IE6, but it is better. IE6 will render the image treating the 8-bit transparency as binary transparency (similar to GIF transparency). This allows alpha transparency support in Firefox, Safari etc. but with a more graceful degradation for IE6. It also makes your PNG images smaller!

Using Mac Fonts in PHP

PHP’s GD functions allow you to write text onto an image using any fonts you have available to you. There are different functions available for the different types of fonts. First, we’ll go through how to get the font files from your Mac.

Fontbook

Open up “Font Book” from your “Applications” folder and you’ll see all the fonts installed on your system and available to you. You can scroll through and preview them as you normally would.

Ctrl-Click on a font in the list and click “Reveal in Finder” to open a new Finder window with that font highlighted. If you highlight a grouped font (i.e. one that has Regular, Bold, Italic etc under it, then all of the files will be highlighted).

Multiple Export

If you need to work with a few fonts, then you can highlight multiple fonts using the usual Cmd and Shift keys and then select “Export Fonts…” from the “File” menu. Pick a folder to save them in and all the font files will be copied there for you.

Extensions

Now that you’ve got the files, you need to look at the extensions of the files to figure out which type they are:

  • .ttf (True Type font)
  • .otf (OpenType font)
  • .dfont (Apple Datafork Truetype)

True Type Fonts

TrueType fonts can be added to your GD image using the imagettftext() function.

Apple Datafork Truetype

These are bundles of TrueType fonts used on Mac systems. In order to use these in PHP, we again use the imagettftext() function, but first we have to extract the TTF files from the bundle. For this, we use a program called fondu. More information is available at the fondu homepage, but here’s a quick guide to getting it up and running:

  • Download and unzip the latest version
  • Open up Terminal and change to the newly-unzipped fondu folder
  • Issue the command “./configure”
  • Issue the command “make”

You will now have a “fondu” executable, amongst others, in that folder. Use this command to extract the TrueType files from the Datafork file.

./fondu /path/to/fontfile.dfont

You will now have a series of .ttf files in your fondu folder.

Case-Sensitive HFS Filesystem on Mac OS X Install

After a recent hard drive failure, I changed the drive in my iMac and then set about reinstalling Mac OS X. Whilst carrying out the installation, I came across the option to create the main Mac OS X partition as case-sensitive. As I have a background in Linux and use Linux a lot, the case-insensitive nature of the Mac’s HFS filesystem has always seemed a little odd considering it’s Unix heritage. It’s also proved a bit of an annoyance now and then.

So this seemed like a good opportunity to standardise the two platforms I work on. It was not.

It turns out that although OS X will run very with a case-sensitive filesystem, there is a real lack of support from other applications. In trying to put Photoshop back on my Mac, I was informed categorically by the installer that Photoshop would not run on this filesystem. I’ve since been told that this extends to the entire Creative Suite as well as various other programs.

After searching round the Web for a while, it occurs to me that there’s no easy way to move from one to the other, so I’m face with having to re-backup a load of files and go for a second Leopard install within 24-hours of the last one.

So, case-sensitive Mac filesystems are not a good idea.

Day 2 In The Cloud: Documents

After a successful day bookmarking, I was buoyed up for Day 2 In The Cloud. Today, I was going to tackle the all-to-common problem of not having a particular document to hand when you need it, by starting to use an online word processor and spreadsheet system.

There’s a simple choice in this market – Google Docs. But after an incredible frustrating morning, I’d come across the following problems:

  • I’d keep opening documents and they would display while they were loading, but then go blank. Google’s answer to this was to clear my cache. This apparently works for 90% of users, but I seem to be in the other 10%, who are screwed.
  • Very common and persistent network errors, which basically lead me getting pretty annoyed with the arrogance of this error message:
google_docs_network_error

Google Docs Network Error

Oh, no problem, I’ll just “stop working” for a while.

So, I went on the look for a more obscure solution to this problem. And I came across Zoho. I wasn’t too sure about this, but as it let me log-in using my existing Google Account, it was simple enough to try. What I found beneath the somewhat primary-school interface was nothing short of incredible.

Zoho is a fully-featured and fully-integrated office suite. I can browse files and folders created through Zoho or upload files directly to it from my machine. The word processor and spreadsheet applications that I’ve tried are very responsive and feature-rich. Short of a macro / scripting language, there’s everything that you can get on the desktop.

The sharing features are pretty extensive, allowing you to publish documents as Web pages or e-mail viewer and contributor links out to members of your team. In addition to what I’ve tried so far, there’s also a database application, project manager, CRM, mailbox and meeting scheduler amongst others. In short, you must try this application out as soon as possible.

Day 1 In The Cloud: Bookmarks

In my first day attempting to move my life into the cloud, I’m tackling a problem that bugs everyone at one point or another – bookmarks! Coding across several browsers and several platforms means I normally have bookmarks strewn all over the place, so this seemed like a logical place to start.

The obvious choice for this job is Delicious, but I had tried using it about a year ago and wasn’t too impressed with it. However, after a search for a better alternative turned up nothing, I decided to give ‘em another go and was pleasantly surprised.

After installing a plug-in for Firefox and another plugin for Safari, I was able to send all the bookmarks from the browsers to Delicious and have them tagged with the most popular tags that other people have used. I had an immediately searchable, comprehensive list of all my bookmarks, with all of the duplicates removed.

When importing bookmarks to Delicious, it allows you tag them with an “imported” tag. I then used this to filter them down inside Delicious and clean up the tags, titles, descriptions etc. When done, I remove the “imported” tag so it no longer shows up on that list.

Back inside the browser, I can delete all the locally stored bookmarks and just rely on the Delicious sidebar to manage everything. All my bookmarks and tags are in there and there are convenient shortcut keys for the various actions (Ctrl / Cmd + B to toggle the sidebar and Ctrl / Cmd + D to add the current page to Delicious).

Finally, my favourite feature, is the Delicious toolbar. Sitting where your regular bookmarks toolbar would go, the Delicious one allows you pick one or more tags to display bookmarks from. If you work across multiple disciplines this is a great plus as it allows you to quickly switch between sets of bookmarks (in my case, reference bookmarks for PHP or Java, depending on what I’m working on).

Getting home, I find bookmarks that I’ve added at work are there waiting for me when I get back. All-in-all, Day 1 in The Cloud was a complete success. Tomorrow, I’ve got some documents to work on, so I’ll be looking at online word-processing and spreadsheeting.

Leaning Towards the Cloud

I seem to be in the throws of yet another hard drive failure on one of my machines today and I find myself considering, for the first time, moving into cloud computing. If you’re not familiar with the term, cloud computing is essentially using software services rather than software products, working with files stored for you by various online providers.

Although not new (you could argue that Yahoo Mail is cloud computing and that’s been around forever), it’s only recently that more advanced applications like document production or image-editing have moved online.

My previous issues with the cloud though have been to do with trust. I’m simply not sure how much information I want to store on a company’s server. This data is often said to be anonymous, but is it? I think the best you can hope for is pseudo-anonymity. You account may not be linked to your name, address and other details etc. but all you’ve got to do is store a couple of personal letters there and that anonymity has disappeared.

But as with everything, there’s a toss-up between pros and cons. The cons I’ve just discussed. The pros of the situation are that you have access to your information wherever you are and you don’t have to spend a Sunday trying to restore from a backup or get that last little bit of information off of a dyeing hard drive.

So, I’m going to take the plunge and see if I can make my life any easier by moving everything online. Wish me luck and I’ll let you know how I get on.

Dealing with overflowing text

One of the most common problems in making tight layouts is getting a text summary to fit a box perfectly. What may look right in one browser, will invariably not look as good in another. This is made worse whenyour text needs to fit in with some other vertical size (e.g. an image next to it).

The key to getting this right is the use of the “em” dimension when sizing elements, and the use of the “line-height” css property. An “em” is a unit, equivalent to the character height of the font. So if your font-size is set to 12px, 1.5em would be 18px (12 * 1.5).

Setting the “line-height” property to 1.2em, for example, would tell browsers to render lines of text at a height of of 1.2 times the height of the font. This goes a long way to standardising the appearance of text across browsers, but we want to push it a bit further to make it perfect. By using ems on the “height” property of a <div> tag and setting the “overflow” property to “hidden” we can control the number of lines of text that are displayed. For the height property of the <div> tag, use the numbers of lines multiplied by the number of ems used for the line-height (e.g. 5 lines would be 5 * 1.2 em, which is 6em).

Inline-block links in Firefox 2

A quick post on compatibility with Firefox 2 when using inline-block elements. An inline-block element is one with the “display:” property set to “inline-block” in order for it to flow within text whilst giving you access to block-level properties such as padding and margins.

In a recent project, I used these quite extensively to create links with larger clickable areas that had an background image attached to the left hand side and then some left padding to move the text so the image could be seen. It’s a simple trick, but it will not necessarily work with some version of Firefox 2.

Here’s the trick – we need to use an extended Mozilla property value, called -moz-inline-box (note that’s box, not block). So, the CSS for my links looked like this:

a.More {
  background: url('images/more.gif') no-repeat left middle;
  display: inline-block;
  display: -moz-inline-box;
  height: 16px;
  padding-left: 16px;
}

CSS3 Box-Model: Does it go far enough?

Here’s something I’ve been researching recently – why is there no way to include the margins in the new CSS3 box model. The essence of the CSS3 box model is that through setting the value of the “box-sizing: ” property, you have control over how you define the “height: ” and “width: ” properties.

Value Of Property What It Does
content-box Traditional box-model sizing. Height and width set the internal content area, and padding, border and margins get added on.
padding-box Padding is included within the height and width properties.
border-box Both the padding and the border are included within the height and width properties

But unfortunately, that’s as far as it goes. There is no “margin-box” value and from what I see around the Web, no reasoning for not including it. The inclusion of this would benefit lots of developers when working with liquid layouts – ones that use percentages to lay out content.

Imagine being able to have right and left columns with percentage values that include the margins (i.e. the gap between them). Obviously there are ways around this using nested <div> tags or table cells, but wouldn’t the inclusion of this make everything that little bit easier?