Understanding Layout Algorithms
Josh is great at explaining tricky concepts and here he’s really set himself a challenge: explaining layout modes in CSS.
Link tags: position
20
Bones, Bones: How to Articulate a Whale
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.
Science Fiction-Media in Transition
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.
CSS Anchored Positioning
An interesting proposal for defining how one element could be “anchored” to another, and how that positioning could be expressed declaratively instead of having to write a whole load of JavaScript. Melanie’s looking for use cases so share ‘em if you have ‘em.
Personally, I’m not convinced that a new element is needed but I’m open to the suggestion.
Sticky CSS Grid Items | Melanie Richards
This is a useful technique that future me is almost certainly going to need at some point.
Hybrid positioning with CSS variables and max() – Lea Verou
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.
How using component-based design helps us build faster
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.
Puzzle Montage Art by Tim Klein
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.
designhumandesign
Refresh for a new design challenge.
Getting Started With CSS Layout — Smashing Magazine
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.
CSS and Markup in Javascript is an Evolutionary Dead End
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.
Poco Apollo
Here’s a beautiful use of the web audio API: Enoesque generative music composed right in your browser. Each piece is generated from one of the 14,226 photos in NASA’s Apollo archive. The darker and murkier the picture, the moodier the music.
Sticky headers
A three-part series by Remy looking at one interface pattern (a sticky header) and how his code evolved and changed:
Designing Systems, Part 3: Components and Composition / Paul Robert Lloyd
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:
The Loyal Opposition by Adrian Hon & more
A weekly list of short, concrete actions to defend the weak, rebuild civic institutions, and fight right-wing extremism. For UK people.
Subscribed.
Rafaël Rozendaal - Formal characteristics of the browser
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 WALK OF LIFE PROJECT
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)
Writing for Yourself (& the Power of Absolute Positioning)
We should write for ourselves, we should write about whatever we want to. Not just about the web either. Our twitter feeds don’t need to be a highlight reel of our best moments and not every blog post needs to be a stinging critique of the latest javascript framework. They just need to reflect who we are and what we think about and with any luck, when we look back on them, we might learn something about ourselves.
Position: fixed revisited - QuirksBlog
PPK tests the various ways that mobile browsers handle position:fixed, complete with videos.
Fixed Positioning in Mobile Browsers | Brad Frost Web
Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.