The Iconmaster

Purveyor of fine digital goods

Latest Articles


Inaugural WWDC Game Night

June 19th, 2012

I love board games. Specifically, I love Euro games. When I realized I’d be attending my first WWDC, I decided there was a peanut-butter-and-chocolate intersection of interests that (as far as I know) had not been previously explored.

I floated the idea on Twitter and gauged the interest level. There seemed to be some, so I packed my copy of Dominion — counting on other gamers to flesh out the supply.

We were going to need the help, because once a time and place were set (June 13th, 8:30 in Bil Moorhead’s luxurious hotel suite), word spread. At its height, Game Night saw over 25 attendees — not a massive party by WWDC standards, but certainly bigger than any social event I’ve organized. Dominion supports only four players. This could have been bad.

Fortunately, a number of guests showed up with games in tow. Ash Ponders brought Backgammon and Katrina Montgomery (who stomped over everyone in Dominion). Michael Fey showed up with Munchkin, which kept the bulk of the guests entertained. And Don Synstelien provided Cosmic Encounter, perhaps the only “true” board game featured that night. Big thanks to everyone who helped out — Game Night would have landed with a thud if not for you.

Will there be a WWDC Game Night 2013? Possibly. If you made it to WWDC 2012 you know how incredibly difficult tickets are becoming to get. There’s no guarantee I’ll make it back next year. But if I do, I’ll be bringing one game or another.

Dominion in progress. Katrina, on the right, was the winner by a mile.

Munchkin was able to entertain a small crowd.

Cosmic Encounter is a good game for making friends… and enemies.

Give img set a chance

May 16th, 2012

Oh the drama.

Web standards wonks are hashing out a new standard for serving the appropriate version of an image given the resolution of a user’s device. Unfortunately, that single standard has turned into two competing proposals, feelings are hurt, etc.

If we’re going to improve web images, these two assumptions seem sensible to me:

  1. One should modify the <img> tag as little as possible. Web designers know how the <img> tag works. It’s not the most elegant thing imaginable, but it’s familiar. We should work with what we’ve got.
  2. The new syntax should be as compact as possible. <img> tags get used a lot. Anything that gets added to <img> could potentially need to be added to a page dozens of times. We should save ourselves some keystrokes.

Let’s look at the contenders. First, the offering from the Responsive Images Community Group, the <picture> element:

<picture>
<source src=”image.png” />
<source src=”image@2x.png” media=”min-width: 600px, min-device-pixel-ratio: 2″ />
<img src=”image.png” />
</picture>

To me, this looks like a pain. It requires the new tags be wrapped around every <img> element which needs to be made responsive (likely all of them). The <source> has to be spelled out for every alternate version. And while the “min-width” and “min-device-pixel-ratio” syntax matches that of a media query stylesheet, in a media query stylesheet these need only be typed once per media type. With the <picture> element proposal, those queries will need to be added to every image.

Below is the version Apple suggested, “img set.” And let’s just acknowledge the elephant in the room: iOS retina devices are the entire reason this conversation is going on. Giving Apple’s proposal a little extra weight may not be unreasonable.

<img src=”image.png”
set=”image.png 600w 200h 1x,
image@2x.png 600w 200h 2x” />

Hey, this looks pretty compact by comparison. It only requires a new attribute on the familiar <img> tag. Think about that: it’s just one tag. (I count four in the alternative, excepting the closing tag.) Using “w” and “h” for width and height is unusual in web development but easy enough to remember. To me, this looks like a winner.

(Update: it’s worth noting that both specifications are still in flux and at least in the case of “img set,” some of the components may be optional. Imagine the following:

<img src=”image.png”
set=”image.png 1x,
image@2x.png 2x” />

Now that’s nice.)

One of the arguments in favor of the <picture> element is that its syntax more closely matches that of the HTML5 <video> and <audio> elements. But this is a bad comparison. It’s fairly rare for video or audio to be embedded in a page more than once; while a single page, again, could contain dozens of images.