On Container Queries, Responsive Images, and JPEG-XL – Cloud Four

Printing music with CSS grid

Laying out sheet music with CSS grid—sounds extreme until you see it abstracted into a web component.

We need fluid and responsive music rendering for the web!

Retrofitting fluid typography | Clagnut by Richard Rutter

Here’s a taste of what Rich will be delivering at Patterns Day on Thursday—can’t wait!

Extending Responsive Video with HTML Web Components | Scott Jehl, Web Designer/Developer

Scott gives a thorough step-by-step walkthrough of building an HTML web component, in this case for responsive video:

In this post, I’m going to talk briefly about responsive video, but most of the post will be about using HTML web components to extend native video behavior in very helpful ways. But even if you’re not particularly interested in video development, stick around as I’ll demonstrate how to build an HTML Web Component to progressively enhance anything you need.

Clamp calculator | Utopia

Oh, this is a nice addition to the Utopia set of tools: when you don’t need a full-on type scale but you still want to figure out fluid clamp() values, the clamp calculator has you covered.

It’s got permalinks too!

zachleat/table-saw: A small web component for responsive `table` elements.

Now, this is how you design a web component. It’s a progressive enhancement.

Wrap your existing table element inside table-saw and it will behave responsively. If anything goes wrong with the JavaScript, the fallback is the regular table that’s already in your markup.

I just wish the installation didn’t assume that you’re using npm …it’s not really “zero dependency” if it depends on that.