Assumption

WhileI’m talking about the SVGsonThe Session,I thought I’d share something else related to the rendering of the sheet music.

Like I said, I use the brilliantabcjsJavaScript library. It convertsABC notationinto sheet music on the fly, which still blows my mind.

If you view source on the rendered SVG, you’ll see that thepathandrectelements have been hard-coded with a colour value of#000000.That makes sense. You’d want to display sheet music on a light background, probably white. So it seems like a safe assumption.

Ah, but when it comes to front-end development, assumptions are like little hidden bombs just waiting to go off!

I got an email the other day:

Hi Jeremy,

I have vision problems, so I need to use high-contrast mode (using Windows 11). In high-contrast mode, the sheet-music view is just black!

Doh! All my CSS adapts just fine to high-contrast mode, but those hardcoded hex values in the SVG aren’t going to be affected by high-contrtast mode.

Stepping back, the underlying problem was that I didn’t have a full separation of concerns. Most of my styling information was in my CSS, but not all. Those hex values in the SVG should really be encoded in my style sheet.

I couldn’t remove the hardcoded hex values—not without messing around with JavaScript beyond my comprehension—so I made the fix in CSS:

[fill= "#000000" ] {
fill: currentColor;
}
[stroke= "#000000" ] {
stroke: currentColor;
}

That seemed to do the trick. I wrote back to the person who had emailed me, and they were pleased as punch:

Well done, Thanks! The staff, dots, etc. all appear as white on a black background. When I click “Print”, it looks like it still comes out black on a white background, as expected.

I’m very grateful that they brought the issue to my attention. If they hadn’t, that assumption would still be lying in wait, preparing to ambush someone else.

Motion Paths - Past, Present and Future | Codrops

This is superbly in-depth and easy-to-follow article fromCassie—everything you need to know about motion paths in SVG and CSS! It’s worth reading just for the wonderful examples.

Creating my logo animation - cassie.codes

What a wonderfully in-depth and clear tutorial from Cassie on how she created the animation for her nifty SVG logo!

Also: Cassie is on the indie web now, writing on her own website—yay!

The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks

This article by Cassie is so, so good!

First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact thatshe made toolto illustrate the point!

Best of all, I get towork withthe super-smart developer who did all this.

Solving Sol

Browser implementations of Sol LeWitt’s conceptual and minimal art, many of which only exist as instructions like this:

Vertical lines, not straight, not touching, covering the wall evenly.

Animated SVG Radial Progress Bars - daverupert

Using a single path SVG, a smidge of CSS, and ~6 lines of JavaScript.

In this days of monolithic frameworks, I really like seeing modest but powerful patterns like this—small pieces that we can loosely join.