A very nice one page website from the Brooklyn-based studio Selman showcasing just how much web (and other) technology was rooted in innovation by women. Printable posters, too.
Popular
Latest Articles
Encoding and Decoding URLs in JavaScript
URL, which stands for Uniform Resource Locator, is an address to access resources on the internet. Each URL points to a unique resource on the web. URLs can sometimes contain special characters or need to be manipulated dynamically. In this article, we’ll explore the modern techniques for working with URLs in JavaScript, and answer the […]
Scroll-Locked Dialogs
I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has(). (You can see I’ve been pretty into it lately.) […]
Building a TODO App from Scratch — Step 2 — HTML
OK it’s HTML time! I love HTML time. We’re laying down a foundation that makes everything feel very real. Is HTML jumping the gun? Nah. The reason that we can jump to HTML right away is that it is common to any other future choice we make. As I mentioned, we might just stay in […]
How to fix the invisible scrollbar issue in iOS browsers
The page scrollbar in web browsers serves a useful function: The vertical position of the scrollbar thumb tells the user where they are in the page (their scroll position), while the size (height) of the scrollbar thumb tells them roughly how long the page is. Because scrollbars are useful, they should be clearly visible. On […]
Building a TODO App from Scratch — Step 1 — Planning & Design
I find it fascinating how websites come to be. Especially websites with user interactivity and functionality, there are so many things to plan, build, and maintain, that it’s no wonder it easily makes for a whole career. Perhaps one of the most cliché introductory things to build on the web (or otherwise), is a to-do […]
Playing with Raster to SVG to 3D Tools
I happen to have bookmarked a few new-to-me SVG tools that all seemed to fit together in interesting ways, so I thought I would have a play and share. Raster to SVG One type of these tools is Raster-to-SVG. That is, taking something like a photo and “vectorizing” it. I happen to have my multivitamin […]
The Beat
No Web Without Women
CSS-in-JS Round 2
Good observation in Bytes:
… new CSS-in-JS libraries are popping up like it’s 2017 all over again.
Panda came out last summer, Meta open-sourced StyleX in December, Material UI released PigmentCSS last month, and Restyle just launched a few weeks ago.
It’s likely that server-side rendering screwed up the original “batch” of these tools. That, and, ya know, just using CSS is often workable.
View Transitions Break Incremental Rendering
I’m a big fan of View Transitions. Part of what they can do, animating elements across fresh page loads, is a uniquely powerful ability. The performance story, though, is a bit complicated. You might think because you don’t have to reach for a JavaScript framework with Single Page App abilities to do this, it could be a big performance win. That’s a fair take. But it’s also important to know that View Transitions Break Incremental Rendering, as Eric Portis notes.
Consider: how does the browser know which elements are supposed to render across those page loads? Well, it’ll need to fully render the 2nd page to know that, meaning it can’t incrementally render it for us, which means there is technically an increased delay which is not a good performance characteristic.
Good news though. What if the browser has already rendered that 2nd page? That could be the case with the Speculation Rules API we’ve started covering. I also might argue that a site with nice animations between pages might help with the perceived performance.
Single CSS Keyframe Tricks are Magic
What happens with a CSS @keyframe animation like this when called?
@keyframes pulse {
50% {
scale: 1.5;
}
}Code language: CSS (css)There is only one “keyframe” there at 50%. So what happens at 0% through the animation? The scale property is… whatever it already was. And at 100%? Back to whatever it already was. Assuming the default scale of 1, it will grow the element then shrink back down again. So little code!
David East and Adam Argyle dig into this in the video Single CSS keyframe tricks are magic and have a great demo.
Subscribe
Developer news, information, and advice — right to your feed reader of choice.
RSSWanna write?
Here's our page on guest writing. It's a win-win-win!