DuckDuckGo’s best two features are:

1. It has no features
2. It respects your online privacy

Well. It’s not true that it has no features. DuckDuckGo just focuses entirely on web search. It doesn’t litter the page with garbage-ey social features and doesn’t filter your search results based upon your past search history.

And sure they have lots of little goodies and widgets but mostly it’s just a nice clean search engine with no BS.

The Fixie cocktail

At my most recent cocktail party, a guest brought a gift of Ransom Old Tom Gin. Old Tom is a lovely old style gin with lots of infused flavor, very different from what you might expect. Malty, spicy, complex. It’s very good over ice with with a big lemon peel, though we failed to make a good cocktail with it that night.

After a little careful thought and meditation, I came up with this:

The Fixie

• 3 parts Ransom Old Tom Gin
• 1 part sweet vermouth
• 1/2 part Lillet Blanc
• Wide lemon peel for garnish

Stir the ingredients over ice for 30 seconds, then strain into a chilled cocktail glass. Garnish with the lemon peel.

The vermouth balances out the gin (like any good martini) and the Lillet and lemon brighten the drink a touch so it’s not too sweet.

Smooth, slightly astringent, slightly sweet. Very sip-able.

I bequeath this cocktail to you, Portland, because I love you.

They include a ‘behind the scenes’ page where they discuss some of the technologies used. It’s fairly interesting but includes some dumb marketing language:

It was a daunting task: get this code into a browser while maintaining the unique personality and incredible quality that gamers are accustomed to. To accomplish this, we bet on JavaScript.

Safe bet. When I have to choose between JavaScript or JavaScript I also bet on JavaScript.

The Colorzilla gradient editor is a visual gradient editor like you might find in Photoshop or Pixelmator. Once you’ve specified your gradient, you see an HTML preview plus CSS style rules to create that gradient in modern browsers, and a reasonable approximation using IE’s filter syntax.

Click and draggy

A new checkbox toggles IE 9 support. Selecting this option includes a base64 encoded SVG background image along with the rest of the browser gradient definitions. In order for this to work properly it is necessary to include an IE9 specific style rule (in a conditional stylesheet) which disables the filter definition for legacy versions of IE. An example of this style rule is included in the application.

Click the box for IE 9 support

I have to confess that I’ve been using this tool in lieu of my own script. There are a few reasons.

Pros

Having the SVG definition pre-built and available right in-line removes dependencies on JavaScript and means there’s no extra HTC file to keep up with. Additionally, since there’s no scripting involved, there’s no possibility of collisions with your any scripting in your application.

If one wanted, one could just use the SVG definition and remove all the other gradient definitions (except of course the filter rule). Any browser which supports CSS3 gradients will support an SVG background image. This would let you clean out redundant, browser specific style rules in all your gradient styles.

This technique is reasonably future proof, as it uses standard HTML and a standard SVG. If IE 10 fails to support gradients, this technique will still work.

I have no idea if my HTC script will work on the new mobile IE on Windows Phone 7and (hypothetically) Windows 8. (If someone wants to give me a free Windows Phone, I’ll be happy to test.)

Cons

If you’re using CSS3 gradient definitions, it’s technically possible to tweak or edit them “by hand” without using a special tool. To make any changes to an encoded SVG image you’ll either have to decode, edit, and re-encode or you’ll have to create a new image from scratch. If you’re using a tool like the Colorzilla gradient editor, this isn’t a huge problem – but it’s still an extra step.

Since the SVG gradient is encoded inline in the main stylesheet, all browsers must download this image whether they use it or not. So in a way you’re punishing all users for IE 9’s sins. My dynamic solution targets IE 9 specifically.

It is possible that one day this tool will simply disappear. If that happens, then designers and developers might be scrambling for a replacement.

I recommend

I recommend using Colorzilla’s tool over my script for supporting IE 9 gradients. In practice, I find it’s simply far easier for me to just define a gradient and copy/paste the generated CSS into mine, and follow up with a little clean up once the design is settled.

I’m happy with my script, and there may be cases where it’s preferred (smaller download sizes, targeting only modern desktop browsers, etc) but I think the Pros of using Colorzilla’s tool outweigh the Cons.

Without a winking smiley or other blatant display of humor, it is impossible to create a parody of fundamentalism that someone won’t mistake for the real thing.

This article “Typekit: Remaking the Matrix” was linked around yesterday by people I respect.

A lot of dumb things are published on the internet, and generally, I like to let stupid dogs lie. But this was so blisteringly dumb and so arrogantly offensive I could not leave it be.

I am unsure if the piece is serious. It could very well be a masterful satire, but I really can’t tell. The rest of the blog doesn’t look like satire, the blog which links to the piece doesn’t treat it as satire, the comment section of the piece seems to be serious, but none of that means it isn’t a satire. I hope it’s a satire.

After a long digression and some fawning over Typekit and Apple, the author gets to his point.

But what if giving is only half of what Typekit could do to remake the web? What if they did something never attempted in the font world?

I’m talking about taking away ugliness.

And a paragraph later…

In the same way, I am proposing that Typekit buy a typeface for the purpose of taking it off the market.

He is suggesting that Typekit buy the typeface Comic Sans only to destroy it. This will, apparently, make the world a better place.

He outlines a specific plan for eliminating Comic Sans from the earth by beginning with the following.

Buy the exclusive rights to mediocre fonts of bygone times (Comic Sans, in this example, but also think Arial, Papyrus, Curlz, Jokerman … anything that would send small churches scrambling for replacements for their weekly announcements) and take them out of commission for good. This would effectively ban computer companies from including them in their operating systems going forward, thus ridding culture of some of its typographic mediocrity.

The days of small churches oppressing us all with their poorly designed newsletters will finally be over.

A quick defense of Comic Sans

Comic Sans was designed to be used in software for children, and it’s entirely appropriate for that purpose. If you have a cartoon character teaching you about the alphabet, you don’t have the cartoon character speak in Helvetica.

Besides, there is no font more laden with irony.

You mad bro?

Comic Sans is a light-hearted, jokey typeface intended for small blocks of text in casual contexts. For children. The problem comes in when people use Comic Sans in inappropriate settings or in inappropriate ways. The coworker who writes all email in Comic Sans all the time, or the administrative assistant who pens a company-wide memo in Comic Sans are common examples of Comic Sans done wrong. In the first case, you just roll your eyes quietly at your desk and delete the email. In the second case, a learning opportunity has presented itself.

The problem of misuse is not unique to Comic Sans. I worked with an architect years ago who preached a “Helvetica” mentality. All Helvetica. All the time. For everything. Kids fresh out of design school, especially after seeing the great Helvetica documentary, have the same problem. Corporations are lazy and conservative and use Helvetica for everything as well. People love Helvetica. To death.

The problem with burning books, is you can’t ever be sure you’ve burned them all.

If you overlook the morally abhorrent idea of buying a piece of culturally significant design work and destroying it so no others can use it again – there’s a bit of a practical problem with the author’s scheme.

Destroying one “bad” typeface in no way ensures that people won’t just use another bad typeface. The author himself links to alternatives for Comic Sans that are “better”. Whether or not these are actually better is irrelevant. If Comic Sans is removed and replaced with another casual typeface, what will prevent the church ladies from overusing and abusing that typeface? Will removing Comic Sans prevent interns from sending memos in Marker Felt?

Clearly destroying Comic Sans is not enough. All casual fonts must either be destroyed or placed under close scrutiny, to be used only by design professionals who have passed through several stages of review and approval.

It’s not for sale

Comic Sans is owned by Microsoft. The author’s scheme has Typekit purchasing “exclusive rights” to Comic Sans for somewhere between one and ten million dollars. From the “Counterarguments” (read: straw men) section of the article:

Yes, it will cost maybe between one and ten million to make it worth a company’s while to take just one typeface off the market.

Comic Sans is in use on a huge number of computers, both Macs and Windows PCs and probably a fair number of mobile devices as well.

Some googling tells me that there are approximately 1 billion Windows PCs in the world today. If the license fee collected for Comic Sans was 1¢ for each copy of Windows, that would be the author’s max $10,000,000 asking price. This doesn’t include Macs, Windows Mobile Devices, or other licensees. I’m pretty sure Microsoft plans to continue selling Windows. Why would they give this money fountain away, especially to someone who intends to destroy it?

I imagine the founder of Typekit strolling into the Redmond campus of Microsoft, handing a giant cartoon sack of money to Steve Balmer who concedes “well, we don’t really want to sell the rights to our intellectual property, but you do have a giant sack of money so I guess we have to”.

Portrait of the author

What kind of company is Typekit anyway?

The author appears to be very fond of Typekit. I am too. They do great work and they deserve heaps of praise and some of your web-design budget.

At the end of the article the author writes:

Getting rid of Comic Sans would be big. This act of removal would distinguish Typekit as a company willing to put themselves on the line for excellence and beauty. In a very real way, they would be remaking the world.

In a very real way, Typekit would be putting themselves out of business. This silliness betrays the author’s fundamental misunderstanding of what Typekit does.

In the past few years all major web browsers have enabled support for embeddable typefaces. So, much like the way a web page can include a picture, a web page can now specify the exact typeface(s) to be used. This means you can have a professionally typeset web page. Like pictures, typefaces are linked to web page and downloaded for use in displaying the page. It works really well.

The problem with this is digital typefaces are tiny software programs which are licensed by publishers (often called foundries in a throwback to the old days when type was made of cast lead). When you view a web page on your computer, your computer downloads a copy of everything (more or less) used to build that web page. If a licensed typeface is attached to the web page, you now have an unlicensed copy of that typeface. Congratulations, you’re a pirate!

Typeface publishers make money by licensing their typefaces – so they were understandably not to thrilled with the idea of people slapping an $800 typeface up on the web to be downloaded by anyone. Typekit came along and invented a reasonably secure way to deliver typefaces to web pages so that they can’t be easily pirated. Typeface publishers license typefaces to Typekit, who then licenses typefaces to web designers or companies or whomever.

Typekit is a service provider and a middle man. They provide technical expertise and a means for typeface publishers to satisfy customer demand without sacrificing control of their intellectual property.

For clarity: Typekit provides a mechanism to secure intellectual property, not destroy it.

So. Now imagine that Typekit, which has earned all this good will in the industry, has the faith of major type publishers, and the praise of wed developers everywhere, now chooses to seek out and destroy a typeface. What does a typeface publisher think in this situation? Do they think “well, I hate Comic Sans too” or do they think “these guys can’t be trusted”?

Hint: It’s the second one.

The author includes this false equivalency in the comments beneath the article.

Typekit has even gone so far as to make display faces unavailable for paragraphs in the Customize section of WordPress — they won’t let you use an inappropriate face for your needs. Really now, how different is that from what I have suggested here?

Really. How is quality control of software and service any different from permanently destroying a bit of culture so that no one else may use it appropriately, well, or otherwise.

This kind of thinking is how gated communities are born.

Accentuate the positive.

Instead of assuming the author aspires to be an amoral design autocrat, I choose to assume that the article is a work of satirical genius. That the author is a modern day Swift for the design community. To seriously suggest a business destroy itself by buying up a typeface, only to destroy it, for the purpose of protecting the world from its misuses — hilarious.

I say bravo.

Attention!

Mr. Stephen Fry helps out around the office by announcing to my colleagues which development environment is about to be updated.

Are you sure this doesn't need any packing peanuts?

Nice.

Some time ago I wrote up a hacky way to work around an annoying IE9 bug.

The full write-up has the details, but in short, Internet Explorer 9 doesn’t play well with CSS3 border radius rules (for rounded corners on boxes) and IE’s proprietary gradient filter. The gradient pokes out from underneath the rounded corners. Unsightly.

Since IE9 has full support for SVGs, you can substitute an SVG for a gradient background on any arbitrarily sized HTML element.

Supporting both CSS3 gradients plus MS gradient filters and an extra SVG image plus supporting CSS is clunky at best. CSS hacks are best when they’re invisible.

With a little experimentation I learned one could extract the gradient details from MS’ gradient filter and build an SVG with those details. IE9 has robust support for data URIs in CSS, which means I could base64 encode the constructed SVG and use it as a background image.

Blammo.

What you have here is an HTC (HTML Component) which, on “contentready”, extracts gradient filter data, builds an SVG, base64 encodes that SVG, creates a stylesheet and style rule to hold that encoded data, and then applies the new background style to the element in question, and caches all this info so the next element with the same gradient definition just inherits the new style rule.

Screen capture of gradient bug and fix

Because each gradient is defined in a style rule, and then reused as needed, it’s pretty fast.

An example with many gradients.

Download the zipped HTC file and .htaccess file.

You can enable the filter in your IE9-targeted CSS in an HTML document like so:

<!--[if ie 9]>
	<style type="text/css" media="screen">
		.filter
		{
			behavior: url(ie9-gradient-fix.htc);
		}
	</style>
<![endif]-->

This HTC doesn’t sniff out the version of IE, so it should be included in a conditional stylesheet.

IE9 is more strict with HTCs than previous versions. You’ll need to make sure your web server is sending HTC files with the correct mime type, otherwise IE9 will ignore it. If you’re hosting on Apache, add the following to your .htaccess file or host configuration:

AddType text/x-component .htc

I’m pretty sure that Windows servers will take care of this automatically, but I don’t care.

Details

HTC files are basically a way to attach JavaScript event handlers to HTML elements via CSS selectors. In the following example, event handlers defined in behavior.htc are attached to all paragraph elements that are contained within a DIV element having the CSS class name “foo”.

div.foo p {behavior: url(behavior.htc);}

It’s like a primitive jQuery. Event handlers are defined and attached to elements at the beginning of the HTC document:

<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="myOnContentReadyHandler()" />

Later in the document a javascript function is defined with the same signature: myOnContentReadyHandler(). Within that function the JS keyword “this” refers to the element the event handler is attached to. So my example function could make all the <p> tags in a <div> with a class of “foo” disappear like so:

function myOnContentReadyHandler()
{
	this.style.display = "none";
}

The gradient fix theory of operation

Here’s how the IE9 gradient fix works:

1. Determine if the current element has both at least one rounded corner via CSS border-radius and a gradient filter applied. If so, continue.
2. Determine if the current filter gradient has already been processed and cached. If not, continue building the background SVG
3. Extract the starting color, ending color, and direction (horizontal or vertical) for the gradient from the filter css rule using the element’s currentStyle property
4. If the colors are using #AARRGGBB format (a proprietary form of RGBA color) – extract the alpha value and convert to a decimal value from 0 to 1 for use in the SVG.
5. Using the extracted colors, opacity, and gradient direction. Build an SVG graphic with a single gradient definition and a single rectangle filled with that gradient.
6. Base64 encode the SVG
7. Create a style rule with a unique classname selector defining a background image using the encoded SVG image in a data uri and removing the filter definition (e.g. removing the original gradient background).
8. Append the style rule to a dynamically created stylesheet.
9. Cache the class name of the new style rule in a globally accessible object using the filter rule definition as a key (this should be reasonably unique)
10. Apply the class name to the element.

In step #2, if the filter definition exists in the cache, we skip to step #10 and apply the cached class name to the element. This way gradients are only created once per page request and reused throughout the page.

Below are some gotchas or other considerations.

Assumptions/Conditions

1. HTC files only work when javascript is enabled.
2. Elements with filter gradients have no other MS filters.

Creating a stylesheet within an HTC

HTC files, once loaded by IE, have their own document namespace. If you want to build a stylesheet dynamically from within an HTC, you’ll need to reference the ‘window.document’ namespace.

window.document.createStyleSheet();

CSS is tricky

The SVG background is applied via a CSS classname – the CSS rule corresponding to that class name is added to a new stylesheet, which should appear last in the list of stylesheets for the document. The declaration which unsets the original filter background uses an !important rule. So the new background image styles should override any previously defined background styles. However, your CSS may not play nicely with this dynamically created style rule. If the gradient pokes through your nicely rounded corners, consult IE9’s dev tools and make sure that you don’t have a CSS rule that’s overriding the dynamic rule.

Base64

I didn’t write my own base64 encoding function. I’m no dummy. I used the JavaScript class provided by WebTookKit.info.

How to Peel a Head of Garlic in Less Than 10 Seconds from SAVEUR.com on Vimeo.

It totally, mostly, works. (I had a few cloves left unpeeled. They were the strongest. The deserve to live.)