Share What You Do – CodePen
I’ve always loved a good blog post of someone just saying what they use and do. Keerthana Krishnan has a good one here with Chrome DevTools Features I Use All the Time (and Why You Should Too). Cheeky parentheticals, Keerthana. Like, sure, I’ll read a blog post about new Chrome DevTools features, but I’m more interested in a real person who uses the tech regularly and what they actually do to be productive. Keerthana focuses on a bunch of performance features, which makes sense since it was a post on a performance blog. I like the user flows thing (which I’ve never tried!). It’s like a Lighthouse test except for more than a static page load:
But users don’t experience websites as static pages. They click, type, navigate, and wait.
People’s lived experiences. Gold. Here’s Emil Kowalski’s postmortem on building what turned out to be an ultra-popular component (Sonner, a “toast” component). We actually use react-hot-toast here at CodePen if you wanted to know (I know you did). Emil thinks it was the stacking animation that make it take off, of which I have no doubt. Little design polish details like that have always been a differentiator. Good design is like a cheat code. Sometimes. There is always an anti-example (looking at you, Craigslist).
Weird time to talk toast components, as GitHub has declared them always bad all the time no matter what. I appreciate the zero nuance there. For real, it’s nice to just have answers in this complex space sometimes. I’m still sorting out my feelings there. I feel like a little toast confirming you’ve saved something (for example) is nice. It can be accessed/seen, but it doesn’t force it, as it’s not of huge importance. I feel like if we got rid of them on CodePen, we’d need to replace it with some kind of log or the like, which is toast-like anyway.
Similar to sharing what you do is the greatness of sharing what you like. David Bushell really likes subgrid. David just has a centered single column to work with, but instead of a single grid-template-column, he sets up five. Even if you don’t use them, you might! And now you’ve got these vertical alignment opportunities running up and down the page that you can use wherever you like, and they’ll feel cohesive.
OK fine one more blog post archetype: the sharing of a good idea. Here’s Eric Bailey with Accessible faux-nested interactive controls reminding us that you really really shouldn’t actually nest interactive controls and that, good news, there is a pattern to reach for that makes them visually nested but not actually nested.
The lovely final result does make me think about extending the clickable area of buttons. I heard someone talk about recently “Coyote Time” but for buttons. Coyote Time refers to the Roadrunner cartoons, where the Coyote could run off a cliff but wouldn’t fall until he later noticed he had done so; the term was co-opted by video games. The idea is that your video game character can run off a ledge a little bit and still be able to jump, which reduces how frustrated users can get at the game. What if, in that demo, the clickable areas for the star and cart extended to the top and bottom of the rows. Maybe that makes sense? Maybe that’s Coyote Time for buttons?
We should be careful with how many weird metaphors, acronyms, and industry slang we chuck around. If someone else reads what we write, we might lose them right away!
Careful how you talk:
I first started doing Very Simple Thing with Snarfus, but the more I used it the more I saw the potential! Despite the jaggle of the chromus, it’s really multi-purpose. And that’s what led me to argyling the pintafore with the quagmire instead of the hoobastank! I know, crazy.
