A Tribute to iBeer

Today’s a big day for app developers.

In the lead-up to today’s event, I spent some time digging through my old purchases. After launching the App Store app, tap on your profile in the upper-right corner, then tap on the Purchased menu of your account page. After spending a few hours scrolling down, you’ll see your first apps!

One of the apps was something called “Carling Tap” – and I had no recollection of anything by that name. A little bit of research helped me remember that the app was formerly named “iBeer”. This hiccup with the name not only paused my scrolling: it also got me thinking about the importance of this early app.

Many of the apps on that first day, including my work with Twitterrific, were adaptations of desktop apps. Things like AIM, NetNewsWire, and Solitaire had many advantages on mobile, but in retrospect, they weren’t a sign of what lay ahead.

Even though it was a gag, iBeer gave us a real glimpse of our future. It was the first app that was spatial. The function of the app was determined by where it was in your world. It could not exist without you.

Since then we’ve seen many other apps take advantage of this unique characteristic of mobile devices. Ocarina made it beautiful. Ride sharing leveraged it for efficiency. Pokémon GO made it fun and communal.

Now we’re heading towards a future where all apps will be spatial. One can only imagine how that will turn out, but it’s likely that the accessories will be fun.

System Fonts in CSS

About three years ago, I wrote a piece on how to get system fonts in CSS. The San Francisco fonts had just been released and getting them onto a web page wasn’t obvious or easy. A recent tweet reminded me that I needed to update this information.

In my original post, I proposed the idea of a generic system font:

The “system” generic family name doesn’t currently exist, but I’d encourage browser manufacturers to adopt this technique.

Apple agreed and made a proposal on the CSS mailing list. Over the next few months that proposal evolved from being called “system” to “system-ui”. (Once upon a time, Windows used a font called “System” that could have caused a conflict.)

At the end of the day the CSS Font Module was updated and there was an official way to render text just like the operating system.

As every web developer knows, getting a feature into the spec is one thing and getting it into the browser is quite another. Luckily the adoption of system-ui has been quick. Both Chrome and Safari support it fully on a wide variety of platforms. Only Mozilla and Windows are lagging behind.

In many cases, you’ll also have to take backward compatibility into account — not every visitor has the latest & greatest browser. This CSS should cover all the bases:

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;

(For more information on what those font names mean, see Marcin Wichary’s article in Smashing Magazine.)

If you’d like to see how this new generic font-family works, here’s a simple page that can be used to test any platform.

This whole process has been fascinating for me to watch. What started as a simple idea ended up being discussed and implemented by dozens of talented engineers. The result is a web that’s better and easier for a lot of folks.

Benchmarking in your pants – 10th Anniversary Edition™

One of my favorite posts is one that’s over ten years old: Benchmarking in your pants.

In that essay, I compared the original iPhone to my iMac, both with native and web apps. One of the reviewers of my treatise on the iPhone SDK thought it would be fun to see how those numbers stack up to an iPhone X.

The code still runs, so why not?

Test Original iPhone iPhone X Faster by
100,000 iterations 0.015 secs. 0.000408 secs. 36x
10,000 divisions 0.004 0.000043 93x
10,000 sin(x) calls 0.105 0.000107 981x
10,000 string allocations 0.085 0.000367 230x
10,000 function calls 0.004 0.000040 100x

These numbers should be considered very approximate. I only used three digits of precision in the original measurements, this time over 5 were needed. Also, there was no attempt to use more than one core.

Still, it’s easy to see why today’s apps are much more sophisticated. They run code hundreds of times faster.

They also have screens that are a bit larger than 320 × 480 :-)