[Robin]: One time I was interviewing someone for a UI engineering gig and noticed something interesting. We were building a UI that involved flexbox and the person opened up DevTools and started clicking up and down in the list of values available to them. And I shortly realized that this person understood that it was this property that would solve the problem, but they didn’t quite understanif wd what combination of properties and values to use for the right solution.
Now, we shouldn’t ever mock someone for not knowing something — especially when it comes to the ever-changing and evolving field of web development — but what we can’t really forgive ourselves for is refusing to learn something out of stubbornness or embarrassment.
That was me a couple of weeks ago when it came to the flex CSS property. Out of pure stubbornness I refused to learn how it worked, and whenever I was confronted with something like this…
.parent {
display: flex;
}
.child {
flex: 0 1 auto;
}…I would find some way to fix the problem without flex. I mean, it looks so weird! I tend to hate CSS shorthands anyway, but I would see this everywhere. Why is that? Why do people keep writing code I don’t understand? Ugh!
And yet, dangit, I still refused to learn.
But after sitting down and writing out how each property works, things sort of clicked: the flex property tells the child element of a flex parent how to expand and shrink. That’s not scary at all! We can think of it like this:
/* This is just how I think about the rule above in my head */
.child {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
/* or... */
.child {
flex: [max] [min] [ideal size];
}Somehow, translating it into “max, min, and ideal size” made it all make sense for me.
Anyway, understanding flex (as well as flex-grow, flex-shrink, and flex-basis) is important if we want to build modern UIs on the web today. But I guess my real point here is that the thing we’ve been avoiding learning about usually isn’t really as scary as we initially think.
And sitting down, being patient with ourselves is the best way to learn something new. Even if it is a little embarrassing.
Libraries for SVG Drawing Animations
Linda Ikechukwu walks through four JavaScript libraries for drawing SVG animations and specifically that path animation that we’ve covered in the past. They happen to look like this:
I like the idea of Linda’s post a lot, explaining all the different ways to tackle the same problem just from different angles. And this is extra handy because I’ve never heard of some of them before, including vivus which lets you customize how the paths are drawn, whether that’s delayed, synchronized, or one by one:
Or Lazy Line Painter which gives us a GUI interface that lets us tweak path duration and what not.
Site-Speed Topography
I like this post by Harry Roberts where he breaks down his thinking when it comes to measuring the performance of a site. The gist is to break up each page or template of your site into rows of a spreadsheet and then compare each of them with Core Web Vitals.
Harry writes:
Firstly, I want to compare whole pages at a time. Immediately, I can see that the PLP {product listings page} is by far the worst offender. Almost all of its bars are higher than other pages. This means that I will likely end up giving it a little more attention than the others. Next, the other three pages are pretty similar with the homepage being marginally worse.
This begs an interesting question though: all of the performance testing tools that we have today, we don’t really have an easy way to capture the full extent of the problems of our websites. It’s still pretty difficult to catch a quick glance of the major portions of our sites and tie that back to specific opportunities for improvement.
Parsing Markdown into an Automated Table of Contents
This is a neat tutorial from Lisi Linhart where we’re shown how to use a Markdown parser to create a bunch of HTML and then generate a list of links from those headings. Lisi writes:
After that, we will make use of the Intersection Observer API to find out which section is currently active, add a scrolling animation when a link is clicked, and finally, learn how Vue’s allow us to create a nice animated list depending on which section is currently active.
I haven’t played around with the Intersection Observer API but, if you’ve never heard of it, that’s what allows us to add certain classes to the links in this demo, depending on what bit of content is being viewed at any given time.
CSS List Items
Huh! This is certainly interesting: the other day Šime Vidas pointed out that there’s such a thing as CSS list items. Let’s say you have some HTML like this:
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>You could then write some CSS to add a third item to this list:
ul::after {
content: "Element 3";
display: list-item;
}A little weird, eh? One way to think about this display type is the situation of hiding and showing things. We’re so used to using display: none and display: block, to hide and unhide (assuming we’re hiding both visually and from screen readers), but not all items are display: block. If we unhide a list item with display: block, we’re ruining its list-item-ness semantically and visually.
This comes up with table content as well. You’d think it would come up more often, but it just so happens that most content we hide and show this way is ultimately block-level. Even if the item is part of a CSS grid or flexbox, there is no special display type for that, so block is fine.
Better angle and debugging tools in Chrome
Chrome had a nice update not so long ago that makes it much easier to make CSS gradients and edit existing ones:
I’ve struggled with this a ton in the past where I’ve had to try and figure out how a string of text will actually visualize the gradient I want. So this is a notable improvement that I’m super excited about. It’s such a small bit of visual design that makes understanding gradients so much easier.
Sponsor
Netlify Background Functions
Netlify can now run functions for up to 15 minutes simply by appending -background to the filename, like my-function-background.js. This means you can do long-ish running tasks, like spin up a headless browser and scrape some data, sync data across systems with batch API requests… or anything else that takes a lot longer than the previous limit of 10 seconds.
[Chris]: Riffing off of Robin’s intro where he stubbornly refused to learn something (until he did), I’ve had some typography related links that I’ve been trying and have failed to understand for a while. I’m now inspired to at least attempt to understand them.
- Piazzolla type system: I kept trying to figure out what the “type system” part was. Are they components? Maybe classes I’m supposed to use? Maybe it’s just a philosophy? Maybe this is just a demo and you’re supposed to be inspired by how clean it is, but you’re on your own to design like it? After looking at the site like 10 times I finally understood: it’s just a (very nice, free) typeface! It’s a “type system” because it’s a variable font that allows you to adjust the weight on both the italic and roman versions. That’s fair, because variable fonts are sort of like “type systems.”
- Typetura: At first I thought it was a “type system” in that it gives you tools you then learn in order to do typography more better. But I’m starting to understand now that the idea is there is actually less to learn. They make choices for you, à la “We pick the best fonts, sizing, and spacing so you don’t have to.” You drop a CSS file and a JavaScript file on the page, and as long as you use the classes they give you, you get good typography “for free” (free as in low effort; the system costs money to use).
- Utopia: I think this is what I thought Typetura was. The stuff I had seen around this involved so many CSS custom properties and so much math my eyes kinda glazed over. In looking again, I think that’s true, except, you don’t really have to care about what is going on because the end result is a handful of CSS custom properties that you actually use to apply
font-size(looks like it kinda punts online-height). It’s amazing how muchclamp()simplifies all this. Check out the generator and turn on Use Clamp.