Josh is great at explaining tricky concepts and here he’s really set himself a challenge: explaining layout modes in CSS.
I found this to be thoroughly engrossing. An articulate composition, you might say.
I couldn’t help thinking of J.G. Ballard’s short story, The Drowned Giant.
Chip Delaney and Octavia Butler on a panel together in 1998 when hypertext and “cyberspace” are in the air. Here’s Octavia Butler on her process (which reminds me of when I’m preparing a conference talk):
I generally have four or five books open around the house—I live alone; I can do this—and they are not books on the same subject. They don’t relate to each other in any particular way, and the ideas they present bounce off one another. And I like this effect. I also listen to audio-books, and I’ll go out for my morning walk with tapes from two very different audio-books, and let those ideas bounce off each other, simmer, reproduce in some odd way, so that I come up with ideas that I might not have come up with if I had simply stuck to one book until I was done with it and then gone and picked up another.
So, I guess, in that way, I’m using a kind of primitive hypertext.
Personally, I’m not convinced that a new element is needed but I’m open to the suggestion.
This is a useful technique that future me is almost certainly going to need at some point.
Yet another clever technique from Lea. But I’m also bookmarking this one because of something she points out about custom properties:
The browser doesn’t know if your property value is valid until the variable is resolved, and by then it has already processed the cascade and has thrown away any potential fallbacks.
That explains an issue I was seeing recently! I couldn’t understand why an older browser wasn’t getting the fallback I had declared earlier in the CSS. Turns out that custom properties mess with that expectation.
A case study from Twitter on the benefits of using a design system:
With component-based design, development becomes an act of composition, rather than constantly reinventing the wheel.
I think that could be boiled down to this:
Component-based design favours composition over invention.
I’m not saying that’s good. I’m not saying that’s bad. I’m also not saying it’s neutral.
Jigsaw puzzle companies tend to use the same cut patterns for multiple puzzles. This makes the pieces interchangeable, and I sometimes find that I can combine portions from two or more puzzles to make a surreal picture that the publisher never imagined. I take great pleasure in “discovering” such bizarre images lying latent, sometimes for decades, within the pieces of ordinary mass-produced puzzles.
Refresh for a new design challenge.
Rachel gives a terrific explanation of CSS layout from first principles, starting with the default normal flow within writing systems, moving on to floats, then positioning—relative, absolute, fixed, and sticky—then flexbox, and finally grid (with a coda on alignment). This is a great primer to keep bookmarked; I think I’ll find myself returning to this more than once.
The bet to make is that we’re going to see more use of specialized languages. And HTML and CSS are the grandaddy specialized languages that have enough social consensus and capital investment to be the seeds of the next generation.
Paul finishes up his excellent three part series by getting down to the brass tacks of designing and building components on the web …and in cities. His closing provocation has echoes of Heydon’s rallying cry.
If you missed the other parts of this series, they are:
A weekly list of short, concrete actions to defend the weak, rebuild civic institutions, and fight right-wing extremism. For UK people.
I really like this list of observations (Vasilis pointed it my way). I feel like it encapsulates some of what I was talking about in chapter two of Resilient Web Design. The only point I’d take issue with now is the very last one.
The thesis: any film is improved by playing Walk Of Life by Dire Straits over the ending.
The proof: this website.
(this is absorbing and brilliant)
PPK tests the various ways that mobile browsers handle position:fixed, complete with videos.
Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.