I’ve been meaning to mention this for a while now, and have been noticing a few blog posts on the topic recently, so I think I’ll add in my voice. If you haven’t check out Cufon yet, go do so. And yes, I know the “o” is supposed to have an accent mark over it, but I’m not going to put the effort into that other than this post’s title.

What is Cufon? Cufon is a plugin-free, Javascript-powered alternative to rich font embedding. In particular, it’s a great alternative to flash-powered sIFR, which prior to Cufon was the best way to get rich font support during our long desert of poor font-embedding support that is the modern web.

By “great alternative”, I mean that it “lights sIFR on fire, kicks it into an open sewer, and laughs maniacally as sIFR rolls around in stinky, burning pain.”

Yes, it’s that much better. And if you don’t agree, I’ll punch you.

Ok, that’s not true. I’m opposed to violence. I also never learned how to throw a punch, and I’m worried that I’d break my thumb.

However, it is better. For three major reasons. 1. It doesn’t require you to own Flash to build the font file you’ll be using. 2. It doesn’t require a plugin in your browser to work (aka, it works on iPhones among other things). Lastly, 3. It’s way, way faster.

It’s things like Cufon that convince me that in the near future that Javascript will be the new Flash. (canvas and SVG make my pants tight in an embarrassing way.)

How does Cufon work? Simple.

1. Visit their site. Download the cufon script. Include that in the head of your page.

2. Get a font, and using their nifty generator, turn it into a .js file. (Supports several standards, including OTF and TTF.) Link that font script in the head of your page after the cufon script.

3. Do an air guitar riff. (Optional.)

4. In a script you add, include a  command to the effect of Cufon.replace(“elem”) where elem is the element you want the font to replace. If you’re only using one font with Cufon, it’s as easy as that. If you’re using multiple fonts, you’ll need to do Cufon.replace(“elem”, “font name”), where “font name” is the name of the font you want that element to use for that element.

5. Look on in awe as the font are replaced so fast, your page will go slightly back in time.

An example of a finished result is right here. It’s simple, but it gets the point across.

Like sIFR, I can’t recommend using the font replacement on large fields of text. Selecting the text for copy/paste purposes is difficult (although not impossible), and it’s bound to have an impact on performance if you use it too widely. But selectively used it can open your projects open to a cornucopia of fonts (licenses allowing.)

What are you waiting for? Go get it now!

I’m currently at Web Directions North 2009. Unfortunately I’m writing this on my iPhone, so this will be short to prevent me from going insane. Here’s my thoughts so far:

1. RDFa – Yes, the syntax is complicated at first. But the next phase of the web is symantic, and microformats, though convenient, are only a stopgap issue, and RDFa will be a powerful way to express relationships for computers.

What really irks me is that HTML5 won’t support RDFa because Ian Hickson opposes them, and he functions as the sole gatekeeper to the standard. This annoys me on a number of levels: why is a web standard that will effect billions of future sites being controlled ulimately by one person; and why would someone seriously think the leading semantics format we have not be needed for a web that is clearly and rapidly heading towards a Semantic Web?

I’ll rant more on that in the future.

2. Accessibility – there’s a lot of things that I’ve been doing right for accessibility, but Derek Featherstone pointed out a lot of potential pitfalls with AJAX that I need to start payingca lot of attention to.

Ok, the writing on my phone is driving mad, so I’m going to sign off now. More later!

I’ve run across something that is not making any sense to me.

The situation: I’ve got an empty imagemap that I want to dynamically enter area tags into with jQuery. I’ve been trying to insert them using .append() or even .html() and every time I attempt to do so nothing occurs. I can insert text or other tags, but no actual area tags.

Now, if I go oldschool and use document.getElementById(insertnamehere).innerHTML = “inserttagshere” that works. But every variation I can think of to use jQuery methods to add an area tag fails.

Can anyone think of anything obvious that I’m missing here?

Eric Meyer wrote a little post about new project in development by John Resig called Sizzle that should be making every web designer wet themselves. He’s really excited about this. Almost to the point where in my mind’s eye I can see him skipping down hallways. How excited?

“I’m absolutely going to use it and recommend its use far and wide.”

Sounds pretty excited to me. What is all this enthusiasm being caused by? What is Sizzle?

(more…)

Has anyone had the following problem? When loading a JSON array (through something like $.getJSON), Internet Explorer will sometimes report the length of the array being one higher than other browsers, with the extra element in the array being blank.

I don’t know if this is a problem in other libraries, but I suspect it is. But I do know that it’s happened to me when using jQuery’s Ajax functions.

Why is this occurring?

I was tormenting myself with this same question on a client project, and discovered that although a bit of browser quirkiness was involved, it was actually an error on my part.

I hate it when it’s me. ;)

(more…)