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 Th...
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 restaur...
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 ...
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_css/css-concerns"> <meta property="og:title" content=&qu...