I was pairing with my co-worker last week. They had a super different debugging style than I do. I’m aware that I can do fancy things in DevTools, like set breakpoints and whatnot right from within DevTools and use well-placed debugger; statements to halt JavaScript execution and inspect things at that point. But I hardly […]
Front-end developers spend a significant amount of time working inside the browser’s DevTools. Likely just as much as they spend time writing code in the code editor. However, most developers barely scratch the surface of what DevTools can accomplish. I have been curating a collection of DevTools tips across major browsers. The following are some […]
Like anyone, I love a good “native-feeling” experience on the web. I’ve really enjoyed creating that vibe with the new View Transitions API. Luckily it’s is pretty clean to work with, both with the Astro framework, and out of the box! View Transition Options Transitioning UI between states has been something that developers have been […]
The World Wide Web Consortium (W3C) published a First Public Working Draft of CSS Anchor Positioning last year, so I thought I would give it a try. I already had a perfect candidate to try it on: a component on my other site, adedicated.dev, which showcase my services by linking different words together. To link […]
Have you ever been like, ughkgh, is it npm run dev or npm run start? Is it yarn testwatch or yarn test:watch? If you do it every time you open a project, I’d suggest setting up tasks. But I mean more for one-off or less frequently used scripts. I’m forever forgetting the exact scripts from […]
I’m a GUI guy when it comes to using Git. I like to click over to a native app and immediately see useful things. Like a list of files that were changed in the repo I’m actively working on, on the branch I’m actively working on. This feels efficient and productive to me. I can […]
My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t […]
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.
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.
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSS
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.
Shape morphing animations can be awfully cool. They can be artistic and elaborate like the waving cape of a brand character, or simple and understated like video player controls morphing from one state to another. Alexandru-Gabriel Ică digs into doing this in <svg>. There is a fairly big prerequisite to these kind of animations: the shapes need the same number of points. The trick is typically to use a <path d=""> which is capable of drawing anything, then force both shapes to have the same number of points even if you don’t need them all. Alexandru-Gabriel goes deep on this writing script to convert arbitrary paths into morphable shapes, which is the same kind of thing libraries like Greensock do. I love the idea that you can do the morph directly in CSS.
Here's our page on guest writing. It's a win-win-win!
Frontend Masters Donates to open source projects. $313,806 contributed to date.