adactio.com/links/11692

Google may or may not decide to run your JavaScript, and you don’t want your business to depend on its particular inclination of the day. Do server-side/universal/isomorphic rendering just to be safe.

adactio.com/links/11691

Then I tested it on real devices.

Here’s the problem: when a page loads up in a mobile browser—like, say, Chrome on an Android device—the URL bar is at the top of the screen. The height of that piece of the browser interface isn’t taken into account for the viewport height. That makes sense: the viewport height is the amount of screen real estate available for the content. The content doesn’t extend into the URL bar, therefore the height of the URL bar shouldn’t be part of the viewport height.

But then if you start scrolling down, the URL bar scrolls away off the top of the screen. So now it’s behaving as though it is part of the content rather than part of the browser interface. At this point, the value of the viewport height changes: now it’s the previous value plus the height of the URL bar that was previously there but which has now disappeared.

I totally understand why the URL bar is squirrelled away once the user starts scrolling—it frees up some valuable vertical space. But because that necessarily means recalculating the viewport height, it effectively makes the vh unit in CSS very, very limited in scope.

In my initial implementation of Resilient Web Design, the one where I was styling almost everything with vh, the site was unusable. Every time you started scrolling, things would jump around. I had to go back to the drawing board and remove almost all instances of vh from the styles.

I’ve left it in for one use case and I think it’s the most common use of vh: making an element take up exactly the height of the viewport. The front page of the web book uses min-height: 100vh for the title.

But as soon as you scroll down from there, that element changes height. The content below it suddenly moves.

Let’s say the overall height of the browser window is 600 pixels, of which 50 pixels are taken up by the URL bar. When the page loads, 100vh is 550 pixels. But as soon as you scroll down and the URL bar floats away, the value of 100vh becomes 600 pixels.

(This also causes problems if you’re using vertical media queries. If you choose the wrong vertical breakpoint, then the media query won’t kick in when the page loads but will kick in once the user starts scrolling …or vice-versa.)

There’s a mixed message here. On the one hand, the browser is declaring that the URL bar is part of its interface; that the space is off-limits for content. But then, once scrolling starts, that is invalidated. Now the URL bar is behaving as though it is part of the content scrolling off the top of the viewport.

The result of this messiness is that the vh unit is practically useless for real-world situations with real-world devices. It works great for desktop browsers if you’re grabbing the browser window and resizing, but that’s not exactly a common scenario for anyone other than web developers.

I’m sure there’s a way of solving it with JavaScript but that feels like using an atomic bomb to crack a walnut—the whole point of having this in CSS is that we don’t need to use JavaScript for something related to styling.

It’s such a shame. A piece of CSS that’s great in theory, and is really well supported, just falls apart where it matters most.

Update: There’s a two-year old bug report on this for Chrome, and it looks like it might actually get fixed in February.

Scrolling.

Add to home screen.

adactio.com/links/11687

The web reaching more people as they come online with Mobile. There is still a huge amount of potential and growth in India, Indonesia, China, Thailand, Vietnam, all of Africa. You name it, mobile is growing massively still and the web is accessible on all of these devices.

adactio.com/links/11686

adactio.com/links/11685

Non-fiction

• Endurance by Alfred Lansing
• The Rational Optimist by Matt Ridley
• The Real World of Technology by Ursula Franklin
• Design For Real Life by Eric Meyer and Sara Wachter-Boettcher
• Practical SVG by Chris Coyier
• Demystifying Public Speaking by Lara Hogan
• Working The Command Line by Remy Sharp

Fiction

• The Revenant by Michael Punke
• The Adjacent by Christopher Priest
• Helliconia Spring by Brian Aldiss
• High Rise by J.G. Ballard
• The Affirmation by Christopher Priest
• Brodeck’s Report by Philippe Claudel
• Greybeard by Brian Aldiss
• Fictions by Jorge Luis Borges
• The Long Way to a Small Angry Planet by Becky Chambers
• The Dark Forest by Cixin Liu
• Death’s End by Cixin Liu
• The First Fifteen Lives of Harry August by Claire North

Seems kinda meagre to me. Either I need to read more books or I need to keep better track of what books I’m reading when. Starting now.

It made me fall back in love with the web and with making things for the web.

adactio.com/links/11682

adactio.com/links/11681

I stood on the darkening quay side in Cobh on Christmas Eve, and looked at a statue of Annie there. She seems small and capable, her hands lightly resting on her little brothers’ shoulders, gazing back at a country she would never see again. An Irish naval ship had returned to the harbor earlier that week from its mission off the Mediterranean coast, a mission that has rescued 15,000 people from the sea since May 2015, though 2016 was still the deadliest one for migrants crossing the Mediterranean since World War II.

adactio.com/links/11680

adactio.com/links/11679

The big picture was dominated by Brexit and Trump, disasters that are sure to shape events for years to come. I try to keep the even bigger picture in perspective and remind myself that our species is doing well, and that we’re successfully battling poverty, illiteracy, violence, pollution, and disease. But it’s so hard sometimes. I still think the overall trend for this decade will be two steps forward, but the closing half is almost certain to be one step back.

Some people close to me have had a really shitty year. More than anything, I wish I could do more to help them.

Right now I’m thinking that one of the best things I could wish for 2017 is for it to be an uneventful year. I’d really like it if the end-of-year round-up in 365 days time had no world-changing events.

But for me personally? 2016 was fine. I didn’t accomplish any big goals—although I’m very proud to have published Resilient Web Design—but I’ve had fun at work, and as always, I’m very grateful for all the opportunities that came my way.

I ate some delicious food…

I went to beautiful places…

And I got to hang out with some lovely doggies…

Have a happy—and uneventful—new year!

Ribeye.

Nightfireburger.

This document provides Best Practices related to the publication and usage of data on the Web designed to help support a self-sustaining ecosystem. Data should be discoverable and understandable by humans and machines.

adactio.com/links/11675

Bríg.

adactio.com/links/11673