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!
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 that she made tool to illustrate the point!
Best of all, I get to work with the super-smart developer who did all this.
Related links
Remix Icon - Open source icon library
I love how easy it is to use these icons: you can copy and paste the SVG or even get it encoded as a data URL.
Lea Verou on Twitter
Now that all modern browsers support SVG favicons, here’s how to turn any emoji into a favicon.svg:
<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100"> <text y=".9em" font-size="90"> 💩 </text> </svg>Useful for quick apps when you can’t be bothered to design a favicon!
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!
Accessible Icon Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
Sara runs through the many ways of providing an accessible name to an icon button, backed up with Scott’s testing.
Related posts
Speedier tunes
Improving performance with containment.
Workaround
Browsers and bugs.
Underlines and line height
How to make the distance of link underlines proportional to the line height of the text.
Style your underlines
Make your links beautiful and accessible.
CSS snippets
Some styles I re-use when I’m programming with CSS.