Icon Fonts Are Ruining Your Markup

Icon fonts are great. They’re more scalable than PNGs, they’re re-colorable in CSS, and it’s easier than ever to create them. But most of us are using them wrong, and it’s ruining your markup. Recognize this?

<span class="icon icon-calendar"></span>

This is fast becoming the de-facto standard syntax for inserting icons in your webdesigns. No need to fiddle with weird glyphs. No CSS needed to insert icons, even.


Hold up. The promise of CSS was that we could separate presentation from markup. We could create standardized, semantic and sensible markup, that could then be completely re-skinned solely by replacing a stylesheet. That was the whole point of the CSS Zen Garden. By using nonsense spans with verbose classes, that’s out the window, all in the name of convenience. I too have been bitten by the icon-font bug. I’m into them. I think it’s so great that I can re-color icons with a line of CSS. I like how they zoom, and how they have broader support than SVGs.

But they’re not SVGs. They’re not images. We shouldn’t pretend they were, or that they could ever be as accessible as images are.

Theoretically an icon from a font could be inserted in a semi-accessible way by outputting the actual glyph in the code to ensure copy/paste-ability. You’d also have to make sure to only use an icon that already existed in the unicode-table so screen-readers could make sense of them, thus severely limiting your options as a designer. Need a hamburger menu icon? Sorry, doesn’t exist in the unicode table. Pretty much all the benefits of using an icon font would be out the window at this point.

Rewind for a bit. Take a deep breath and think. Why are you using an icon font in the first place? Easy HiDPI and CSS colorability? Easy to show at multiple sizes? Fair enough.

Now pretend icon fonts didn’t exist, what would you do instead? Use a PNG or GIF as a CSS background, right? You’d treat the graphics as presentational elements. Visual aids. You’d keep it separate from your markup. You’d be able to reskin your whole site with a single stylesheet. You’d keep the markup as simple and semantic as that of the CSS Zen Garden. Hopefully you’d be a good person and worry about accessability where it mattered most: in the structure of your markup.

You can still use icon-fonts and have sensible markup while keeping the presentation separate. But doing so means you can’t rely on those bundled CSS helper classes. You have to do it manually; put in the work. Don’t treat icon-fonts like images. Pretend they’re sprites and keep them in your stylesheet. You’ll thank me.

A Chromecast with a Remote

The internet is a series of tubes.

Last week Android TV leaked on The Verge. The leak was conveniently timed right after the Amazon Fire TV release, and featured unusually clear screenshots that were perfectly front facing but appeared lightly filtered, almost as if to make them appear as though they were unintentionally leaked. Regardless of intent, it gave us an insight into the set-top box that Google is supposedly building.

Just a couple of months ago I bought into the Google Chromecast, a headless HDMI dongle that streams the internet to your TV. The Chromecast is as simple as can be: it requires you to use your handset or tablet to control it, so there are no “apps” per se. In fact, in order for Netflix to support the Chromecast, it has to offer its content — movies, TV shows, poster art, box art — as URLs. Because the Chromecast can read nothing else.

That’s where it gets interesting. The article in The Verge suggests an obvious question, why is Google making a set-top box that requires apps when its first successful TV device required none? Thankfully, GigaOM filled in the blanks in their article on the technology behind. If I’m reading the tea-leaves correctly, Google have indeed cracked it, and the Android TV doesn’t really require apps — not in the way we’re used to:

I’ve been told that Google’s new approach wants to do away with those differences by replacing these custom interfaces with standardized templates. Publishers wouldn’t need to come up with their own user interface, but instead would develop apps that provide data feeds to the Android TV platform.

Read it this way: you don’t have to make an app for the Android TV, your content just has to be URL accessible. In fact, if a service is already Chromecast ready, putting it on Android TV will probably require very little work. It’s quite clever; just expose the content-tube endpoint and  you have the best of the internet in a native experience, like an RSS feed for television.

Android TV is just a bigger Chromecast, with a remote-control and an interface, should you prefer that. Ted Stevens was right all along.

Ode to Any.do

Oh Any.do, how I love you.
Except when servers go down. Makes me feel like a clown.

The web-app is bangin’, except when it’s hanging.
I’m in to your phone app, it syncs in a snap.

Your graphics are blurry, but not to worry;
Any.do Moment is swell, so all is well.

I’m not into Cal, but mostly I’m happy,
show it again and your rating be crappy.

You’re doing something right,
‘cos no other to-do app can put up a fight.


My baby has an inner ear infection. Often times these ailments disappear on their own. Other times they get real bad. Thankfully we have Penicillin, which fixes it right up.

For now.

One day in 1928 — it was a Friday — the scotsman Alexander Fleming went about his daily business at St. Mary’s Hospital in London. He was working in his laboratory when he discovered he’d forgotten to close up a petri dish of bacteria from the night before. What he noticed would change the world: a mould had grown in that petridish, and in a halo around that mould the bacteria had stopped growing. What Alexander Fleming had discovered would save tens of millions of lives in the century to come: this natural mould exuded a substance that had antibiotic properties. Not a decade later we had Penicillin, and on this Friday in 2014, Penicillin is helping cure my baby girl. Thank you, Alexander Fleming.

There’s a problem, though. Penicillin is a wonderful drug, but bacteria — just like humans —  evolve and grow stronger. Put a drop of Penicillin in a petridish of bacteria and the bacteria will die. Probably. There’s a tiny chance some of those bacteria will survive due to a random Penicillin-resistant mutation. Those lucky few survivers might reproduce and migrate. Repeat this process for a century and you’re bound to have a couple of strains of bacteria to which even the strongest of Penicillins are useless.

We knew this would happen. Yet still to this day, Penicillin is used on a grand scale in meat-production of all things. When cattle have particularly bad living conditions, when too many cows are huddled up in too little space, they’ll inflict little scratches on each other, wounds that might heal naturally on a green field of grass. But if your living quarters are also where you go to the toilet, no such luck. Hey, thought the meat industry, we can just pump the cattle full of Penicillin and no bacteria will grow in those wounds!

The way we treat our cattle is troublesome enough, but the inevitable consequences should be alarming. Those dirty farms and cattle transports are evolutionary crucibles for resistant bacteria. The strong bacteria will survive and require stronger Penicillins. It’s an evolutionary arms race and we’re losing. We always knew bacteria would evolve to be Penicillin-resistant eventually, but if we’d been smart about our Penicillin usage, we might’ve had enough time to research functional alternatives. As it stands, I’m worried about a future dad and his daughter battling an infection maybe just ten years from now. I hope she’ll be alright, man.

So I guess here’s another reason you should eat organic meat. Or no meat, that works too.


Ordered the Google Chromecast the other day. It’s a little HDMI dongle you put into your TV to make it smarter. Amazing gadget, I must say, it’s been a while since I was this excited about a piece of electronics. It’s not that it’s that full-featured — right now it’s only actually useful if all you need is YouTube and Netflix (which happens to be the case for me) — rather, it’s the implications of the device that excites me.

It doesn’t have a remote control, and the device does nothing on its own. The remote is your phone or your tablet or your desktop. All the device does is receive streams from the internet, and you “suggest” those streams from your handheld. In essence it downgrades your “smart-TV” (or in my case, upgrades my dumb-TV) into being simply a display capable of receiving input. It removes every single bit of UI and interaction from the television itself, and propels it onto that thing you have in your pocket regardless.

The concept alone blew my mind when the implications sank in. I doubt it’s controversial to say that television UIs have sucked for decades. Just pick up your remote control and look at it, chances are you’ll find more than twenty buttons, 90% of which you’ve used only once. Alright maybe you picked up an Apple TV remote — vast improvement over most other remotes, but why is that? Right: fewer buttons. Which is why requiring all interaction happen on your smartphone is such a novel idea: by virtue of being a sheet of capacitative glass, your television remote now has only the buttons necessary, and only when you need them. 

It’s just great.

What’s even better is not having to switch on your television and change to the “HDMI” channel. The Chromecast is always listening for input, so if you tell it to play Netflix, it’ll turn on your TV for you, on the right channel no less. When you turn off the television again (alright, I suppose you do need your remote for that — and for volume), your Netflix app will pause the show you were watching. 

This is how television is supposed to work. They’ve cracked it.

Yeah sure, it’s early. Most people will need set-top boxes for a while still. For a 1.0, however, the Chromecast is remarkable. If only Netflix would auto-play the next episode in a TV show, if only Pocket Casts was Chromecast enabled… But hey, this dongle auto-updates transparently in the background. Who knows, maybe next time I turn on the televison, there it is. It is Chrome-based, after all.