Listening back to a WeAreDevelopers LIVE show from last month, guest Elio Struyf presented his live demo helper, Demo Time, letting you “script” your live demo steps ahead of time, so you don’t have to stress and worry about mistakes while you are presenting.
And in a more recent PerformanceObserver episode, titled Font fallbacks and layout shift, the great Stoyan Stefanov walked through the state of web fonts, and showed how to optimize performance when you have to deal with web fonts, all highlighted via his website, High-Performance Web Fonts.
So, I think we all know by now that we should optimize our content for search engines, right? Well Aaron Gustafson says we should now also optimize our codebases for AI agents… His suggestion stems from a stumble his AI made that was actually due to poor documentation. Which makes sense: If AI is learning from the docs we share online, and those docs suck, how can the AI possibly get it right? Aaron even postures that humans would have struggled with this documentation.
<sarcasm>Oh come on… humans… struggle with documentation???</sarcasm> 😜
Adding a really good point near the end, that “What is good for AI, is also good for humans”… Meaning, the same improvements that would make docs better for AI, would also help humans that are trying to read it. 100%.
Speaking of AI, Tina Huang, the Lonely Octopus herself, runs us through MCP In 26 Minutes (YouTube video). At that pace, I expected to be just as confused at the end as I was at the beginning. But nope. She is just really easy to listen to and follow. Great stuff!
Although CSS Anchor Positioning is only Baseline “Limited availability”, Temani Afif has written three articles that wonderfully demonstration this powerful, up-and-coming CSS feature: Part 1, Part 2, Part 3. Always enlightening!
Sticking with Temani, he also shares his Sequential linear() Animation With N Elements, which looks as scary as it sounds…
.container > * {
--_s: calc(100%*(sibling-index() - 1)/sibling-count());
--_e: calc(100%*(sibling-index())/sibling-count());
animation:
x calc(var(--d)*sibling-count()) infinite
linear(0, 0 var(--_s), 1, 0 var(--_e), 0);
}
Is this really still CSS??? Of course Temani does a wonderful job of breaking that all down and making it all make sense. At the time of this writing, still not ready for prime time, but super powerful nonetheless, and worth keeping our eyes on!
And sticking with CSS Tricks, Daniel Schwarz shares a reminder that we can use “stretch” as a value for width, height, min-width, max-width, min-height, and max-height, which “does the same thing as declaring “100%”, but ignores padding”. This example from Daniel’s article explains it rather well, I think:
div {
padding: 3rem 50vw 3rem 1rem;
width: 100%; /* 100% + 50vw + 1rem, causing overflow */
width: stretch; /* 100% including padding, no overflow */
}
Sadly, as of this writing, this is everywhere except Firefox, so be considerate of that.
Speaking of all this glorious future stuff, Rach Smith offers a brief glimpse into a much improved past… She chronicles a recent experience where she needed to build an old-school marketing-type site, nothing fancy, just HTML and CSS, no CMS, no frameworks or libraries. And she loved it. I too love just crafting HTML and CSS. It feels so… clean… Especially now-days! No hacky CSS bits, just lovely semantic HTML, properly formatted, and simple CSS, all so much easier now-days… Yeah, get off my lawn!
PS: Absolutely LOVE that cursor animation, Rach!!!
And speaking of keeping things simple, Mr. Simplicity himself, Jeremy Keith shares a similar experience in which he wanted to create an image slider/carousel. Initially thinking it would be tricky, he quickly realized how “ludicrously straightforward” it is now-days. Just add this to a parent container, and you have yourself a very primitive slider:
.container {
display: flex;
overflow-x: auto;
}
Of course, being Jeremy, he runs through all the additional progressive enhancements one can add, too, but the basics now-days are so bloody simple!
Continuing down this lovely lane of simplicity, Emil Kowalski shares 7 practical animation tips. Nothing crazy or flashy, just simple, subtle bits that will really give your page a touch of class.
For your next morsel of simplicity, Zach Leatherman suggests a tiny bit-o-CSS for stable scrollbar gutters. Where we all typically use the following to reduce that CLS:
html {
overflow-y: scroll;
}
This forces a scrollbar on all pages, whether they’re needed or not. But if we also add this bit, we “show scrollbars only when they’re needed (while keeping space for the scrollbar if it’s added later)”:
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}
Another simple touch of class.
And finally, I don’t remember where, but I recently tripped across this other DevTools, Your Ultimate Developer Toolkit. The site is chock-full of just a TON of super helpful tools for developers! The site itself could benefit greatly from a search option, but the left nav is pretty clean and clear…
Happy reading,
Atg