I can’t wait until the day when every device we have is using a retina display. Meanwhile, the transition between normal resolution display to retina display is a painful process. Images made for normal websites look horrible on retina display, because mobile Safari have to double the pixels and stretch the normal low resolution graphics to fit on the screen. The result on photographic images aren’t all that bad, but the less complex images, such as logos and icons are clearly grainy & pixelated on the edges.

Making a retina display compatible image requires two steps, the first of which is really simple… take your normal size image and making one that’s twice as big. For example, if your logo.jpg is 200px by 200px, just make a version of it that’s called logo2x.jpg and make it 400px by 400px. You can simply upsample it in your application of choice, of course the result won’t be ideal if you simply upsample your images, but it’s still better than browser’s own upsampling. The better approach is to recreate your logo image from the ground up to fit in 400 by 400. Of course, that will be more time consuming… but it’s just a necessary pain to deal with.

Once you have your logo2x.jpg, you can simply use media query to make sure retina display picks up the higher resolution image:

.logo {
  display: block;
  background: transparent url(logo.jpg) no-repeat;
  width: 200px;
  height: 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (max--moz-device-pixel-ratio: 2) {
  .logo {
    background: url(logo2x.jpg) no-repeat;
    background-size: 200px 200px;
  }
}

The first .logo class is for the normal display, while the media query will load the double resolution image for retina displays. The important thing to remember here, is that mobile Safari will automatically calculate dimension values so developers don’t have to recode all of their stylesheets. So when you say a div has a width of 200px, mobile Safari will actually render the div at 400px on its screen. So similarly you would have to pretend the higher resolution logo image is actually going to be displayed at its “normal” dimension values. Thus the line: “background-size: 200px 200px” to squeeze the logo graphic down to size.

So this all works very well if you make 2 separate graphic images for retina displays and normal displays. What if I wanted to create a single sprite image that contained both? Turns out this could be done as well. Let’s say if you created a sprite that’s a combination of both logo.jpg and logo2x.jpg. You would have an image sprite of 400px wide by 600px height, where the high resolution logo would be at the -200px height background position:

.logo {
  display: block;
  background: transparent url(logo.jpg) no-repeat 0 0;
  width: 200px;
  height: 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (max--moz-device-pixel-rati0: 2) {
  .logo {
    background-position: 0 -100px;
    background-size: 200px 300px;
  }
}

Notice that the background-size attribute is half the size of the “entire” sprite image, not just the part that’s visible. Since the background size is again squeezed down, you also have to halve the pixel displacement of the sprite image.

Besides the little bit of oddity with sprite sizing and positioning, making graphics for retina display is pretty straight forward. Hopefully some people out there will find this helpful.

When I last visited Boston, Cafe Japonaise only had one location in Brookline, now they’ve got three locations throughout the greater Boston area. This was one of the few bright spots on my visit to Boston this time around, good coffee and great pastry. Their various cream puff, specialty bread, and sliced loaves are to die for.

By comparison, the nearby Chinese market has been recently purchased by another owner, and the new ownership isn’t doing much to clean the place up. The market has a stinky sewage smell as soon as you walk in. In the bread section are loaves of spongey bread stacked up and stuffed into a shelf. Some of the specialty breads are just still in stacks of cardboard boxes where they’re randomly throw together.

It was amazingly hard to find really high quality pastry, or even just mediocre quality pastry. Some of the well known chains have decent, but not great pastry. The croissants are just a little bit stale, cookies aren’t quite right.. etc.. etc..

So if you’re in Boston and you want really good pastry, Cafe Japonaise is the place to be.

As much as I wish the above picture is a creation of yours truly, it’s actually one of the best dish from an all-time local favorite. Although I’ve always been aware of the discrepancy between vacationing versus living at a particular destination, the actual impact of that discrepancy has never been more clear to me than the last month and half. Years ago when I visited Boston, it was only for a week during the best time of the year, and we checked out some of the best restaurants in town for the entire week. Life is much different when you’re not spending $100 a day just on food.

Mostly, what I missed was great Asian cuisine. Although Boston does have a Chinatown, the competition pales when compared to the availability of Asian cuisine here in the San Francisco Bay Area. Here, great Asian cuisine isn’t even necessarily in Chinatown, but all the way up and down in almost every city in the Peninsula. It speaks volume to the importance of competition in driving any economy forward, even for something as simple as food. In some ways, LA and San Diego has also outpaced San Francisco with newer and better quality cuisine, driven by newer generations of Asian immigrants that finds LA and SD more attractive venues.

I have friends who have spent their entire lives in California, and to some of them there’s always a question of, “Where would I go if I didn’t want to be in California anymore?” I’ve spent at least some of my childhood on the east coast, in the mid-west, and even a tiny little sliver of southern hospitality in between; maybe it’s the precise mixture of Asian-American that I’ve got in me, where I need just the right balance of both, but I can’t figure out where else I would be if not California. I even knew someone who took a job in Minnesota just to experience something different, only to return a year later never wanting to see snow again (a sentiment I can agree with completely).

I think that pretty much explains why, despite the insane real estate and living costs, that I still chose to stay here and hope for the best.