Jonathan Snook's Blog, page 12

Rating Restaurants

Having begun the quest of 50 before 50, I realized that it would be good to have a way to rate each of the restaurants that we go to. Between the dozen or so Michelin-starred restaurants and the now handful of restaurants on the World’s Best list, differing factors have revealed themselves.

I’m finding a number of ways that these restaurants differ from each other:

experience,
value,
food,
drinks, and
service.

Experience is about how the meal is presented. Is it just a bunch of dishes presented one after the next or is there something special? How is the pacing of the meal? How is the ambiance of the restaurant?

Value is straightforward and aligns with how good all the other factors are. Keeping in mind that most of the places are expensive, this isn’t about rating which is cheaper but rather whether you get what you pay for.

The food is, of course, about how good the food itself is. How many Ratatouille moments did I have? That kind of thing.

The drinks is about how good the drinks paired with the meal and if there were any surprises along the way. With every meal, I’ll try a wine or drink pairing, if it’s offered. If it’s not, how well did the sommelier do in recommending something for the meal?

Lastly, is the service. Service is about the staff. Were they friendly? Were they helpful? Were they as excited to be there as I was?

I’ll rate each on a scale of one to three stars. Like Michelin stars but, uh, not. Snichelin stars? One star means it didn’t meet expectations. Two stars means it met expectations. Three stars means it exceeded expectations.

I thought about making it more complex with 4 or 5 stars or make it a rating out of 10 but realized that that creates a lot more subtlety that is difficult to explain.

50 Before 50

I turned 44 this year. Not a monumental year by any means. It’s not one that most people pay attention to. It was rather uneventful for me. A week after my birthday, however, I found myself in Amsterdam.

(Well, I suppose “found myself” isn’t the right way to phrase it. I didn’t just wake up one morning and unknowingly woke up in a different country. That would be astonishing. And a little troubling. No, I planned this trip and expected to be in Amsterdam and was delighted to be there. Anyway.)

In continuing my adventures of going to as many fine dining establishments as I could, I managed to book reservations for three Michelin-starred restaurants:

Librije’s Zusje ★★,
Ciel Bleu ★★, and
Yamazato ★


Librije’s Zusje

I was blown away. From the moment we arrived at the front door of the Waldorf Astoria, the experience was amazing. They walked us from the door to our seat and knew us by name.

Zusje ranked high when it comes to experience. Everybody was very welcoming and helpful throughout the meal. They invited us to the garden at the halfway point. Even a trip to the toilet was fun as they directed me down a long hallway of quirky statues.

A flower placed under a glass hood at the table provided a bit of theatrics throughout the meal. Kitt and I were left curious about what it was. At one point during the meal, the waiter placed a green liquid on the white flower. Later on, the flower is taken away. It then comes back presented as an ingredient in one of the desserts. It turns out that it’s a Chinese mushroom. A bit rubbery but tasted okay with the sorbet presented on a crumble.

I should’ve taken more notes on the food when I was there but I can recall, the food was fantastic. I’d definitely recommend going here if you can.

Ciel Bleu

Ziel Bleu was… interesting. It’s aesthetic felt like a throwback to the 80s. The view, however, is amazing. Sitting atop the Okura hotel, it has a fantastic view of Amsterdam. Pretty much every seat in the restaurant is configured to enjoy the view.

The food was also delicious and our waiter cracked us up.

Yamazato

Andy Budd joined us for dinner this evening and it is here where things get interesting.

The food itself was fine. Honestly, nothing special. Nothing blew me away or left me with those Ratatouille moments. The experience felt contrived, trying to create a Japanese environment somewhere that was decidedly not Japanese. (Although Japan and the Netherlands have an interesting history together.)

The interesting part was a discussion that Andy and I had about going to all these restaurants. He told me about Restaurant magazine’s World’s 50 Best Restaurants. Which leads us to…

The List

He mentioned the idea of trying to go to all 50 restaurants before he turned 50. I decided to join him on this quest. The rules are pretty simple: we have to go to fifty of the restaurants on the list from between 2017 and 2022. Some restaurants will close and some will get added to the list. From the 2017 and 2018 lists, there are 58 possible restaurants.

We allowed ourselves any restaurants that we had recently been to. That meant that our trip to Saison could be included. But Librije’s Zusje, a sort of sister restaurant of De Librije, didn’t count because it wasn’t the restaurant that was nominated.

My previous open-ended goal of going to random Michelin-starred restaurants has now been superseded with a finite goal of fifty very particular restaurants. What commonalities would emerge? What sets one restaurant apart from another? I guess I’ll find out. (And hopefully beat Andy to the end.)

I’ll attempt to have more detailed reviews of each of the restaurants going forward!

Postscript: Choux

I’d be remiss to mention a lovely little restaurant we went to. It doesn’t have any stars but the food was fantastic. We went for lunch and were offered a choice of 3, 4, or 5 courses. We chose 4, which got us two vegetarian dishes, a fish dish, and dessert. Every dish was spectacular and the service was wonderful.

We hadn’t been able to check into our AirBnb yet, so they were gracious enough to let us store our luggage while we dined. Looking around, this seemed like a place people would come to for work meetings.

Highly recommend!

Normalize Bootstrap Carousel Item Heights

In working on a Bootstrap-based client project, they needed the heights of all the items to be the same height, even though the content was of different heights.

Bootstrap uses position:absolute to move the items. As such, techniques like flex and grid aren’t of much help here.

The top result on Google as of this writing works but only on one carousel. In an attempt to rewrite the script to work with all carousels on a page, I realized that there was a way to simplify the entire script.

function normalizeSlideHeights() {
$('.carousel').each(function(){
var items = $('.carousel-item', this);
// reset the height
items.css('min-height', 0);
// set the height
var maxHeight = Math.max.apply(null,
items.map(function(){
return $(this).outerHeight()}).get() );
items.css('min-height', maxHeight + 'px');
})
}

$(window).on(
'load resize orientationchange',
normalizeSlideHeights);

The original script had a bunch of .each calls that weren’t necessary because jQuery already loops through all items when using methods like .css(). Also, I took advantage of map to avoid an extra loop and used get to convert that into an array that I could run Math.max on.

I’m not sure that orientationchange is necessary since my assumption is that a resize event would also fire but I haven’t tested it and since it was in the original script, I kept it in mine.

New York Public Library

There's so much to see in New York City and the NYPL is a great addition for any fan of architecture. It felt more like a museum than a library, though. Lots of people milling about; not enough books.

View on Flickr

Preventing Icon Wrap After Text

I’ve got text. I’ve got an icon at the end of the text. When the container shrinks, the icon wraps to the next line. That orphaned icon is kind of lonely. What if we could get the icon to bring a friend with it?

(This felt like something that should be really easy and has been solved a million times before. And yet, I couldn’t find anything written up on this and, well, I needed it. So here we are.)

A trick I’ve used in the past to prevent orphaned words was to add a non-breaking space ( ) between the last two words. This forces them onto a line together.

Adding a non-breaking space between text and an image, however, doesn’t work. The image (or an element set to inline-block) creates a boundary, allowing the image to break onto a line all by itself.

Thus, we need to put the image into a container and force that container to stick together.

Wrapping the last word

... <span>word<img/></span>

If we have control over the HTML, we can wrap the last word and the image together and then use a couple different techniques to keep the two together.

display: inline-block;

If we wrap the text and the image together using inline-block then the items will be treated as an unbreakable container.

white-space: nowrap;

Alternatively, we can use nowrap to prevent wrapping. This second technique is important as we’ll need this for the other techniques.

Templates

With template-driven content, we usually don’t have the ability to grab the last word and wrap it. However, we can put things beside it.

... word<span>&nbsp;<img></span>

We can’t just put the image next to the word, though. We need a non-breaking space. This prevents the word and the space from breaking. And the wrapped element uses nowrap to prevent the space and the image from breaking. This allows the word and the image to stick together.

This also works if we need the text to be wrapped in an element and still place the image beside it.

... word</span><span>&nbsp;<img></span>

The key is that there is no space between the closing tag of the text and the opening tag of the space/image combo.

No space

Finally, if you don’t want a space, you can use the zero-width non-breaking space: &#65279;.

... word</span><span>&#65279;<img></span>

And that’s it! Check out the Codepen.

View Source

Tom Dale not so recently made a rather bold statement on the Twitters:

“Can we agree that, in 2018, human-readable “View Source” is a constraint the web can discard? I benefitted from “View Source” too, but today we have an embarrassment of resources and open source examples I would have killed for as a kid.” — Tom Dale

Dale wrote this in response to Frank Chimero’s essay on the cyclical and increasing complexity of web development.

Viewing the source of a page has been a boon for budding web developers and experienced developers alike. It allows us to peek under the hood of the medium that we consume.

Dale goes on to clarify:

I’m not suggesting removing the ability to inspect what’s happening in a web app at runtime. I just mean that it’s reasonable to have the assets served to the browser require some sort of post-processing to be understandable.

Which, depending on your level of abstraction, is already what happens. Pages are deconstructed into ones and zeros, compressed and encrypted, making their way to your browser to be reconstructed into something that makes sense to your senses.

The lowly View Source is a reflection of its time. A simple tool to examine the simple lingua franca of the web.

As the complexity of how we build the web increased, the complexity of its tools to inspect and debug also increased.

We have the ability to inspect the original HTML source along with its interpreted representation. We have the ability to inspect the source of JavaScript and CSS files mapped from its minified and optimized versions. We have the ability to inspect rendering pipelines. We have the ability to stop and step through JavaScript execution line by line.

The increasing complexity of tools doesn’t negate the need for those earlier, simpler tools, though.

The sites some build may be simple static sites, befitting of a simple View Source. The sites some build may be compiled and bundled and requiring tools that allow us to dig deeper. Just because you don’t need those tools doesn’t mean that somebody doesn’t need those tools.

Maybe the question is whether a human-readable View Source is actually a constraint? The reality is no.

There are sites that are built well and there are sites that are built poorly. Having something that is coherent has never really been a constraint and while some might wince at the complexity of current day projects, we have a plethora of tools at our disposal to inspect the simple projects and the complex projects.

Steve Jobs on Prototypes

I spent some time watching Steve Jobs talk about NeXT from 1992. He touched on a number of things, including his passion for a crazy new idea called object-oriented programming.

It’s interesting to take a look at his insights. One thing that jumped out for me—and it’s right near the very end of the one hour and twelve minute video—is his view on prototypes.

“We haven’t built a prototype in engineering for two years.

“What that means is, manufacturing gets involved from day one.

“A lot of times, when you build prototypes, it’s not quite the same technology as you’re going to use in production. And so all the accumulated knowledge you get from building your prototypes, you throw away when you change technology to go into production. And you start over in that accumulation process.

“Because we don’t change technology, we don’t throw anything away. We don’t waste time.

“And it’s led to one of the healthiest relationships between an engineering and manufacturing group I’ve ever seen in my life.

“It’s really paid off for us and I think it’s one of our real opportunities for competitive advantage.”

The Material

I’ve thought often of how our design and prototyping tools for the web are often not of the web. Tools like Photoshop and Sketch and Invision create approximations but need to walk the line between being a tool to build native apps and to build web apps. They do well in their ability to quickly validate designs but do little to validate technical approach.

The rise of Pattern Libraries has allowed teams to have components of a design system iterated upon and improving over time.

We’ve also seen the rise of greater integration of design and engineering as apps like Sketch and Figma allow for greater movement between the two practices, moving these components of the web back into the design tools.

“A huge part of that success is closing the gap between what a designer has access to in Sketch and what an engineer has access to in code.” — Jules Forrest

Airbnb, for example, has been exploring how to automate important design task, such as design linting and building “source of truth” design files.

There’s still the disconnect of the initial design to code process. The design tools still aren’t of the web. A designer doesn’t draw a box in Sketch and then have the ability to push that into production. There are still too many decisions to be made between that box in the design tool and what it would mean in code.

What element is that box made of?
What accessibility needs to be accommodated for?
How does that box behave under various conditions?
How does the box handle different languages?

Our tools are heading in the right direction, though, and I anticipate the day will come where we can move more swiftly from design to production because both will be of the same material.

Notes on Font Stacks for CJK

Working on a client project, we needed a font stack that would work for Chinese, Japanese, and Korean, (aka CJK) along with all the usual Latin locales.

The client’s previous approach was to simply strip the entire font stack for CJK locales, letting the browser handle it. This meant a serif style. Times New Roman, you had your time to shine.

In researching how others handle it, I noticed that most sites provide individualized font stacks for each locale. There’s a Chinese font stack, there’s a Japanese font stack, and so on.

With multilingual projects like this—especially with English being the primary language—these Asian locales would likely have some Latin language (English, in particular) alongside them. In which case, using a font stack that ignored Latin would mean losing the consistency across those locales.

This is the font stack I ended up going with. I haven’t put it through its paces, so don’t take it as gospel. This is more documenting what I did for my future self.

/* Latin stack */
"Open Sans", "Trebuchet MS", Verdana, Tahoma,
/* Chinese Stack */
"Microsoft YaHei New", "Microsoft Yahei", SimHei,
/* Japanese */
"Hiragino Kaku Gothic Pro", "MS UI Gothic", "MS PMincho",
/* Korean, et al */
sans-serif;


Potential Problems

As I write this, I recognize that there are issues with this font stack.

It hasn’t been properly reviewed

Unfortunately, I couldn’t get many people to review the content to ensure that it looked and felt natural. Like most user experience issues, testing is the best way to surface problems.

My knowledge is so limited that while I know there is simplified and traditional Chinese writing, I couldn’t tell you which is which. (I think the font stack is for simplified.)

No Korean fonts specified

Mostly, I was happy with the fallback font that was being displayed and those that could read Korean didn’t raise any alarm bells with what they saw.

Potential CJK conflicts

There are some characters that are used across all of CJK but have slight differences in how they’re drawn. Thus, the font stack will prefer the Chinese fonts over Japanese or Korean. This also means that there could very well be font style changes as it renders some characters using one font and other characters using another font. This was the issue that I was most on the lookout for and chose a font stack that minimized this issue.

No localized fonts included

Based on my research, I found that there are localized names for some fonts. For example, Microsoft Yahei has 微软雅黑. I didn’t know what all the alternative names were, so I left them out. Fingers crossed that decision doesn’t come back to bite me.

Possible Alternative

As this project progresses, we’ll see if this font stack works out okay. The alternative would be to go the route that others have taken: split the font stack for each locale.

In which case, I’d still want to specify the Latin set first and then the Chinese, Japanese, or Korean second. (Most Latin fonts don’t include CJK but most CJK fonts include Latin.)

Other resources

Here are the resources I used:

Localization Gotchas for Asian Languages (CJK)
Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese
Japanese fonts and website design
Handling CSS font stacks for multi-language websites

That Time I Tried to Get to LA

I’m supposed to be spending a week in Los Angeles. Instead, I’m getting thrown around a tin can in the sky.

The original plan was to head out on Tuesday but I had a free day and decided to head out a day early. I normally have decent luck when it comes to travel but such is not the case this time.

Almost immediately after changing the flight, I started getting notifications of weather rolling through Chicago, where my connection is. I eyed the weather forecast and noticed that there was about a four hour opening that looked reasonably clear where I could, theoretically, get in and get out.

I didn’t take into account all the backups from the storms leading up to that small window of opportunity. My 7am flight got delayed. And then delayed again. We boarded but were then told it’d be at least another hour and we were going to have to get off the plane.

I wasn’t going to make my connection. I decided to reroute my flight to avoid the storm and increase my chances of getting there today and not get stuck in Chicago.

I opted for a 2:50pm flight through Washington, DC. They saved a seat for me on two flights since the first connection looked a bit too close. Worst case, I can make the later flight.

The storm, of course, caused delays throughout. The plane to Ottawa that was coming from DC came from Chicago first. It was already behind schedule and I quickly got notice that my flight was delayed to 4pm.

I secured my seat on the later flight since I definitely wasn’t making the earlier flight. No problem. Still plenty of time to make my connection.

As 4pm got closer, it was delayed to 4:15. And then delayed again to 4:45. That lengthy connection was now going to require a bit of a jog across terminals to make it.

As we started our approach into DC, the pilot let us know that weather was preventing us from landing and that he’d cycle around the airport until they were given the okay to land.

After circling for 20 minutes, he came on again to say that the weather wasn’t clearing and that we’d have to land in nearby Richmond.

Welp. There goes that connection.

I managed to reschedule on the 10pm flight. I should be able to make it.

As we sit to get more fuel, the storm heads towards us. There’s lightning. They can’t fuel the plane when there’s lightning so they have to stop and now we have to wait for the storm to blow over.

It’s a strong storm with lots of wind and rain. We’re now grounded for a couple hours while we wait.

It’s after 9pm and that 10pm connection is looking less likely. We have to wait for the storm to be at least 20 miles out before the fuel truck can come back and top us off.

At 9:15, the truck returns. And along with it, hope. On top of that, the 10pm flight I’m trying to catch is coming from Chicago. You know what that means? Yup. It’s delayed! New departure time is 11pm!

We’ve taken off and are on our way to DC. I might actually make it.

Clouds and storms are like country roads. They’re bumpy. This ride to and from Richmond has been like heading down that gravel road, with potholes sending you down and up with such vigour that you wonder if you’ll hit your head on the roof. A little turbulence is easily brushed off. Feeling tossed around is a little more unsettling.

Landed in DC at 10. I have to get from terminal A to D but I’m not too concerned now. I have plenty of time. I stroll over to the shuttle and hop on just as it is closing its doors.

The shuttle makes its way to the terminal. I hop off and stroll to my gate. They’re just offloading the previous flight.

I made it.

Not only that, I managed to get a window seat with an empty seat next to me.

LA, here I come.

Streets of San Francisco

I was making my way to The Coit Tower. The starkness of the black building stood out. Turns out there’s a lovely coffee shop in there, too.

View on Flickr