Jonathan Snook's Blog, page 13

Animating Progress

“How hard can it be?” (Famous last words.)

The <progress> element has been in browsers for years. (Lea Verou worked on a polyfill back in 2011!) One might expect that after all these years, things are rock solid. Turns out, not much has changed over the years. It’s still a mess and the process of animating the <progress> element is… not at all smooth.

Which browsers

The goal from the outset was to get this working in latest versions of Chrome, Safari, Firefox, Edge, and maybe Internet Explorer.

Progress HTML

The <progress> element has a max attribute and a value attribute. The max attribute must be a value greater than 0. If you don’t set the max value, it defaults to 1. The value is a number between 0 and max value.

For the sake of this article, I won’t get into indeterminate progress bars, which don’t have a value set.

Styling progress

All browsers provide their own styling of the <progress> element but this is easily overwritten. Just start setting some styles!

progress {
background-color: white;
border: 1px solid blue;
/* and so on and so on */
}

(Many tutorials will tell you to set the appearance — and all of its vendor-prefixed equivalents — to none, but that’s not necessary now.)

In Blink and Webkit, you might be wondering why the background colour of the progress bar didn’t actually change. For that, you need to target a pseudo-element.

::-webkit-progress-value {
background-colour: white;
}

Excellent.

Now we need to style the bar that shows us the progress. The, um, progress bar. Each browser is a bit different in their choice of naming.

::-webkit-progress-value {
background-color: blue;
}
::-moz-progress-bar {
background-color: blue;
}
::-ms-fill {
background-color: blue;
}

We now have something that looks reasonably consistent across browsers.

Changing Progress Value

To animate progress, we need to have the value of the progress element change. For that, we need some JavaScript.

// let's assume only 1 progress element on our page.
var p = document.querySelector('progress');
// where val is our new value
p.setAttribute('value', val);


Let’s Animate!

Edge and Internet Explorer animate the progress bar right out of the box. Perfect! Hashtag shipit.

For Chrome and Safari, we can simply set a transition on the width of the progress bar.

::-webkit-progress-value {
transition: width 1s;
}

* chef kisses fingers *

Hellfirefox

One would wish/hope/desire that setting a simple transition would also work for Firefox but you’d be wrong. Each browser has certain things that you’re not allowed to do with each of the elements.

In Firefox, you can’t set a transition on the width. You also can’t modify the width. But you can transform it. And you can transition other properties.

I suspect there’s an easier way to do this but this is where my mind went: let’s animate padding-bottom!

Animating padding-bottom means that I could get the height of the progress bar to equal the width of the progress bar. The problem is that it’s going in the wrong direction. For that, I transform the progress bar to rotate it 90 degrees, getting it to animate to the right, just like we want it!

::-moz-progress-bar {
transition: padding-bottom 1s;
padding-bottom: var(--value);
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-15px);
padding-left: 15px;
}

We set the transform-origin to 0 0 to put it in the top left corner. (You can also specify top left but 0 0 takes up less bytes.)

The progress bar will now grow up instead of to the right. (When we set the --value custom property, it’ll grow up and to the right.)

If we just did the rotation, the progress bar would sit on top of progress area. We need to shift it down. (Which, since, we’ve rotated 90 degrees, is actually to the left.) We need to use translate to shift the element the height of the progress area. In my example, it’s 15px in height, so shift the element down 15px. If it was 30px in height, you’d shift it down 30px.

Things are starting to come together.

Now that it’s rotated, the height of the bar changes when the value changes. If it’s longer than the height of the progress area, it’ll obscure other things on the page. We can fix this by setting clipping the overflow on the progress element.

progress {
overflow: hidden;
}

Also due to the rotation, the height of the progress bar (which defaults to the height of the progress area) will affect the width of the rotated bar. Therefore, we need to set the height of the progress bar to 0.

::-moz-progress-bar {
height: 0;
}

With all that done, we can set the value of the custom property to the same value as the value attribute.

p.style.setProperty('--value', val + '%');

Like butter!

But I want no/different animation in IE and Edge

“Uh, look over there!” * runs away *

There’s no way to turn off or adjust the animation or transition timing for the progress bar in IE or Edge (that I have found).

(It looks like Microsoft actually has a wrapping element and animates that. That wrapping element clips the ::-ms-fill element, preventing any adjustments to animation from happening.)

If you’d like to see all of this wrapped up in a Codepen, head on over to my demo.

That Time I Ate at Five Michelin-starred Restaurants in a Week

Not every idea is a smart one. I’ve heard stories of how difficult it is to get a reservation at an upscale restaurant. They’re booked for months.

We had ten days planned in San Francisco, Kitt and I. Her speaking at Imagecon and then us attending Smashing Conf the following week. The San Francisco Bay Area is home to a plethora of restaurants including seven 3 Michelin-starred restaurants plus all the 2- and 1-star restaurants.

Eater has a lovely mapped guide of all of them. This would be our guide for the week.

Many of the restaurants were as far north as Santa Rosa and as far south as San Jose. Of those seven 3-starred restaurants, only four of them are in San Francisco city proper.

I hadn’t thought ahead. I did my research on the Monday we arrived. What are the chances I’d be able to get a reservation at any of these four restaurants? Turns out, quite good! I got reservations at all four! Benu, Coi, Quince, and Saison.

But Why?

I enjoy food. My girth is a testament to that. Part of the draw of going to an upscale restaurant is the search for what I call a Ratatouille moment.

David Chang talks about how “it’s much more powerful to evoke those taste memories while cooking something that seems unfamiliar.”

How many Ratatouille moments could I have within a week?

Benu

This was first. We had some cod, we had some sea urchin, we had some glazed quail. It was all quite delicious.

Probably my favourite of this entire menu was the beverage pairing, which included beer and sake. It introduced me to a new favourite beer: the Rodenbach Grand Cru. It’s sweet with just a hint of sour (and surprisingly available at my local liquor store).

Being first meant that everything was going to be in comparison to this.

Saison

Saison was up next, an eleven course meal only one day after a nine course meal. (My ideas aren’t always the brightest but they can be ambitious.)

We sat “in the kitchen”, which meant that we had a view of the kitchen, could see all the preparation, and could hear them yell “Yes, Chef” every time a new order came in. It was quite delightful.

We noticed some overlap in menus: the cod, some sea urchin, and, again, a glazed barbecued quail. There was a caviar option that I opted into that was a bit heavy on the butter (if there can be such a thing).

The antelope was also quite delicious, much like the rest of the meal. All in all, everything was wonderful. (And if I had to choose, I’d pick Saison over Benu.)

Conference Break

Thursday was conference day. You’d think this would mean getting a bit of a break but no, you’d be wrong. There was a speaker dinner which turned out to be a five course meal at the Four Seasons.

Lots of great table conversation meant that I wasn’t paying too close attention to what we had. I just remember it being good (along with a lovely wine pairing throughout the meal).

Quince

Friday rolled around and it was time for our third 3-star restaurant. If you’re counting, we’re at 25 courses so far and Quince will add another 10.

Quince ended up being our favourite, by far. I talked about the Ratatouille moments and this meal was filled with them. The ravioli at the beginning was wonderful. I upgraded to the caviar panna cotta and so glad I did. It came with a rich toasted brioche that I could’ve eaten a whole loaf of, if given a chance. Absolutely amazing.

The white asparagus (in three variations) was delicious.

I was thoroughly stuffed by the time dessert rolled around and they kept bringing out more treats.

The Montreal Interlude

So, before making our way to San Francisco, my buddy Ara asks if I’d be interesting in going to Au Pied de Cochon with him and his friends.

For those not in the know, Au Pied de Cochon is what one could nominally call a sugar shack. It’s a cabin about a half hour outside of Montreal that serves a 12 course meal of decadence. Michelin doesn’t come to Canada but if they did, this place would likely have some stars of its own.

The restaurant is completely booked for 2018. Ara got his reservation back in February. But of all weekends to have reservations, it’s the weekend we’re in San Francisco.

Are you thinking what I’m thinking? I looked up flights and wouldn’t you know… there’s a direct flight from San Francisco to Montreal on Saturday morning. And a return flight on Sunday morning.

Flying across the country just for dinner isn’t the brightest of ideas but as might have been established by now, I am not a smart man.

Tickets bought.

And it was decadent. The first course was a three-layer cake of foie gras. Every dish had maple syrup in it. There was a turducken equivalent with a pig stuffed with a rabbit stuffed with foie gras.

The absurdity of the past five days is settling in.

But we’re not done yet. We’re up at 5am on Sunday morning to catch a 7am flight back to San Francisco.

Michael Mina

Sunday evening, we head over to our friends’ place—which happens to be a catamaran—for dinner. A lovely (and relaxing and not at all gluttonous) one course meal.

Monday morning rolls around and we’re looking for lunch options. Once again, I’m struck with brilliance and think, “I wonder if there are any 1 or 2-star restaurants open today.” Turns out, most fancy restaurants are closed Sunday and Monday. And many more don’t open until dinner service. Chipotle was looking to be our most likely choice.

Wouldn’t you know it, though. Michael Mina—a mere 5 blocks from where we were staying—was not only open, it was also open for lunch. A 1 Michelin-starred restaurant booked!

We were the second group in the place but it slowly began to fill up over lunch—as did our bellies. (Filled from the multi-course meal, not the people. No Soylent Green here.)

We started with a delicious tuna tartare mixed with a quail egg and some pine nuts. A wonderful mix of taste and textures.

I splurged for the wagyu beef. It was a small portion but the sear was just right and the meat nearly melted in my mouth. Absolutely worth it. We got a linguine with black truffle that was just okay. The taste was flat and didn’t really stand out.

Overall, it was a decent meal and a lovely lunch.

Coi

Tuesday rolls around and there’s one reservation left: Coi. Amusingly, it’s just around the corner from Quince.

Kitt had a meetup down in Mountain View, so Jina joined me for this one.

Coi didn’t have a wine pairing. I’m always trepidatious because it means committing to a single wine over the course of multiple courses. We chose a French Syrah that wasn’t overpowering and with some soft fruity notes. It worked pretty well with everything.

There was a white asparagus dish with a sweet cream topped with caviar and gold leaf. I savoured every bite.

We ended up splitting a tawny port and a vintage port with dessert. A lovely way to end the meal.

Seventy Courses, Thirteen Stars

All told, approximately 70 courses of food was eaten over just one week. A total of thirteen Michelin stars. This ridiculous week has been quite the adventure.

My favourite of the week would have to be Quince. Au Pied de Cochon came in second. Lastly, I think Michael Mina would take third place. The latter two were both a good bang for the buck (flights excepted).

Now back to my regular single course meals of grilled cheese sandwiches and delivery pizza.

Open Up

She asked me to open up. My maw, like gates to an eternal hell filled of bile and hate, gaped wide, spewing a mountain of rage and tears until I was left spent, empty, and letting time replenish it with renewed hurt.

Budapest in Spring

Heading up the funicular, looking out over the bridge and the Pest side of the city. As I had walked over that bridge earlier, there was a fender bender. Two cars stopped in the one lane across the bridge, nowhere for the other cars to go. Good thing I was walking over.

View on Flickr

Rattled

I have come of an age when those that pass away are closer and closer to my heart. Each death rattling me unnervingly more. May it never get so close as to shatter my heart entirely.

One Change Changes Everything

Six years ago, I didn’t drink coffee. If I recall correctly, it was Robert Nyman who insisted I have a latte when I told him I didn’t drink coffee. It was likely a year or two after that before I had another. It’s only been in the last three years or so that I’ve drank lattes (and cappuccinos and espressos) with any regularity.

The idea of buying an espresso machine probably felt out of character for anybody who knew of my previous (and still lingering) Coke habit. (Note the capital C. Very important.)

As I’ve dived into the world of espresso making, I’ve learned a lot (but still have a lot to learn) about what makes a good espresso.

If I’m at some cafe or restaurant where I can see them making my drink, I’ll usually have a good idea of whether it’ll be good or not just by looking at the timing.

Did it come out too quickly? Did it take too long?

Now I’m learning about brew ratios. I currently use about 15g of grind which gives me about 40g of espresso. Anytime I try a new bean, I play around with the grind to get back to that 15g, which should give me that 40g of espresso. A 1:2.5 ratio. A normale.

I’ve been pondering playing with a ristretto (1:1) or a lungo (1:3–1:4). The problem is, I haven’t figured out how to make these adjustments without wasting a lot of coffee to get there.

I start using less or more ground coffee and suddenly all my timings are off. I’m not getting enough coffee or it’s taking too long. What variables do I need to change?

I end up going through a dozen shots or more making a bunch of small changes and might still not have anything that tastes good. I easily waste half a bag to find the right combination. If I’m lucky.

If I’m not lucky, I get frustrated and return to what I know. I have beans and a grind and a grind weight that works. And when it works, it’s amazing. I can make a latte for someone and make it look effortless.

Everything else is horrible. These small changes highlight how much I still have to learn.

Stairs

At the Hotel Josephine in Paris, in town for the dotCSS conference. The view both in and outside of the hotel was filled with delightful scenes. These stairs were the quickest way to make our way down the six floors to the main level.

View on Flickr

Safari display:contents bug

I just came across an interesting bug. In Safari 11.0.2 on desktop and on the phone, display:contents falls back to display:inline instead of being ignored.

I created a Pen to demonstrate:

See the Pen display contents by Jonathan Snook (@snookca) on CodePen.

I also was able to test on iOS 10.3.3 and it also seemed to exhibit this behaviour. iOS 9 didn't.

The Open Graph and Sharing Tags

Awhile back, I decided I wanted to have those fancy cards show up when I or anyone else posted a link to my blog.

Twitter card with small image on the left

To do this, you need to add a few meta tags to your pages.

<meta property="og:url" content="https://snook.ca/archives/html_and_cs...
<meta property="og:title" content="CSS Concerns">
<meta property="og:description" content="These days, ...">
<meta property="og:type" content="article">
<meta property="og:image" content="https://snk.ms/logo.gif">

The og: tags are part of the Open Graph. The Open Graph allows you, the web developer, to specify structured data about the content on the page. Services such as Twitter, Facebook, and Google use these in a number of different places. One such place is the “share cards” that are displayed when you post a link to these services.

The og: tags are specified using property and content attributes.

Twitter allows you to specify the type of card it should use.

<meta name="twitter:card" content="summary">

The summary indicates that this is using Twitter’s smaller card style that has the image off the left side. Facebook appears to choose card layout based on the size of the image attached. For example, since my logo doesn’t meet the minimum 200px width, it won’t be shown in Facebook’s card. (I should probably upload a larger logo!)

When I added photography to my blog, the images were going to be bigger. As a result, I wanted to use the larger card style.

Twitter card with large image on top

My content management system checks to see if there’s a large image attached to the article. If it is, it specifies the summary_large_image value in the content attribute.

<meta name="twitter:card" content="summary_large_image">


Duplicate Tags

One thing that seemed silly was the duplication of the article description. Since these use different attributes, I decided to try combining them onto a single element. At first, this didn't work. Twitter wouldn't pull in the description.

<meta name="description"
property="og:description"
content="These days, ...">

I thought that I was done for and was about to give up. Then I remembered a bug I ran into a long time ago where attribute order caused a SOAP request to fail. That wouldn’t be the case here, would it? It turns out, it is.

<meta property="og:description"
name="description"
content="These days, ...">

By specifying the property attribute before the name attribute, the Twitter Card validator was pulling in the description. Other Open Graph validators also seem to be okay with this approach.

Final Code

Here’s what I now have on my site:

<meta property="og:url" content="https://snook.ca/archives/html_and_cs...
<meta property="og:title" content="CSS Concerns">
<meta property="og:type" content="article">
<meta property="og:description"
name="description" content="These days, ...">
<meta name="twitter:card" content="summary">

You can access the following validators to verify that you've specified everything correctly:

Twitter Card Validator
Facebook Sharing Debugger

Not So Reflective

It’s the new year. Not all that shocking to you, I’m sure, unless you’ve been busy for the last few weeks. But here we are. Many are posting their retrospectives of how their year went. Or they’re posting their theme word for the year or their resolutions or their goals.

I’ve tried resolutions and themes. A year is a long time to stick to such a thing and—inevitably—things happen.

For this year, I decided not to do any of that. I’m going to take it as it comes, crossing the bridges when I get there.

Photography, for example, has been something that I’ve enjoyed recreationally for years but always felt my photos lacking. In the last couple years, I’ve been increasingly pleased with how my compositions and post-production work has evolved.

Since I hadn’t been blogging much about web development, I decided to expand the topics I post. If you follow my Twitter feed or subscribe to my RSS, you’ve likely seen the sudden introduction of photos to the blog. I’m still not sold on the design, especially on the home page, but instead of waiting for perfection, I decided to just ship something.

I don’t think I’ll ever have a career doing it. It is fun, though, and I plan to print some photos off to put on my walls.

I’ve also found myself delighted at making lattes. Last year, I decided that I wanted to introduce a ritual to my life. This was inspired by a story I had read years earlier about Mister Rogers. Yes, that Mister Rogers.

“...he wanted to do things right, and whatever he did right, he wanted to repeat. And so, once upon a time, Fred Rogers took off his jacket and put on a sweater his mother had made him, a cardigan with a zipper. Then he took off his shoes and put on a pair of navy-blue canvas boating sneakers. He did the same thing the next day, and then the next... until he had done the same things, those things, 865 times, at the beginning of 865 television programs, over a span of thirty-one years.”

To enable this new ritual, I bought an espresso machine. But not just any machine. I decided to invest in one of the best machines out there: the La Marzocco GS3. With the right equipment taken care of properly, the expectation is that this machine will last me a lifetime.

And it has opened up a world of discovery as I learn about beans and brew times and temperatures and all the science and art that goes into creating a really good cup of coffee.

I’ve enjoyed learning again. I’ve enjoyed the ritual of practice. I’ve enjoyed seeing progress in my abilities. A smile grows wide on my face as I take a sip of a drink that is as good as, if not better than, what I’ve had at most coffee shops in town.

I don’t know if 2018 will bring new rituals. But it’ll bring new projects and new ideas. It’ll be filled with family and friends and travel.

Maybe even a bridge or two.