August 2010

August 31, 2010

Heartbeat

We’re having a girl! :)

August 21, 2010

IM IN UR OFFICE LEARNIN HOW 2 SAVE UR LIFE

Red Cross

(And testing the next version of ur iPhone app.)

August 16, 2010

Kermit Remembers

Kermit Remembers

via Cute Sexy Funny Awful → via Nerd Boyfriend → via ?

August 12, 2010

Tweet Button

I added Twitter’s new “Tweet Button” to my posts. Tweet away!

Update: Thanks to Steve for finding a bug. Fixed! :)

August 5, 2010

I still don’t get this…

My iPhone has music on it. It’s connected to a Mac via USB. Headphones are plugged into the Mac. The phone shows up in iTunes and I can see all of the tracks. But I can’t listen to them because they’re all grayed out.

What terrible sin is iTunes protecting me from here?

And before you tell me to plug the damn headphones into the damn iPhone, I was doing that yesterday and my beautiful but delicate iPhone 4 did an R2-D2-style face-plant onto my desk. I don’t need that kind of stress. :)

Plus, I want to control the music through iTunes from my keyboard rather than fumbling with the phone whenever I want to pause a song.


Update: Our long national nightmare is over.

August 4, 2010

Proposition 8 Overturned

Judge Walker:

Proposition 8 fails to advance any rational basis in singling out gay men and lesbians for denial of a marriage license. Indeed, the evidence shows Proposition 8 does nothing more than enshrine in the California Constitution the notion that opposite-sex couples are superior to same-sex couples. Because California has no interest in discriminating against gay men and lesbians, and because Proposition 8 prevents California from fulfilling its constitutional obligation to provide marriages on an equal basis, the court concludes that Proposition 8 is unconstitutional.

Progress.

More from…

August 4, 2010

Macworld’s TypePad Review

William Porter gives TypePad four out of five mice:

TypePad is a full-featured online blogging service run by the folks at Six Apart. Six Apart became famous almost a decade ago for creating Movable Type, one of the first major blogging applications, and one that is still widely used. Movable Type is installed on your own Web server, giving you total control of every aspect of your blogging system. The TypePad application on the other hand runs entirely in your Web browser, and TypePad also hosts your blog for you online. TypePad competes with other paid and free online blogging services such as WordPress, Blogger, and LiveJournal.

via Macworld.com

I’ll take it. :)

August 3, 2010

Generating High-Resolution Graphics for iPhone 4 with HTML5’s Canvas Element

Update: If you’re also interested in targeting the Retina Display with high-resolution Apple Touch Icons, iOS 4.2 supports a method to do just that.


If you’re using HTML5’s canvas element to generate graphics for your mobile web app, it’s worth taking a moment to add support for high-resolution screens like the iPhone 4’s retina display.

The solution I arrived at was to take my existing drawing and conditionally scale it to twice its normal size, then set the width and height using CSS pixels. The result is an identical graphic, but without the jagged edges.

Here’s a quick demonstation based on one of the examples from MDC’s excellent Canvas tutorial. You can see in the first graphic below that the face renders fine on the iPhone 3, but on the iPhone 4 it’s being pixel-doubled, just like a static image, producing a jagged edge.

Before

With static images, the solution is to create a 2x version, and that’s the solution for Canvas elements as well. So begin by adding some conditional code to scale the image up 200%.

if(window.devicePixelRatio == 2) {
    canvas.setAttribute('width', 300);
    canvas.setAttribute('height', 300);
    ctx.scale(2, 2);
}

The scale method doubles the size of the canvas element. And, since a canvas image doesn’t have any “natural” dimensions, we need to adjust the width and height attributes. Finally, since these changes should only apply to high-resolution displays, window.devicePixelRatio lets us target that case.

Now we have all the pixels we need, but the iPhone 4 will still pixel-double the image until you set the width and height using CSS pixels.

canvas {
    border: 1px solid black;
    width: 150px;
    height: 150px;
}

Once that’s done, the scaled high-resolution version will render without jagged edges at the same “size” (in CSS pixels) as the normal-resolution version.

After

Here’s the code in full. (And here’s the original MDC example.)

I implemented this approach with the pageview graph in TypePad’s mobile web app, and I’m pretty happy with the results. There are lots of ways to use the Canvas element and CSS to generate high-resolution images, and I’m looking forward to seeing what others come up with.


See also:

Previous Month
Next Month