Chris Coyier

What happens with a CSS @keyframe animation like this when called? 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 […]

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 […]

Boris Schapira takes a look at the Speculation Rules API that we just had a poke at around here. Boris notes that this idea of prefetching (or prerendering) the next page that a user might visit has quite a history. One of the players in this game, which is still a pretty good choice as […]

The experimental CSS function `calc-size(auto)` allows transitions from zero to a specified value. Animating elements from zero to their intrinsic size has long been desired by CSS developers.

Not everybody has smokin’ fast internet. Wait let me try that again. Most people don’t have smokin’ fast internet, especially not all the time. It’s part of the job to make sure our sites aren’t so slow we’re essentially depriving users access. To experience your site with slow internet, under the Network tab of DevTools […]

Two months back there was a bit of a hubbub about masonry layout in CSS with Jen at Apple making a case and Rachel at Google agreeing those use cases would be great, but should be based on display: masonry; not display: grid;. Then: nothing. Web standards just move at the pace that it moves […]

A “stand alone” Web Component is a Web Component that provides some design or functionality but that has little by way of dependencies, strong opinions, or heavy design. In other words, Web Components that could easily imagine sliding into any project without much trouble.

I feel like I haven’t seen a really nice web design inspiration gallery in a while so Design Spells is really doing it for me. Design details that feel like magic. I think it’s the focus on websites. 😍

Google has this little widget called Baseline. Here’s a screenshot example: The idea is for it to accompany a web platform feature so you can have a sense of what browsers support it. Web developers are rightfully skeptical of new web tech, wanting to know when they can actually use a feature, so this is […]

Dave posts about this common web component learning blunder. The blunder is… not using a framework. I’m very guilty of this myself. I was just commenting about how the lifespan of web components could be wonderfully long if we keep them dependency free, which theoretically we can because they are a native part of the […]