A very odd thing happened to me today. I was in the Apple store buying an iPod touch for myself when not one but two men trying to buy “a couple of iPhones” were told about a brand new Apple Store policy, effective as of 10am today (10/25/07), that stated that customers wanting to buy two or more iPhones must pay by credit card.

What made this odd besides the fact that Apple felt the need to institute this policy was the reaction the guys had when informed of the policy. They flipped out and walked out after berating the manager. Later, I encountered both jabbering on their cell phones out in the mall. Clearly, some business model was being disrupted.

Now, a two things are odd about this:

1. Why the heck is Apple so keen to put the kibosh on people reselling the iPhone? Money’s money, right? Now, I can understand them objecting to a guy unloading an iPhone or two that just happened to “fall off the back of the truck,” but these guys were paying full retail plus tax. Who cares if they eBay them?
2. Speaking of which, who the hell were these guys reselling the phone to? Again, they were paying full retail plus tax, which implies that somewhere down the line, some poor sucker is willing to pay more than that. So I ask again, who the hell is this poor sucker.

Anyway, this was odd. If you have insight into this, I’d love to hear it in the comments below.

I was browsing the Google Analytics reports for my various sites, and I noticed some trends that surprised me. Since the numbers you tend to find aren’t broken out in meaningful ways, I thought I’d share my findings with you.

First, the numbers:

Surprising Conclusions

1. Holy cats! Firefox surpassed combined IE6 & IE7 usage for the first time in the Creative/Technical audience with a 47%/43% split.
2. There is a remarkable disparity between usage patterns between my sites aimed at technical or creative audiences and those aimed at consumers. While I expected there to be some difference, this disparity is much larger than I expected. Only 43% of the Creative/Tech audience use IE6 & IE7, while 81% of the Consumer audience do.
3. A year after its launch, 39% of the Consumer audience still uses IE6. <rant>This represents a complete failure on Microsoft’s part to manage the upgrade transition well, and is nothing less than a nightmare for developers.</rant>
4. Vista is a bomb. 9 months out, and it has only 12% of the Creative/Technical market and 9% of the Consumer market.
5. Mac use on the Creative/Technical sites outnumbers Vista use 2-to-1 (Mac 7,395 visits in the last 30 days vs. 3,521 Vista visits in the same time period).

First, let me disclaim that this is hardly a scientific study. I just found the results interesting, and I thought you might, too.

As I was comparing the numbers between various sites, I noticed a natural grouping in terms of percentage variance between my Creative/Technical-oriented sites and my Consumer-oriented sites. Breaking these out revealed these surprising numbers. The aggregated numbers above are taken from a little over 60,000 visits from 6 sites (3 of each type) in the last 30 days.

I debated whether or not to include the underlying raw data. Since these are client sites, I’d rather not share the actual hard data, so take my findings and conclusions with a grain of salt.

Feel free to comment/react/challenge below.

For a while, now, I’ve had the Sphere Related Content plug-in for WordPress turned on. My hope was that you, my loyal reader, would have an interesting and relevant avenue to related contentent, and likewise, the widget would drive traffic back to StringFoo.

Well, like my dreams to become an F1 world champion (congrats, Kimi) and to score a winning World Cup goal, my dream of Sphere driving torrents of traffic to my site lies dashed and broken on the jagged rocks of reality. Never once have I had it return a related story that was actually related to the blog entry in question. And there’s no indication that Sphere has driven a single visitor my way (if I’m wrong, please comment below…). So what’s the point? Sphere appears to be just another Web 2.0 overly-funded venture that doesn’t work well.

By their own admission, “the Sphere Related Content widget works best on topics that are being actively discussed in the blogosphere and news media.” Since web development is hardly discussed at all, let alone actively in the blogosphere (my 3rd most hated word in the English language) and news media, I suppose the poor widget didn’t have a chance.

So farewell, Sphere, we hardly knew ya.

[Update: 11/04/07 5:30p] Several readers wrote to say that they had, indeed, found my site through Sphere. I stand corrected…

MacWorld and Agile Web Solutions are offering 1Password (a.k.a. 1passwd) for free.

1Password seamlessly manages all of your browser’s passwords, logins and identities. The magic of this program is its ability to let you manage one set of passwords and have them available across all your browsers via your keychain, or across your various computers via .Mac sync. It is part of a three-tiered strategy I wrote about a while back, “Strong Password Strategies.”

Until December 19th, Macworld newsletter subscribers can get 1Password for free via this page. While this is a fully functional version, the license offered with this special does not include upgrades nor access to the my1Password online service. Still, this is an incredibly useful program, and you can’t beat free!

Over the years, I’ve managed to build up a massive font library, and I’ve always used Extensis Suitcase to manage it. One complaint I’ve had with Fusion is that it is a pain to launch the app before opening a file that needs a particular file, and keeping it open all the time isn’t a practical option because it runs like a regular app. This hiccup in my workflow is tolerable, but it could be better.

Well Fusion may* be kicked to the curb this Friday when Leopard ships. One of the new features in Leopard’s updated Font Book is Auto-Activation:

Automatically activate fonts as you need them. When an application requests an installed font that’s currently disabled, Leopard activates that font and keeps it active until the requesting application quits. [link]

* Now, I reserve the right to be wrong (as I so often am). While Auto-Activation is great, it still appears that Font Book lacks Fusion’s super-handy auto-classification feature. This invaluable tool pre-categorizes your fonts into Serif, Sans-Serif, Ornamental, etc. With a huge library, this comes in very hand for quickly finding that perfect font.

So perhaps Fusion will get a reprieve at the last minute. I’ll experiment with this and report back soon.

I have an Automator script (available here) that pulls down the large version of NASA’s astronomy picture of the day (APOD) for use in my screen saver. Totally geeky, I know.

Most days, the images are your average star field or Hubble image, but every now and then, they throw up an image that just takes your breath away. Today’s is such an image.

Script Details

The script is simple, really. It logs into the site, “clicks” on the image to get the larger version, and saves it to a folder on your system.

1. Save the script
2. Open the workflow
3. Specify where you want the script to save the downloaded image
4. Save it as an Application
5. In iCal, set an alarm to go off and make that alarm open the Application you just saved in #4
6. In System Preferences, open Desktops & Screen Savers
7. Point the Screen Saver to the folder you specified in #3.
8. Sit back and enjoy your computer’s idle time.

Cache Lite (or Cache_Lite) is a PEAR package that takes the pain out of server-side page caching. If you have a site with more than a moderate amount of traffic, or simply want to ease the server load rendering a particularly complicated PHP page, you should consider using this Cache_Lite.

Caching Overview

Let’s take the example of a real news site I built for a client, McKinneyNews.net. There is a lot going on on the front page: the main body has a story flow that is updated several times a day, blog posts are summarized as needed, and windows to other parts of the site (e.g. calendars & sports schedules) are shown via widgets in the sidebars. All of this dynamic content comes at a huge server performance penalty. Simply put, the home page is expensive to render.

This is where caching comes to the rescue. In the case of news and blog posts, these are updated several times a day, but certainly don’t need to be re-rendered with every page view. In fact, the front page changes perhaps a dozen times a day. Thus we do the heavy lifting in the back-end when content is published, not every time site visitors request the page. On heavy pages like this, caching can decrease load times and improve server performance dramatically.

Cache Lite

When looking for a caching solution, I was concerned with three things: 1) ease of implementation, 2) modularity so it could be used for blocks of content, not just entire pages, and 3) security.

Implementation couldn’t be easier. Simply install the Cache_Lite package (or request that your host install it for you). As a super-user in a terminal, type the following:

pear install Cache_Lite

Now you’re ready to start using Cache_Lite. A very good tutorial on the use of the Cache_Lite package can be found here, but the basic structure is as follows:

<?php
// Include the package
require_once('Cache/Lite.php');

// Set a id for this cache
$id = '123';

// Set a few options
$options = array(

    'cacheDir' => '/tmp/',
    'lifeTime' => 3600

);

// Create a Cache_Lite object
$Cache_Lite = new Cache_Lite($options);

// Test if thereis a valide cache for this id
if ($data = $Cache_Lite->get($id)) {

    // Cache hit !
    // Content is in $data
    // (...)

} else { // No valid cache found (you have to make the page)

    // Cache miss !
    // Put in $data datas to put in cache
    // (...)

    $Cache_Lite->save($data);

}

?>

Since it is a rare case that an entire page is presented to all users identically (e.g. if the page contains a slug that welcomes a user by name), caching only parts of a page becomes a necessity. Instead of using the code above to draw an entire page, use it to draw only a portion of it (e.g. a news block), leaving the other, lighter portions of the page to be rendered dynamically with each page draw.

Likewise, let’s say that the block you want to cache can be drawn one of several, finite ways. Let’s take for example the case where only part of a story is shown to users who are not logged in, while the full story is presented to those who are. If you are not careful, you could cache the whole story and present the logged-in state page to users who are not logged in. The key here is to pick an $id that is unique and state based, and call it back based on that same state.

Finally, security: Cache file corruption because of concurrent read/writes is always a concern, but Cache_Lite takes care of this via hashing and checksums. If the data has been tampered at all or is incomplete due to a write-in-progress, live content is used.

In the time it has taken you to read this article (and thank you for doing so!), you could have Cache_Lite up and running on your site. It’s that simple. Read the documentation (it’s painless) and give it a shot. Your server and your users will thank you for it.

Back in the day, I produced video games for a living, so when I heard that sprites were a great way to improve site performance, I had to put my way-back hat on.

A sprite, if you don’t know, is a single graphic file that contains many elements used to display, say, tiles in your favorite side-scroller (Metal Slug, anyone?), or, in this day and age, background elements on a web site. Instead of displaying the entire file, only a portion of the graphic file is revealed. Fortunately, this is a simple thing to do with CSS’s background property.

The performance gains on a web site are achieved by grouping elements together to reduce the number of http requests made to the server. For each graphic element, JavaScript file, and CSS file on your web page, your browser makes a separate http request to the server, complete with browser info and a bunch of overhead crap that you don’t need. Combining, reusing, and reducing are the three keys to performance.

Excellent candidates for CSS Sprite optimization are gradient backgrounds, rollover-buttons, tab elements, or rounded graphic box elements. Creating a sprite is easy, but tedious. You’ll want to do this only once the design is locked, since going back and making changes can be a pain.

For the purposes of this article, let’s look at a recent example of how CSS sprites reduced page load times dramatically. TheFreelanceNation.com is a client site I did recently where the design was handed to me. The site consists of many rounded “gel” elements, each of which required 9 graphic elements.

By grouping all of the page elements into two files–one for the rounded corners, and another for horizontally repeating elements–the number of overall http requests dropped by almost 70% (120+ down to 35 or so). I was able to reduce this further by grouping and compacting JS files and CSS files, but that’s a topic for another day.

In Photoshop, open the elements you want to group together. Then add each to a master file, making sure to draw guides on the boundaries so you can easily measure the pixel locations later. The rule of thumb is to group elements that repeat together. Meaning if you have elements that repeat-x, you’ll group them in a tall file. Elements that repeat-y will go together in a wide file. Save this in an optimal file format (I find that 8-bit, PNG, difussion dithered is best for all but the most colorful sprite files, in which case 24-bit will do). Experiment in Photoshop’s Save for the Web dialog to get the best result.

Once you have your grouped file ready, adapt your CSS files as follows:

.orangeBG {
background:url('/images/sprites.png') repeat-x 0 0;
height:20px;
}
.greenBG {
background:url('/images/sprites.png') repeat-x 0 -20px;
height:20px;
}
.blueBG {
background:url('/images/sprites.png') repeat-x 0 -40px;
height:40px;
}


…etc.

Notice two things:

1) is the use of shorthand. The background shorthand syntax is “background:[url] [repeat] [xpos] [ypos]. While this isn’t strictly necessary, it makes things a lot cleaner.

2) the starting point of CSS element within the sprite is measured in negative pixels. (It took me a while to figure this one out.)

Play around with this. The technique is surprisingly simple once you get the hang of it, and the results can be stunning. You’ll find initial page loads to be faster, and subsequent cached reloads to be much snappier.

This is one of the better diversions I’ve come across in a while. If you have a few minutes and are interested in watching top-level designers flex their creative muscles for no other reason than to beat the virtual snot out of each other, check out Layer Tennis.

In Layer Tennis, two designers send a composition back and forth, making changes and updates along the way. The results are judged by the peanut gallery in their forums and at the end of ten rounds, a winner is declared.

What makes this so interesting is watching the design transform week to week and seeing first hand how creative expression can work as a form of literal communication. I’m in awe of people that can do design well, and Layer Tennis is a rare treat.

Link: Layer Tennis

One of my must-have utilities on the Mac has just revved to v.2. TextExpander explodes snippets of typed text into full blown glorious text.

For developers, TextExpander is a boon. Think Dreamweaver’s snippets, but easy to use and universally accessible. It also makes you look like you care when you have to whip off a reply to a “I lost my password” email on one of your clients’ sites. Simply type ‘youreanidiot’ and you get “I’m sorry you’re having trouble logging in. Have you tried our password recovery tool located here…”

For existing TextExpander owners, v2 is a free upgrade. That’s a bonus in this day and age. For new folks, there’s a 30-day trial, but you’ll plunk down your $29.95 about 5 seconds after your first Text Expansion. This tool’s brilliant.

Link: TextExpander for Mac OSX v.2