Chris Coyier

When you nest elements with border-radius, the inner element needs less radius than the outer element.

This is some classic advice on this, and a future-looking fix.

What is sheet music if not icons placed in particular vertical and horizontal positions? Stephen Band turned the system of sheet music into a CSS grid system where you control the placement of everything with classes and data-attributes.

https://cruncher.ch/blog/printing-music-with-css-grid/

Let’s say you don’t know JavaScript. You’re a web designer and you’re focused largely on UI and UX. Let’s look at some things you could learn in a day that will give you that bang for the buck.

Really clever trick via Temani Afif.

https://codepen.io/t_afif/pen/vYbdVjb

Fill the entire element with a gradient overlay on top of any existing background, which can make it easier to read text set on top.

Icônes is an amazing icon resource site. There are tens of thousands of free-to-use icons which are easy to browse and find. Export or copy in SVG, PNG, or as a component in many popular frameworks.

https://icones.js.org/

We can *mostly* use HTML alone for this API. But here, we’ll use CSS to style the “links” within paragraphs and a JS library to position them, in lieu of CSS anchoring.

Just to cut to the chase, the superpower is being able to adjust their weight (or at least one of their attributes, or as variable fonts call them, an “axis”) without changing the space they occupy. This means that interactive effect and animations can be done without worry for awkward reflow situations and performance problems. […]

Speaking of Jake, his recent article HTML attributes vs DOM properties is a good one for all y’all on that journey to senior developer. I could imagine asking this in an interview. I’d say you should straight up know this is the case and learn over time the more nuanced stuff like which properties reflect […]

Good advice: “Write alternative text as if you’re describing the image to a friend.” Or, if it’s helpful, don’t forget to include the emotion in an image.

I wrote in my masonry proposal feedback: Are there any more fleshed out alternative proposals? I thought Jen presented strongly that CSS grid is a great place to put masonry layout, but also that it wasn’t arguing against anything else. Rachel Andrew has that “anything else”, which is display: masonry; with more explanation. What’s nice […]