A Utility Class for Covering Elements
Earlier this month Michelle Barker looked into how to cover elements with CSS and had this interesting tip that I’ve never seen before:
.original-element {
position: relative;
}
.covering-element {
position: absolute;
inset: 0;
}Here’s a tiny demo of that. What interests me most here is that inset: 0 bit, which is part of the Logical Properties spec. Adam Argyle summarized it all not so long ago in a neat post where he writes that:
…a logical property is one that references a side, corner, or axis of the box model in context of the applicable language direction. It’s akin to referencing someone’s strong arm, rather than assuming it’s their right arm. “Right” is a physical arm reference, “strong” is a logical arm reference, contextual to the individual.
A Calendar in Three Lines of CSS
Speaking of nifty tricks, here’s a way to make a calendar with CSS Grid:
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.first-day {
grid-column-start: 3;
}And…that’s it! At least that’s according to the extremely brilliant Calendar Tricks, where they look into just how many superpowers CSS Grid now gives us when it comes to mkaing complex layouts.
At my previous gig I used to do a lot of interviews with front-end engineers and this was one of the tasks I’d set them to up do: make a calendar with CSS and HTML. It doesn’t sound all that complex but once you get to see someone make it it sort of reveals how they think about web design in general I think.
So learning about this sort of layout stuff is super important I think. Although, there might be a thousand ways to make a calendar with HTML and CSS, this one above is certainly one of the coolest.
Highlights from Chrome Dev Summit 2020
Ire Aderinokun writes up some of her thoughts from this year’s Chrome Dev Summit and I particularly liked this bit:
The content-visibility property works hand in hand with the contain-intrinsic-size property to prevent potential issues with Cumulative Layout Shift. Because the browser isn’t rendering the element fully on load, there may be some shift when it does need to render the element. In order to minimise shifts happening on the page, we can use the contain-intrinsic-size property to specify dimensions for the element even without the content being rendered.
Ire then gives us an example with how the CSS might look like:
.below-fold-element {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}So this effectively sets the height of an element if it needs to be loaded in after the fact. I like this! Layout shift on the web today is pretty annoying for me as a user, and as a developer I love having new tools to help me user experience issues like this.
I’m excited to give these CSS properties a whirl.
Web Animations API
The other day I stumbled upon this great introduction to the Web Animations API from Ben Frain. You might be asking yourself why do we even need a way to add animations to elements with JavaScript though if CSS works perfectly fine? Well, Ben writes:
It’s not that this kind of thing can’t be done with CSS, it’s just that it’s far easier and robust when coded with the JavaScript Web Animations API.
Sequencing animations has to be done semi-manually with CSS currently. Getting the 2nd part of this animation to run at the right time has to be done by using a delay. Right now, in CSS, there is no way to say “when this thing finishes animating, start this next animation”. That’s something you can do with the Web Animations API.
Ben then shows us how to make a little timer with the basics and summarizes with this:
The Web Animations API provides us with
.finished.then(() => {}). This is a promise based piece of syntax that does what you probably imagine — waits for one thing to finish and then runs the next.
Neat stuff.
Hotwire
Hotwire from the Basecamp folks looks interesting and it’s the name of the approach(?)/web design philosophy(?) that they took to make their email app Hey. They describe it like this:
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This makes for fast first-load pages, keeps template rendering on the server, and allows for a simpler, more productive development experience in any programming language, without sacrificing any of the speed or responsiveness associated with a traditional single-page application.
To summarize: go fetch a tiny snippet of HTML when the user asks for it and then dump it straight into the DOM. No React shadow DOM trickery required. No big framework needed.
All this stuff sounds extremely smart to me and I think it’s very much worth reading through the thinking behind Turbo and Stimulus, the two technical parts that make up the Hotwire approach to making a website. As I was reading through the docs for Stimulus I found this bit for example about “designing for resilience”:
It’s tempting to write off support for older browsers as not worth the effort, or to dismiss network issues as temporary glitches that resolve themselves after a refresh. But often it’s trivially easy to build features in a way that’s gracefully resilient to these types of problems.
This resilient approach, commonly known as progressive enhancement, is the practice of delivering web interfaces such that the basic functionality is implemented in HTML and CSS, and tiered upgrades to that base experience are layered on top with CSS and JavaScript, progressively, when their underlying technologies are supported by the browser.
I get this feeling reading through the docs here. And I might be wrong but I feel like the folks at Basecamp looked at the big JavaScript frameworks today and uniformly said “nah, mate.” They’re too slow, too big, too cumbersome and unnecessarily complex. This whole philosophy seems to be built around breaking up those JavaScript frameworks into their constituent parts and building something better in all the chaos.
And that’s why I’m so interested in this approach and what they’re working on.
Sponsor
Netlify
Connect your repository. Add your build settings. Deploy your website. Netlify is the fastest way to get a site live and supports any type of site with a Jamstack architecture. With static global CDN hosting, it is the fastest possible way to host.