240: The Popup Element - CSS-Tricks

[Robin]: The first thing that caught my eye this week was this new HTML element called <popup>. Šime Vidas wrote about this in the Weekly Platform News:

A popup is a temporary (transient) and “light-dismissable” UI element that is displayed on the the “top layer” of all other elements. The goal for the <popup> element is to be fully stylable and accessible by default. A <popup> can be anchored to an activating element, such as a button, but it can also be a standalone element that is displayed on page load (e.g., a teaching UI).

There’s an “intent to prototype” right now which sure is exciting! I think elements like <popup> should replace a ton of third-party code from our codebases and make this pattern more accessible and easier to build.

What new HTML elements might we see in the future like this though?

The answer to that question is most likely to come from design systems (like the Design Systems Repo) where we can see common UI patterns emerge. These components—like modals, toasts, popovers, and tooltips—should lay the groundwork for new HTML elements that we need in the future.

[Chris]: Remember last time Google kicked a new HTML element right to “intent to prototype” out of nowhere? It was <toast> and people were proper pissed off about it. I’m sure I’m missing some nuance here, but at a glance, I’m not seeing the difference in approach. All I’m seeing is excitement from the general community. I only heard one tiny bit of pushback in a private conversation where an engineer was essentially disappointed that new’n’shiny was getting attention when things like <dialog> are a mess. Maybe people are so ready for HTML to start evolving they’ll take whatever they can get.

Mistakes I’ve Made as an Engineering Manager

Sarah Drasner wrote this fantastic piece about the lessons she learned as an engineering manager:

Some folks think that management looks like a steel fortress of preparedness and authority. I’m not so sure about that.
If something goes wrong, are you more likely to tell the manager acts as though they have everything together all the time, or the manager owns their mistakes? The truth is that your team needs to know you’re human. You can’t fix problems if you don’t know about them, and no one will tell you about them unless you make space for that.

I’ve always preferred to work alongside managers who are honest about their mistakes, as well as those who also openly talk about ways they could improve. Any time I’ve worked with someone that appears to work as if nothing phases them… well, that’s where communication problems tend to be most common. I particularly like what Sarah writes about that in this piece.

I liked this section, too:

If something comes up, addressing it immediately can be helpful. There’s nothing worse than your manager having an issue with something you did and only finding out about it three months later, especially if it’s tied to a performance review that you could have impacted had they been transparent earlier.

An Interactive Guide to CSS Transitions

There’s a lot of great advice and tips in this guide to CSS transitions by Josh Comeau. He writes about all the fundamentals of animation, how GPU and CPU hardware acceleration works (as well as how that applies to us) and also discusses why intro animations should be different from exit animations.

Animations are not only important for making things flashy, Josh argues, but also for making interfaces like the one below usable:

Menus like this require a delay as you jump from one option to the next; otherwise the submenu might disappear altogether and that can be extremely frustrating. I can’t tell you how many times I’ve loudly said Gah! as menus like this one disappear.

One of my favorite bits of this essay though is how Josh describes the timing functions—linear, ease-in, ease-out, etc.—which are used at the end of the transition declaration like this:

.btn {
  transition: transform 250ms linear;
}

But! That last part, linear, is probably not what we want:

linear is rarely the best choice — after all, pretty much nothing in the real world moves this way. Good animations mimic the natural world, so we should pick something more organic!

A good tip that Josh recommends here: when we’re animating things off-screen we should use ease-in. But when we want an element to move into frame, we should probably use ease-out. I’ve got to remember this for next time because these functions always tend to confuse me a tiny bit whenever I get to that part of making a transition or animation.

Ensuring the correct vertical position of large text

Great piece by Tobi Reif here where they introduced me to three(!) new-ish CSS properties:

@font-face {
  font-family: Hetilica;
  src: url(Hetilica.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 0%;
}

What we’re doing here is loading a font file that we’re calling “Hetilica” which, hey, so far so good. But check out those last three lines. See those properties? They’re a part of CSS Fonts Module Level 4, allowing us to not only make fonts render similarly across browsers and operating systems when it comes to positioning, but also helps us improve the Flash of Unstyled Text (FOUT) when a fallback font is replaced by a webfont, by making sure the line height and spacing are visually consistent with the new font.

This is exciting stuff because I’m no fan of FOUT. I’ll be happy to use any tools that can make our interfaces load better.

Getting Deep into Shadows

Rob O’Leary wrote this enormous and in-depth post about how to use shadows in interface design, as well as the CSS properties that give us the super powers to wield them. Even if you know everything there is to know about CSS properties, like box-shadow and text-shadow, I think scrolling through this post is very much worth your time because it’s simply bonkers how much is possible and what effects can be achieved with the right shadow in the right place.

Shadows can be used to make us feel like we’ve really clicked a button, or they can help highlight something on the page. They can be used to contrast elements between one another or give a sense of depth. Not only that, shadows can also be used to improve accessibility, too:

Diving into the `::before` and `::after` Pseudo-Elements

Will Boyd wrote a similarly excellent bumper post all about pseudo elements:

The ::before and ::after pseudo-elements are incredibly versatile tools in the CSS toolkit. Understanding them can help you craft practical CSS to solve all sorts of situations. Or you can take things further and use them to create impressive feats of CSS trickery.

Pseudo elements let you cast literal CSS magic once you get the hand of them and, as we’ve written about before, no-one has a better handle of them than Lynn Fisher. She shows just what’s possible with pseudo elements on her single div project:

Back to Will’s post though: he shows us the basics of using ::before and ::after such as placing the tails on the ribbon in this example:

SmolCSS

This looks like a great collection of CSS patterns for layouts and components by Stephanie Eckles. There’s all sorts of tiny patterns that are handy and worth checking out like grids, cards, and default document styles.

One tiny bit of CSS stood out to me here where Stephanie uses :is() like this:

:is(h2, h3):not(:first-child) {
  margin-top: 2em;
}

I love how readable this CSS is as well as also how handy it is for reducing a ton of clunky CSS styles to do a similar thing.

Hotjar

Hotjar’s tools help you prioritize changes, improve your user experience, and ultimately, increase your conversion rates. Dive deep into user behavior and get meaningful data. Sign up for your 15-day free trial today!

Jetpack Backup

Jetpack has a ton of amazing features for your self-hosted WordPress site. But perhaps the more important feature is the best backup and restore system available for WordPress. Jetpack Backup is available à la carte, so if that’s all you need from Jetpack, you got it.

Back up your site →

[Chris]: I get that RSS is nerdy and niche. But “reading websites” is not nerdy and niche.

Sometimes I feel like you could pitch re-branded RSS as a hot new startup.

✨ It's a site ✨ where you read other sites/newsletters ✨ with zero bullshit ✨
— Chris Coyier (@chriscoyier) February 26, 2021

Matt Webb has done a bunch of thinking about this:

If you don’t know what RSS is, it’s really hard to start using it. This is because, unlike a social media platform, it doesn’t have a homepage. Nobody owns it. It’s nobody’s job to explain it.

I agree with Matt. The onboarding sucks. There are a lot of really good RSS readers out there, but they serve me, a niche nerd, not everybody that reads websites. Matt’s put his effort where his mouth is trying to make RSS slightly more approachable.

I think the business model is just hard to crack. Flipboard did a pretty good job, but I think probably ended up being a smaller enterprise than they once hoped. Even a product like Apple News, which is ostensibly a thing for reading websites, isn’t exactly a runaway hit and has completely turned off RSS support. Startups can’t crack it and megacorps can’t crack it either.

I wouldn’t want to ignore a company like Feedly though, who seem to be doing pretty well, building features above and beyond feed reader (e.g. “AI research assistant”) and market themselves to wider than niche-loving nerds. Interesting: they don’t use the term RSS anywhere on their homepage.

But people are still wildly nostalgic for Google Reader (RIP), at least partially because of the fun social features. Someone should give that another crack. There’s gotta be at least a little business in it. But I’d like to think someone can find a fairly large business through RSS at large. That way, it really will be “someone’s job” to explain RSS to everyone and incentivize all sites to have good RSS feeds.