Jonathan Snook's Blog, page 10

Understanding the Albatross

This morning, I read Heydon Pickering’s post on switching from a multiple column flexbox layout to a single column layout without an intermediate step. I spent a bunch of time figuring out why it works.

Go ahead and read it first, if you haven’t already. Everything I’m going to talk about builds on what he has.

You’re back? You haven’t left? You grabbed coffee because why not? Whichever, let’s continue…

The first thing to mention is that the CSS custom properties that Heydon mentions aren’t required. It’s handy but not necessary. The actual calculations that we care about happen on the flexbox child elements.

Essentially, the flex-basis on the child elements computes to: calc(40rem * 999 - 100% * 999); The first thing I wondered was why the big numbers. The trick is to essentially have the flex-basis be big when the container is small and vice versa.

Let’s say we want the child elements to go into a single column at 500px, we would use the following CSS:

flex-basis: calc(500px * 999 - 100% * 999);

Let’s get rid of those 999s, and see what’s going on.

flex-basis: calc(500px - 100%);

When the container is 500px wide, the flex-basis is 0. When the container is 499px wide, the flex-basis is 1px. When the container is 501px wide, the flex-basis is –1px. At 499px, though, we need the flex-basis much higher. It needs to be at least 250px. Two columns at 250px can’t fit side by side. Thus, we need to multiply by at least 250.

flex-basis: calc(500px * 250 - 100% * 250);

When the container is 500px wide, the flex-basis is, again, 0. But when the container is 499px wide, the flex-basis is 250px. When the container is 501px wide, the flex-basis is –250px. Perfect!

Using 999 works just as well. It’s a big number that works for 99.9% of situations. (Although, if you wanted a “breakpoint” at 2000px, the numbers would be off. It would actually break at 1999px instead of 2000px for a two column design. Somebody might get fired for such a bug!)

Equal Columns

If you want equal column widths, you don’t need to set a min or max-width. Since all columns have the same, large flex-basis, the columns will all grow to be the same size.

If you want columns of different widths, it gets a bit trickier. You can use min-width but you’ll need to set all columns and they’ll all need to add up to 100%. For example, if you want the first of four columns to be 10%, you’ll need to set the other 3 columns to 30% each so that all four add up to 100%. Otherwise, flex-grow steps in and distributes the space evenly.

If you set a width or max-width on a column, that column will be that width when stacked as well as side by side.

No Media Queries

As Heydon says, this technique can work well because no media queries are required—it’s all based on the container size, not the viewport size.

Coming Home

I travel quite a bit. I enjoy travel. I can sleep on planes. I get to see new places. I get to enjoy new experiences.

And then I get home.

The house is quiet.

My cat used to greet me upon my arrival. Then I think his hearing started to go. And then he died last year while I was on a trip.

The house is quiet.

I’ve developed a routine when I get home. No matter the hour, I unpack. The clothes into the laundry hamper. Toiletries into the bathroom drawer. The electronics in the office. Devices plugged in to charge. The passports into the drawer. The suitcase returns to the closet.

On goes the espresso machine. It invariably needs its water reservoir filled. My boarding passes get thrown on top of the shredder.

I used to run to the grocery store to stock up after depleting the fridge before leaving. The grocery store isn’t 24 hours anymore. Too bad. I liked how quiet it was at 2am.

I plop into my office chair, and turn on my computer.

A half-empty bottle of Coke and half-full bag of M&Ms, the remains of my trip sit on my desk.

What have I missed on Twitter? Not much. I caught up in the Lyft ride home.

I should probably head to bed.

Deploying an 11ty Site to GitHub Pages

I am building a new personal site. The idea behind it is pretty simple: it’s a blog that will have a total of 50 pages added to it over 5 years. Not much content and not much complexity.

I debated about just coding the entire site by hand, each and every page. But this seemed like an opportunity to try a static site generator. The last static site generator I used was MovableType back before WordPress was ever a thing.

I’ve heard a bunch of good buzz around 11ty and figured I’d give it a try.

Getting Started with 11ty

11ty was really easy to get started. I ended up forking the blog repo, since I figured it’d have enough stuff in there to get me started. Sure enough, it did.

However, I needed a place for this stuff to live. The rest of Snook.ca sits on a Linode slice and I debated about doing the same. I’d have to set up the Apache configuration and maybe set up automated git hooks to pull in and build the latest version. That seemed like more work than I felt like dealing with.

GitHub Pages

I knew GitHub Pages was a thing, although I’ve never used them. I didn’t even really understand how it works. The project configuration on GitHub let me choose what branch to use but it wasn’t clear which branch I should choose.

I thought maybe if I selected Master, it would just know what to do. Yeah, no.

GitHub Pages takes whatever is on that branch and pushes it live. It doesn’t run any build process from what I can tell. I needed to select the gh-pages branch and then I needed to figure out how to get a build of the site into that branch.

Setting up Travis CI

I noticed a Travis CI build file in the project. I also noticed a Netlify boilerplate. I didn’t put much thought into and figured, let’s go with Travis CI since there’s already a build file there.

I set up an account and then turned on deployment for my 11ty project. I watched it do its first build and then… fail.

Looks like a token issue.

The Personal Token

There’s a $GITHUB_TOKEN variable specified in the .travis.yml file. I know enough not to put any private keys into this file, as that’ll expose it to the world. It says to put the token into Travis.

I went to the settings for the project in Travis and I can see where I set “Environment Variables”. But what am I supposed to specify here?

Turns out, I need to generate a token in GitHub. That’s found under Settings > Developer settings > Personal access tokens.

I gave it a name and gave it repo access. Then I copied that token and went back to Travis to enter a new Environment Variable called GITHUB_TOKEN and pasted the key in there.

My builds were working!

Custom Domain

Unfortunately, every time I did a commit to GitHub, I’d lose the custom domain setting. It would revert back to the default, which is username.github.io/reponame.

Is this a GitHub issue or a Travis issue? Turns out, the latter. If you’re doing a custom domain for this, there are two things you want to adjust:

First, set the domain name in the .travis.yml file under the deploy heading.

deploy:
fqdn: fifty.snook.ca

This was what was blowing out my custom domain setting.

The second thing that needs to be changed is the path prefix. By default, the build expects the site to be in a subfolder off the root. The default path prefix in the 11ty repo is to the name of the repo, /eleventy-base-blog/. If you rename your fork (like I did), you’ll need to update this.

In my case, since I was using a custom domain, I didn’t want any prefix at all.

script: eleventy --pathprefix="/"

And voila!

Le Pigeon

Le Pigeon has been on my list for a little bit. On a previous trip to Portland, I had managed to get reservations to its sister restaurant, Little Bird, situated downtown.

Le Pigeon, however, has been constantly booked and I could never get a reservation for when I’d be in town. I gave them a call and discovered that they have a handful of bar-style seats sitting around the kitchen that are first-come, first-serve. The plan was on: show up right when they open to ensure a seat. It worked.

They offer an a la carte menu but also have a 5 course and 7 course meal options with wine or juice pairings. You might be unsurprised to know that we went for the 7 course meal.

That might’ve been a mistake.

Most restaurants with multiple courses offer up a tasting menu. Each dish is small. It gives an opportunity to enjoy a variety of dishes and allows the chef to build an experience from the first bite to the last.

Le Pigeon, however, served up the full dishes from their menu. There were three appetizers, two main courses, and two desserts. This far exceeded what I would normally order—one main and maybe an appetizer.

As each appetizer came out, I was blown away. Each was unbelievably delicious and, sure enough, the world disappeared. A hamachi crudo, followed with foie gras fajitas, and finally a grilled pork belly with creamy scallop topped with black truffle. So. Good.

The first main course was the daily fish. It was creamy and prepared amazingly well. We were starting to hit the limits of what our stomachs could handle but we’d push it to the limit with the next dish: beef cheek bourguignon. It was rich and heavy and full of flavour.

We could barely eat another bite but there was still dessert! The first dish was a deep fried dough covered with a sauce topped with a bit of foie gras. The non-alcoholic pairing with this dish was a foie gras root beer float that was spectacular. The drink wasn’t overwhelmingly one flavour. I could detect each flavour on its own while still able to enjoy everything together and, of course, it paired fantastically well with the dish.

The last dish was a flourless tort with apples and ice cream, along with an ice cream sandwich. I had given up at this point and could not eat another bite. I was in a daze from eating too much food.

Verdict: The quality of food, the value for what you get, the amount of food, the wine pairings: it’s all just incredible. If you ever find yourself in Portland, Oregon, I highly recommend you go.

50 by 50 for 2018

2018 comes to a close with a formidable first year of the World’s 50 Best Restaurants. Only one North American restaurant remains: Blue Hill at Stone Barns.

Tackling the North American restaurants was an “easy” way to kick off this challenge. The rest of the list may prove more difficult, needing more time to travel farther to reach the other restaurants on the list.

One technique is to “marathon” a bunch of restaurants in close proximity to each other in succession. A trip to New York City, for example, a mere hour-long flight away, resulted in three restaurants in three nights. Trips to Copenhagen and Mexico City included two restaurants each.

We’ll continue this approach to some extent in 2019. A trip to Nottingham in January will include a stopover in London to take in four restaurants from the list!

Following this approach, trips to just three cities—Lima, Paris, and Tokyo—would include 11 restaurants. This plus the trip to London would put me at the halfway mark of the 50 restaurant challenge. No plans yet on when I’ll get to any of these places.

The remaining 25 will require more coordination. Spending the summer driving the European countryside in search of food doesn’t sound so bad. Or, if you’re putting on a conference in any of these cities, you should invite me! wink wink

I raise a glass to 2019 and the food adventures to come!

Reviews from this year:

Saison
Cosme
Eleven Madison Park
Le Bernardin
Alinea
Geranium
Relae
Quintonil
Pujol

Pujol

Quick on the heels of Quintonil, was a popover to Pujol. They are in the same city, after all. The two restaurants are merely blocks away from each other. And fun fact, the husband and wife team that own Quintonil used to work at Pujol.

Pujol was the 9th restaurant on my quest to visit 50 of the World’s 50 Best Restaurants. It ranked 20th on the list in 2017 and 13th in 2018.

I signed us up for the omakase taco experience. For those not familiar with omakase, it’s a “chef’s choice” experience often found at sushi restaurants. (Speaking of, the omakase experience at Bamboo Sushi in Portland, Oregon, is fantastic.)

We arrived and were seated at the bar in the middle of a string of people also there to take in the tacos. There’s plenty of table space throughout the restaurant with a more traditional tasting menu. This omakase experience is its own thing and definitely felt Japanese-inspired.

With the dinner were three alcohol pairing choices: white wine, mezcal, or sake. (See? There’s that Japanese influence.) Having never tried much mezcal, I was excited to try it and what better way than to have a glass with each course!

The corn-themed evening kicked off with a trio of “street snacks” that included baby corn, a puffed corn tortilla with caviar and cream, and (if I recall correctly) a tofu paste. My descriptions are not doing any of these justice. I was floored but how amazing it was and had me excited for the rest to come.

Next up was a tetela—a corn triangle—filled with beans with an uni salsa to top.

From there, we moved through a series of taco courses: Eggplant, then amberjack, a scallop tostada, a seabass belly taco al pastor, and finally, a soft-shell crab taco.

I think the amberjack and the seabass were my favourites of the bunch.

Then, the pièce de résistance: the Mole Madre. I watched chef Enrique Olvera featured on Chef’s Table and in it they talked of this mole, a sauce cooked for over a year. Since that show has aired, it has continued to cook. On this evening, it had been 1762 days. That’s nearly five years!

The mole madre is served with a mole nuevo in the middle, allowing a contrast between the old and the new. And let me just say that it did not disappoint. I would bathe in this, it was so good.

Alas, all good things must come to an end. This meal came to a close with a trio of desserts and a final churro. It was probably the best churro I’ve had, with a crunchiness and tasty balance that wasn’t too sweet or too cinnamon. (I was told to try churros at El Moro but didn’t have a chance to get there. A reason to go back!)

Mexico City didn’t disappoint.

Quintonil

I feel like an addict seeking desperately for his next fix. Each restaurant I go to, I wonder how many of those Ratatouille moments will hit me.

We arrive at Quintonil, just as it opens, and are quickly taken to our seats. The decor is simple, with maybe a dozen tables in the restaurant. Our table is right at the back, near the entrance to the kitchen. Sadly, without a view of the frenetic dance that I envision behind. Throughout the evening, the servers are in and out like bees to a hive.

I have a view of the bar. I can see the wine glasses being lined up, the next bottle being prepared. The style of glass provides a hint of the next dish to come.

The food was delightful. There were some unexpected surprises in the bunch that stood out. Like a nixtamalized tomato that tasted warm and rich instead of cool and acidic. (Today I learned about nixtamalization.) The bread was probably the best bread I’ve ever had, with a crust that was crunchy but not too thick, and a butter that disappeared way too quickly. (Thankfully, they brought more.)

We were delighted and intrigued by the avocado tartare with escamoles. It had a wonderful contrast in textures and a “grain” that we couldn’t figure out what it was. Which leads me to another “today I learned”, escamoles are the edible larvae and pupae of ants. As Wikipedia says, “they taste buttery and nutty.” It’s probably for the best I didn’t know that at the time.

My favourite dish of the evening was the pork in chile pasado. It was flavourful and balanced.
Another dish that I really liked was the Jerusalem artichoke tamale.

My favourite dessert was the Sapodilla fruit rocks. It was such a new flavour that every bite was savoured.

The alcohol pairings were quite good. Every drink, with the exception of one, paired extremely well. A particular standout was a Mexican beer, Finisima. It had a Belgian quality that was smooth and easy to drink. We also had an “orange” wine from the country of Georgia. Yet another “today I learned,” orange wine isn’t made from oranges.

Not every dish was spectacular. The ceviche was a tad too citrusy. And there was a potato dish that was fine but a bit bland. The menu says it was supposed to be fish, so I suspect there wasn’t any good fish available that evening. These dishes were still a 7/10, so it’s not like I still didn’t enjoy them.

All in all, it was a wonderful evening. If you find yourself in Mexico City, I highly recommend spending an evening here. With the currency exchange right now, it’s an exceptional value.

Quintonil was the 8th restaurant on my quest to visit 50 of the World’s Best 50 Restaurants. It ranked 22nd on the list in 2017 and 11th in 2018.

Relae

Relae was the 7th restaurant on the quest to visit 50 of the World's Best 50 Restaurants before I turn 50. It was ranked 39th in 2017 and, unfortunately, fell out of the top 50 for 2018. It’s also a Michelin 1-star restaurant.

Relae was a more relaxed and intimate vibe than Geranium. We were placed at the bar at the edge of the kitchen—an ideal spot to watch everything going on, including the two chefs prepping right in front of us.

I enjoyed the chill environment with soft funk music playing throughout.

The restaurant offers a short and long menu and of course I went with the long menu. I went with the wine pairings while Kitt went for the juice pairings. Ever since I had a juice pairing at KOKS, I’m always delighted to see it at other places.

The courses came out in staccato, creating a very jazzy feel to the presentation. Different chefs and servers would show up to present and talk about a particular dish. We didn’t feel rushed. Rather, we were delighted by the slightly frenetic feel of the evening.

Similar to Geranium, the meal was almost entirely pescatarian save for one duck course. (Well, maybe you’d consider it two courses since it was two dishes served at the same time.)

My favourite trio of courses was the seafood: squid followed by a bbq trout followed by a deep fried oyster. The BBQ trout, in particular was absolutely succulent and filled me with delight.

If you find yourself in Copenhagen, I highly recommend you find your way here. It's not too expensive, the food is fantastic, as is the overall experience.

Geranium

Geranium is the 6th restaurant on my quest to go to the World’s Best 50 Restaurants. It’s 19th place for both 2017 and 2018 and is a Michelin 3-starred restaurant in Copenhagen.

The restaurant is situated on the 8th floor of the building where the Danish national football club plays—an interesting location to be sure.

From the moment we walked in the restaurant, the service was fantastic and friendly. The kitchen prep area sits at one end of the venue and was neat to take a peek every now and then into what might be coming up next. (It’s a bit difficult to see from halfway across the restaurant. There is a table right next to the prep area that you can book.)

Over the course of the meal, the servers really made us feel special. I enjoyed their synchronicity with dish placement and I definitely enjoyed them topping up my glass of wine.

As an aside, I find wine pairings to be confusing. Some places will do a glass with each course. I like to enjoy the particular wine before, during, and after the particular dish it’s paired with. Some places, however, will pair a wine with two to three courses. As such, I’ll finish the wine after a dish, only to have another plate come out with no wine to go with it.

Having them top up my glass is nice but I also don’t want to be completely sloshed and stumbling a third of the way into the meal!

The food itself was delightfully yummy. There wasn’t a bad dish to be had. The courses were mostly pescatarian, with a single duck course at the end.

However, not a single dish made the world disappear as my entire life became about this food in my mouth at that very moment. The best way to describe it is that every dish is a 9/10. A perfectly formidable rating but nothing was a 10 out of 10. Consistent and delicious but not daring.

Verdict: I think there are other places I’d seek out before Geranium. It’s definitely on the pricey side but, at the same time, it was a wonderful experience and I don’t think you’d be disappointed.

Also, I want their wine cellar.

Lost in a Moment

I’m lost in a moment. My gaze loosens, my thoughts quieten.

I’m home. I’m worried about my kids. I want them to succeed and both are struggling. I’m worried about dinner. I’m worried about shovelling the driveway. I’m worried about getting my taxes filed. I need to get my corporate taxes done in the next couple weeks. My year end was months ago and I always leave it to the last minute.

Am I working fast enough at the new job? Nobody has reviewed my pull request yet. I already have a bunch of opinions about how I want to change things. I don’t have enough context yet to voice those opinions.

I’m in Mexico City. I’m sitting in a little coffee shop. They have “flat white” on the menu. I order a “pain au chocolat” to go with it. Apparently ordering that in French worked okay. I find it a bit stressful trying to communicate with people in a language I don’t speak.

I’m staring out the doorway, watching people walk by on this delightfully warm yet cool morning. A couple is sitting at one of the tables outside with a dog lying at their feet.

I don’t understand a word that anybody is saying.

I’m noticing the building across the street, with its raw concrete walls and balconies. I notice the subtle logo on the door of the coffee shop. It’s a quiet Sunday morning and things feel relaxed. I feel relaxed.

I am in the moment and not thinking about taxes or work.

When travelling, I often find myself in these moments. I am grateful for being able to travel. In my early twenties, I passed on trips my roommates embarked on. Once they drove across country and down the west coast. Another time, going to New York for New Years Eve. (They brought me back a Mujibur and Sirajul t-shirt that I still have in my closet.) Instead, I worked two jobs trying to make ends meet.

I am grateful for a career that has enabled the freedom to travel, to speak at conferences and to work remotely.

I finish up my flat white and head out to explore the city.