All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

That's handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend. An example:

p {
  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
}

That will produce a paragraph with a 20% opacity black drop shadow that will blend into any background colour below it. A paragraph like this one.

Previously I might have created the drop shadow in Photoshop, then used the eye dropper tool to pull out the composited shadow hex value after the transparency was applied to the background colour. No more!

Over the past few months I've been collaborating with Chris Glass on the newly-launched Joyent site. (When someone comes to you and says, hey, we have Chris Glass helping us out with this project and we'd like the two of you to work together, you jump at that chance.)

I was tossing around ideas for building an interactive infographic Chris had designed, and thought of at least four different ways of pulling it off. We're reaching this interesting point with front end web technology where we now have actual choices besides Flash for jobs like this. I considered CSS3 animations and the Canvas element before ultimately deciding on PNGs with alpha transparency and jQuery transitions and fades.

I put off browser testing as long as I could, but just this week prior to launch I realized it was very broken in all versions of Internet Explorer. I had a plan to back out to a static graphic in IE6, assuming IE7 and IE8 would treat the PNG + animation combo like any other reasonably modern browser. I was wrong.

It seems that IE's implementation of PNGs with alpha transparency is still buggy or incomplete in some way. When you place a PNG with alpha on a static page, you'll never be the wiser. It's when you adjust the opacity of that PNG that you run into problems. Take the following example:

I'm overlaying this slightly-transparent image of three triangles atop a few different backgrounds. So far so good. IE7 and IE8 keep up. But if I apply further transparency to the image in the form of a jQuery fadeIn or an opacity value, things go a little haywire:

That's the same setup as before, only with an opacity value of 0.99 (almost completely opaque) applied to each img element. In non-IE browsers, the previous two examples ought to look the same. In IE7 and IE8 on the other hand, the previous example instead looks like this next one:

Of course, no version of IE supports the CSS opacity property yet, so jQuery instead applies the opacity by exploiting the IE-proprietary AlphaImageLoader filter. This ends up being the root cause of the (seemingly well-known) bug. The suggested fix is to apply the transparency to the parent element instead, but I've had little success with that workaround.

What did work was a little library called DD_belatedPNG that applies PNG transparency via VML instead of AlphaImageLoader. It's designed for IE6, but it works just fine in IE7 as well. For IE8, I was forced to throw out an X-UA-Compatible meta tag and step IE8 down to IE7 mode for this particular page.

It's still not perfect. I noticed a faint white bounding box poking through at lower opacities that forced me to slightly adjust hover effects for all versions of IE. But you know, for all that, it's darn well good enough.

Let's be honest; Photoshop is absolutely terrible at saving transparent PNGs for web use. Your choices are between an 8-bit with 1-bit transparency (better than a GIF in terms of file size, but no better in terms of transparency options) or a huge 32-bit PNG with alpha transparency. There's no middle ground. You can run the resulting files through various PNG reduction utilities (PNGOUT, Pngcrush, or my personal favourite PngThing) but when the savings are a few hundred bytes off an 80KB file, the returns are slim.

I'm not in the practice of using Fireworks, so those of you who do can start gloating now. But as I thought about the problem a bit, I remembered that Fireworks has a few more options. Specifically, I remembered that you can save out 8-bit PNGs with alpha transparency, which seemed like the right mix.

And the resulting lower byte counts were respectable: 95KB › 11.7KB. 28KB › 4.6KB. 38KB › 8.9KB. 36KB › 7.1KB. 45KB › 7.3KB. 28KB › 4.7KB. etc.

When I casually mentioned the smaller files I was able to produce on Twitter I was a little surprised by the response. Seems that a lot of people don't know about this, so a quick write-up feels like it's in order. Here's my process.

1. Save out a full 32bit PNG from Photoshop

Any file format with transparency will do really. You could probably even just open the PSD. But I start here.

2. Load it into Fireworks.

3. In the Optimize palette, adjust the settings to PNG 8.

You'll probably want to go further and find a colour level less than 256 that works with your image for more savings, but this is the starting point anyway.

Figure: an image open in Fireworks with the Optimize panel shown, adjusted to PNG 8, 32 colours, with Alpha Transparency selected.

4.Export.

File > Export, then pick a spot for your smaller file.

And that's basically it. Clearly this only works for images that would normally do well with lower colour levels, you won't be using this for photographic elements any time soon. But for those that work, you can throw the result through one of the previously-mentioned optimization tools to shave off a few more bytes too.

SVG has been around for ages, whereas Canvas is still relatively new. (Mozilla's Vladimir Vukićević has a good overview presentation of the differences between the two, and when and where to use each.) SVG support is built into plenty of graphic editing tools; Canvas support is so far sadly lacking, although Matt May pointed me to this YouTube video that shows off the upcoming Canvas support Adobe's CS5 suite will have, whenever it becomes available.

In the meantime, most of the Canvas demos we've seen thus far have mostly featured simple primitive shapes like lines and ellipses for good reason: it's too hard to build up a reasonably complex vector image by manually plotting bezier curves.

Over the past few days I've tried out various ways to get around this problem. I came up with two methods of taking vector shapes out of Illustrator and rendering them with Canvas, both involving an intermediate step as SVG first.

So to start, from Illustrator (or any other vector editing application capable of doing so) export your artwork to SVG. You'll find the SVG option in the Save As / Save a Copy dialog, and I've found the SVG profile you choose doesn't really make much of a difference (though for the sake of argument I've been using 1.1).

We'll use this happy little cloud image as our reference file:

1) Manually

This method is only theoretical so if you're looking for the actual how-to, skip ahead to #2. I figure it might be worth writing this up anyway because, even though I couldn't get it working, perhaps it'll provide enough of a starting point for someone else to pick up where I left off and build a proper converter.

SVG and Canvas are both essentially vector drawing tools; Canvas is more pixel-oriented, but you are certainly able to plot lines and curves mathematically. Canvas is also limited to fewer primitive shapes, but there are obvious parallels between the two.

I spent a bit of time looking into the bezier commands in particular. In SVG, to plot a bezier curve, you do something like this:

  <path d="C x1,y1 x2,y2 x,y" />

In Canvas, it's this instead:

  ctx.bezierCurveTo(x1,y1, x2,y2, x,y);

Different syntax, but the same basic components: you're drawing a line from the current pen position to the x, y value, and before that you have two additional points (x1, y1 and x2, y2) that set your handles. (More SVG path commands, Canvas path methods.) It's worth noting that SVG is more forgiving about commas; each coordinate must be separated by a comma for the Canvas method, but they're strictly optional in the SVG example. This is relevant because Illustrator's SVG export seems to be wildly inconsistent about when and how many commas each command uses.

Given the similarities, I thought it might be fairly straightforward to manually tweak the SVG output into Canvas drawing functions. M becomes moveTo, C becomes bezierCurveTo, and so forth.

  <path d="
    M 62.58, 31.96
    c -0.711,0 -1.811,0.062 -3.181,0.165
    c -0.566 -6.309 -5.862 -11.255 -12.318 -11.255
    c -2.363,0 -4.564,0.675 -6.442,1.824 "/>

Becomes:

  ctx.moveTo(62.58, 31.96);
  ctx.bezierCurveTo(-0.711,0,-1.811,0.062,-3.181,0.165);
  ctx.bezierCurveTo(-0.566,-6.309,-5.862,-11.255,-12.318,-11.255);
  ctx.bezierCurveTo(-2.363,0,-4.564,0.675,-6.442,1.824);

This did not work. I suspect the absolute vs. relative coordinate difference between SVG's c and C commands tripped me up, but after a half hour or so of poking around this was all I had to show for it:

Still, even if I'd have managed to get it right, I'd rather not have to manually massage my SVG output every time I want a new Canvas drawing. Which leads me to method #2.

2) Automatically

One of the main reasons I bothered to attempt a manual conversion in the first place was because after an extensive search it appeared that people are mostly interested in converting Canvas to SVG. There are very few articles and tools that cover going the other way, which is what we're after. Maybe I didn't come up with exactly the right search term, but I was finding so little I almost gave up entirely.

Then after one last shot in the dark, I managed to stumble across SVGToCanvas, a Java library that promised to do exactly what it sounds like, with a few disclaimers and a major caveat:

• You need Java 6. Otherwise known as 1.6, this comes installed with Mac OS X Snow Leopard but previous versions will need to upgrade. I believe this is the download necessary for Leopard, if you're on an even older version you're on your own. No idea what the Windows situation is, but this might be a good place to start.
• You need to run it on the command line. I know this will freak out some designers, but really, it's not terribly difficult.
• You mainly get outlines for now. This would be the big ugly caveat. Sometimes you get colour and gradients, sometimes you get mixed-up colour and gradients, mostly you don't. Plan to re-add them manually. Hopefully this will work better in a future version of the library, but still, having outlines is a solid start.

Still with me? Great, go grab the JAR file and drop it on your hard drive somewhere easy to find. For now, probably best to drop it in the same folder with the SVG files you're going to convert.

Now, load up the terminal, and find your way to the same directory. Here's a quick command line primer that ought to get you going. The cd, ls, and pwd commands in particular are the ones you need.

(If you need a bit more help than that: put the SVG and JAR files in a folder on your Desktop called 'canvas'. When you open up the terminal, type this minus quotes: 'cd ~/Desktop/canvas'. Hit return. You're good, keep reading.)

Run the converter with the following command:

  java -jar svg2canvas.jar -o cloud.html cloud.svg

From left to right: we're invoking Java with the SVGToCanvas library, then by -o cloud.html we're specifying the output will be written to cloud.html, otherwise it just displays the output in the terminal (which can be handy if you'd like to just copy and paste without managing temporary files). Then finally at the end, cloud.svg is the input SVG file that we had previously generated from Illustrator.

That generates an HTML file which contains a canvas element and the Javascript necessary to render the cloud:

In this case it worked, though it added a stroke. When it's just the outline, you can restore the colour by manually tweaking the code. Add a fillStyle method before the draw, and a fill after:

  ctx.fillStyle(#4a6481);

  ... (drawing commands here) ..

  ctx.fill();

Not too difficult for simple shapes. I'd hate to have to manually re-add the subtle gradients for more complicated illustrations, but it's nice to know the outline conversion is fairly robust:

One more thing: I'd recommend flattening the vector art as much as possible. Join shapes that can be joined, expand effects and compound paths and masks, and generally clean up the artwork to as few points as possible. Smaller file sizes, more chance of success upon conversion.

So there you go. It's still a fairly painful way to get your vector work into a canvas, but until we get some better tools or built-in support for our existing tools, it's one way to fill the gap.

• The iPod, XBox, YouTube, Facebook, Flickr, Ubuntu, and Blu-Ray did not exist.
• IBM was still in the PC business, Handspring was still around, and Blackberries were data-only devices with no telephone capabilities.
• The Euro had not yet entered circulation, currencies like the Franc, Mark and Lira were still legal tender.
• George Harrison, The Queen Mother, Gregory Peck, Barry White, Johnny Cash, Ronald Reagan, Ray Charles, Julia Child, Pope John Paul II, Johnny Carson, Steve Irwin, Gerald Ford and Michael Jackson were still alive.
• SARS, Avian Flu, H1N1 were not in the common vernacular.
• Enron and WorldCom were still in business.
• Oil was $24/barrel, gold was $276/ounce, NASDAQ was at 1912.41, and the DOW was at 10,382.35.
• The Concorde still flew.
• The Petronas Towers were the tallest skyscrapers in the world. (They've been surpassed twice since.)
• Lost and 24 had never aired, there were only four books in the Harry Potter series, and Arnold Schwarzenegger was still making movies.
• Lance Armstrong had only won the Tour de France 3 times. (He went on to win 4 more.)
• The most recent Boston Red Sox World Series win had been 1918 (which remained true until 2004).
• The Netherlands was the only country in the world that legally recognized same sex marriages. (That stands at 7 now).
• Charley, Ivan, Jeanne, Katrina, Dean, and Ike were not names associated with weather.
• 61 Extrasolar planets had been discovered. (Currently that's up to 424).
• Pioneer 10 signals were still being received on Earth.

As a sanity-check before posting I put this video out on Twitter, and received the following tidbits:

• The lack of ability to paste a hex value appears to be a Mac-only bug, in Windows it works. (Thanks @cloudislands, @friskdesign)
• Within the Save for Web & Devices dialog, if you use the eyedropper tool on the left to select a colour within the canvas, and then hit the Matte colour dropdown menu arrows and select Eyedropper Color, that works. (Thanks @kyleridolfo, @Yardboy, @bradleysepos

I seem to have made something of a hobby out of trying to coax useful results out of this type of file. Over the years I've stumbled across far better ways of doing it than manually clipping the background with the the magic wand or various selection tools.

For the next time you're handed a less-than-ideal source image, here are a few of my tricks for isolating the part of the file I want to work with in Photoshop.

I'll use this Firefox promo image as an example. Yeah, I know I can find a vector version of this particular logo online, but it makes for a fairly good demo thanks to the complexity of the background.

Let's start with the text. A single, flat colour ends up being fairly easy to extract. The first step is using the Hue/Saturation sliders [Ctrl / Cmd + U] to drop the saturation all the way down to a value of -100:

Then trim away the surrounding pixels to focus on the area you want:

Next use the levels sliders [Ctrl / Cmd + L] to increase the contrast on either side so that the background is black and the text is white. The trick is doing it in a way that doesn't completely kill the anti-aliasing between the text and the background, while at the same time making sure the foreground/background colours are pure black and white. You don't want stray pixels on either side, otherwise nasty things will happen later on when you try using your results. If you just can't find a balance, use the brush tool to fill in the strays manually.

The best results come from images where the text is clearly a different shade than the background behind it. In this case it is, so I'm able to get a reasonably high-contrast result:

At this point you have two choices. If you don't need the ability to change the colour of the text or apply layer effects, you can stop now and set the layer's blending mode to Screen or invert it (Ctrl / Cmd + I) and set the mode to Multiply. With the either of those blend modes you should be able to place this high-contrast layer over top of a background and it'll be treated as isolated text. The key being placing it on top of non-transparent background; if there are no pixels beneath for the layer to blend with, you won't be able to save it out the same way it renders in Photoshop.

For that extra control you need to take it further. By holding down Ctrl / Cmd and clicking on the image's layer in the Layers palette you can select just the outline; copy that to the clipboard, open the Channels palette, create a new Channel, and then paste the clipboard into that channel. If you've done it right it should look something like this:

Figure: Ctrl/Cmd + clicking on the channel produces selection marching ants in the preview. You can't see the animation, but they're there.

The same way you selected the outline of the image in the Layers palette, you can Ctrl / Cmd + click in the Channels palette and the selection will change to just the border between the background and foreground. If you switch back to the Layers palette and create a new Solid Color fill layer:

The text now sits on an isolated layer that allows you to easily change the colour, apply layer effects, etc.

The icon is more complicated. We've got a strong orange foreground, but the globe and the background share some tones so extracting is going to be trickier. This is a fairly common scenario in the wild, but the good news is that it's still doable in most cases.

Let's be a little more selective about what we're trying extract this time. Start by focusing on the orange fox for now, we'll come back for the globe. The Select > Color Range tool allows you to click an area and select all colours similar to that selection point, and the Fuzziness slider controls how loosely or tightly the selection matches that colour. Selecting the blue area instead of the orange produces a much higher-contrast outline of the orange area:

Once you hit okay you're left with marching ants. The selection isn't useful yet, so back to the Channels palette we go. Create a new alpha channel and fill the selection with white:

Now you can just pull up the Levels palette and, with the same high-contrast result in mind as the previous text example, adjust the levels until the fox is pure black and the background is as pure white as you can make it:

If you hit Ctrl / Cmd + click on the channel then head back to the Layers palette and select the original, you can click the Add Layer Mask button in the bottom of the palette and have the selection mask the image to just the orange areas we've managed to extract:

If you end up with too many fringe pixels from the background, you can hit Ctrl / Cmd + select the mask again, and use the Select > Modify > Contract tool to decrease the selection 1px on all sides. Invert this smaller selection with Ctrl / Cmd + Shift + I, then select and fill with black the layer mask to apply it. This will eat up a one pixel outline around the object, which should take care of the fringe without tossing out too much image data. Though it does depend on the size of the source image.

We now want to add the globe back in, so duplicate the layer and remove the mask to show the original image again. Manually trace the outline of the globe with the circular marquee tool, select the masked layer and fill that selection with white within the mask. And there we go, an isolated version of the Firefox icon that you can manipulate as you please:

Extraction this way seems like a lot of work, but once you get the hang of it you'll find it's fairly quick work to go from a source image to something usable.

For relatively simple jobs like the text, the process is straightforward and can be done in a couple of seconds. For more complicated extraction as in the case of the icon, creative alpha masking combined with a bit of manual tweaking will usually get the job done.

(And I don't have to remind you to always use this for good and never for evil, do I?)

A quick refresher: following a different path than every other browser out there, IE requires a custom-created, rights-managed font file called EOT (Embedded OpenType). The syntax to safely serve up an EOT to IE was shown in that previously-mentioned post. What we're covering here is, how in the world do you create an EOT file in the first place?

Well, there's WEFT, Microsoft's one and only tool for creating EOT files. Let's try WEFT, shall we? Go to Microsoft's site for WEFT and hit the download link. Wait, what's this business about Internet Explorer 4 and Windows 98? Uh-oh.

The most recent WEFT point release was in 2003, but if you look at the screenshots on the tutorial for the most recent major version, you might be able to guess what sort of an experience you're in for.

Figure: This is the era of browser WEFT was built during. Is that IE2? IE3? It's been so long I can't remember.

Obviously it's Windows-only. I grabbed a copy and tried it in Windows XP under Parallels. That went well:

Figure: No WEFT for you. And Windows apps with images as toolbar backgrounds? So Win95.

I've booted multiple virtual installations of Windows XP under Parallels, but that's the oldest version of Windows I have on hand (what a ridiculous phrase to type) and it simply doesn't want to run.

I have managed to use WEFT in the past. Back in the late part of the 90's when it was still somewhat fresh, I distinctly remember grabbing a copy and converting some fonts to EOT. I also remember the GUI being a confusing pile of hurt, and the process being anything but transparent.

Essentially, you need to point WEFT at the page you're trying to embed the fonts in, so a) it can create domain-specific hooks and only run on that site (good luck getting the EOT working locally or on a staging server), and b) so it can subset the character set to only the glyphs you're actually using. The former is an overly-restrictive attempt at DRM. The latter is actually useful for controlling file sizes, aside from the total lack of manual control.

Microsoft mentions on the download page that some people report it working in virtualized Windows under OS X, and I have heard independent reports of it working for other people. But I've also heard I'm not the only one in the not-working camp. I guess if you get it working, consider yourself lucky in a pyrrhic sort of way.

But anyway, forget WEFT. Microsoft has clearly long given up on it. Abandonware isn't going to solve today's modern web design problems, what else have we got?

Searching that problem turned up Edward O'Connor's post from a few months back about his experience installing command line tools that will ultimately generate EOT files.

At this point I'm going to cut a very long story short and say that, despite being fairly comfortable hacking around a Terminal window and installing remote packages and the like, I wasted almost a day doing this with nothing to show for it. I suspect there's nothing wrong with Edward's methods, but some OTF files seem to complicate things in a way it simply doesn't account for. Others reportedly work; the ones I tried didn't.

(As an aside: there are a few web-based tools out there that do similar without the command line hackery. TTF 2 EOT does what its name suggests, and there's a tool called Online Font Converter that supposedly converts OTF files to TTF and a few other formats. I'm not linking to that one because I'm a little suspicious of the site (AdSense-heavy, and the zip files it produced wouldn't open for me), but if you really want to find it just search for the capitalized title in the last sentence. But you're probably better of using FontSquirrel anyway, mentioned below.)

(As a second aside, you might be luckier than I was. You might be able to use any of these tools to go from OTF to EOT and wonder what in the world I'm talking about. Given that I'm definitely not the only one who had this problem, it seems likely that sooner or later you might run into a font that just doesn't want to convert. When that happens, keep reading.)

After spending that time hacking around in the Terminal I was ready to give up on the entire process of WEFT-less EOT files, and then Jonathan Snook happened to mention he had a method. A bit of dialogue resulted in my prodding him into doing a screencast, and voila:

Converting OTF or TTF to EOT

The really important bit here, the part that I couldn't get right before, is the manual adjustment in FontForge. The automated tools mentioned above in the OTF › EOT conversion chain don't account for the namerecord tweaking that seems essential to get an EOT rendering in Internet Explorer. I had previously installed a tool that converted TTF files into XML so I could pull off the namerecord change in text. No such luck. FontForge's awful XWindows GUI tool was the only thing that worked for me. No really, it's ugly; the UI is even worse than WEFT. But it happens to work, which is its saving grace.

Figure: FontForge in all its glory.

Also, between the time I started writing this post and now, FontSquirrel released a @font-face generator that appears to automate the whole process. I haven't had a chance to test yet, so it's unclear to me whether it fixes the namerecord problems or not. If so, great, but one reason to still consider using FontForge is its ability to manually delete glyph records. Being able to drop Greek characters, accents and diacritics, ligatures, and other glyphs that aren't typically used on an English-speaking site is handy when you have 100k+ OTF files that you'd like to embed.

Finally, a couple of related links I've found interesting:

• Becoming a Font Embedding Master, also from Jonathan Snook
• Where to Get Web Fonts from Tim Brown at Nice Web Type
• Typotheque, a foundry that explicitly allows web licensing of their catalogue, hosts them, and offers a really interesting pricing model. Worth a look.

Yes, I know of TypeKit. It's a great idea and there are some solid reasons to consider using it. But I'm still interested in using the native technology from time to time, which is where we begin.

Ignoring the licensing issues for now, the problems are those of syntax and technology. Syntax because Internet Explorer requires you to import a different file than every other browser. Technology because, well, Internet Explorer requires you to import a different file than every other browser.

If you just forget about IE for a minute then @font-face is surprisingly easy to use. Getting started requires a couple of lines of CSS and the right file in the right place. You can have a custom typeface imported into your page with just a little more work than applying a custom background image. Start with the @font-face declaration itself:

@font-face {
  font-family: 'Museo Sans';
  src: local('Museo Sans 500'), local('Museo Sans'), 
         url(MuseoSans_500.otf) format('opentype');
}

What this is saying is: "hey browser, here's a font family called 'Museo Sans'. When you see reference to this font in the stylesheet please check whether the font exists on the user's local computer. If it doesn't then here's a file in OpenType format that you can use instead." I've specified two different faces for the local computer, both the generic family name (Museo Sans) and the specific weight I'd like to use (Museo Sans 500). This may not be strictly required depending on the typeface, but can't a bad idea.

Once you've defined the font-family all you have to do is reference it on elements you'd like to be rendered with it:

h1 {
	font-family: "Museo Sans", Arial, sans-serif;
}

That's it, really. Firefox, Safari, Opera? The latest versions of these browsers all work like a charm.

It's when you remember that IE won't do anything with this that you start running into problems. Luckily, Paul Irish uncovered the magic voodoo incantation that selectively serves the right file to the right browser. The syntax is only marginally more complicated:

@font-face {
  font-family: 'Museo Sans';
  src: url(MuseoSans_500.eot);
  src: local('Museo Sans 500'), local('Museo Sans'), 
         url(MuseoSans_500.otf) format('opentype');
}

I'll leave the explanation of why that particular rule order is important to Paul's article, but suffice it to say this is the syntax you should be using. (Also related, Paul's Rich Typography presentation is worth spending some time flipping through.)

So that's the syntax part of the equation solved. But remember we also have a technological problem; IE doesn't do anything useful with OTF or TTF files. It requires a converted, proprietary (though proposed-to-be-open) format called EOT. If you have a TTF or OTF file, how do you convert it to EOT?

More on this in a follow-up post in the near future. I'll spoil the punchline right now: the official tool for doing so is a horrible piece of abandonware that might work if you get lucky (I didn't). The alternatives are largely arcane command line tools that, apparently, work for some (not me).

However, there is a way. It ain't pretty. But it has the advantage of actually working.

New Chalkwork Icons & Search

Back in June while sitting around recovering from some minor surgery, I spent a weekend producing a new free icon set for payments and ecommerce called, naturally, Chalkwork Payments. It highlighted a fairly obvious deficiency in the collection, so immediately after I set to work on a much larger commerce set. Creatively named Chalkwork Commerce of course.

Due to the growing size of the overall icon family (2500+ now), I decided a better way to find a specific icon was in order. So with a bit of PHP and metadata-creation elbow grease, I put together what I think is a fairly robust search tool that matches actions, metaphors, shapes, and colours.

Start with the fact that searching an image for context still isn't something computers are good at. Then factor in the subjective nature of what an icon stands for, and the way one image often means multiple things. I didn't really see a shortcut for doing the matching; it had to be a manual tagging job. I built a 110k index file that tags each icon in a dozen or so different ways. Here's one example:

Shipping (Ground) – action, ship, shipping, shipment, shipped, deliver, delivery, ground, truck, vehicle, automobile, lorry, lorries, cargo, wheel, tire, tyre, white, red

Hey, when you're off your feet recovering, you have a lot of time on your hands. I can't imagine I've covered every possible search, but that's good enough for now.

The funny thing is that I built this mainly as a sales tool, a way of saying look, I've got an icon that matches what you need even if it isn't labelled that way. But after launch it was pointed out it's also quite useful for people who have bought the icons, as a way of making those same connections since you probably don't have the entire list of what you've bought fresh in mind. Seems obvious in hindsight, but it was nice to have the work pay off in more than one way.

Processing

Back in June I sat in on a full day Processing workshop with local Flash and Processing wiz Jer Thorp. I've been seeing a lot of interesting work with data visualization happening lately, and given that the language was ported to Javascript last year, it seemed like a language I could spend some serious time digging into.

The workshop was a great way to kickstart an interest. I've spent the last month or two working up a small base of sketches (as each program is named) that are helping me work through the syntax, and more importantly the mental shift from designing for 2D text and images to the very different world of designing in 3D when change over time is a factor.

I haven't yet got to the point where I'm doing anything terribly useful with it, but that hasn't stopped me from documenting the progress on a new blog I set up to keep from cluttering this one with something decidedly un-web. Check out Ex Nihilo if you're interested in following along.

WallBlank

You might remember a post from last year called Producing, where I explored some options visual web designers have for creating products, aside from web and iPhone apps that require developer help.

Shawn Kelley took the idea to heart, and created a site called WallBlank that sells limited edition prints late last year. In a nice example of things coming full circle, he asked me to contribute one of the Processing sketches I've been working with. That's now for sale, you can buy one of a limited edition of 100 unique prints called "Bokeh Array".

This one was particularly fun because I figured it would be worth taking full advantage of Processing's generative abilities; each print is unique, though they share a common palette for consistency. Sounds tricky, right? Not exactly. Pressing a single button and getting 100 vector PDFs as output within a minute or two is just one of the many nice things about working with such a graphics-focused language.

Site Issues

It's possible you noticed over the past month this site's home page came and went a few times. Don't worry, it's not going anywhere.

My own fault most likely, but the Delicious API has been a bit problematic for me; the scripts I've been using to pull in remote data cache it, but despite an interval of a few hours between checking for new data, there seem to be some API calls leaking out during that interval that trigger throttling. Delicious has a low tolerance for that sort of thing, and every so often there just wasn't anything showing up.

Combine that with a lack of posts or relevant Flickr photos recently, and the Google Reader items I'm sharing not actually showing up, and the entire home page was affected for a little while.

The Google Reader issue was interesting; at first I thought maybe they had changed something in the totally unofficial API, but then I realized that when I'd bought and started using 1Password I'd converted all my important passwords over to 32 character strings of random nonsense and I just hadn't updated it.

Simple to fix, and problem solved. Now that I can arbitrarily share any item on the web in Google Reader I'll likely be relying on Delicious less anyway.

How am I liking 1Password, incidentally? Quite a lot. You know that nagging feeling that you really shouldn't be using the same password for every web service out there, and that back-of-your-mind worry that one compromised site could lead to a massive online identity takeover, and that you really should do something about it, but it's really just too much of a pain in the ass to bother remembering all these different passwords, and oh forget it I'll just keep using the same insecure password as always?

Yeah, that's gone. My passwords look like this now: t0zDIHYqam<n5jCFgqGVj&Y"q=dPKmvY — and every site I use has a unique one. I actually do feel safer.

AEA SF

And one last thing in amongst all the randomness today. Coming up in December I'm speaking in San Francisco at An Event Apart, which will be only my second speaking date of 2009. I've slowed down quite a lot this year, but AEA was a must. It's always an honour to share a stage with a roster of people like Jonathan Snook, George Oates, Andy Budd, Jeff Veen, and Jared Spool. AEA remains one of the best conferences in the business, and I hope to bring the proverbial awesome.

Want to come? Want a discount? I've got you covered. Use the code AEADSCSS when registering for $100 off. See you there.