#183

Earlier this week Amelia Wattenberger wrote a fantastic piece all about the CSS cascade and how complex this stuff can get. What I particularly like about this post is how interactive it is—Amelia writes about a specific part of the cascade and then offers a quiz at the end of each section. Actually fun and engaging quizzes!

Here’s the beautifully designed blog post:

There was one answer that I got wrong here too so I’m certainly glad that I read through the whole piece. Try it for yourself!


With a little help from clip-path and a few other nifty tricks, Eric Meyer made this design where the images have been spliced together in an interesting way:

There are always a few CSS properties I forget about but I think that clip-path is the one I tend to forget the most. It’s so gosh darn useful! This reminds me that it’s worth going back to read Sara Cope’s excellent blog post all about clip-path.


Chris asks: what’s the difference between width/height in CSS versus HTML attributes? He shows the following example:

<!-- valid, works, is a good idea -->
<img width="500" height="400" src="..." alt="...">
<iframe width="600" height="400" src="..."></iframe>
<svg width="20" height="20"></svg>

<!-- not valid, doesn't work, not a good idea -->
<div width="40" height="40"></div>
<span width="100" height="10"></span>

This is one of those front-end things that requires a bit of head-scratching before the difference between these two is clear. I guess the best way to simplify the above is: if it’s a media asset then you can go ahead and use HTML attributes (they are more than a fallback, they inform the browser about aspect ratios) if not, then the attributes don’t work anyway.

This kind of ties into something that I’ve been thinking about for a while when writing front-end code: just as I like to set margins on elements in one direction, I try to make all elements (or components) 100% width of whatever container they’re in.


Ahmad Shadeed has written this completely fantastic post all about the difficulty of front-end development and design, particularly when it comes to setting min and max width or height in CSS. Here’s an example he makes note of when setting the size of buttons:

This diagram should remind us that when we’re making little components like this we should test them with as many different bits of copy as we can.


For the blog, Ahmad El-Alfy has written the definitive guide to building multi-directional layouts and ever-so-carefully details how to ensure that our websites are flexible enough for multi-language support. There’s a lot of CSS values and properties that I’ve never seen before, such as this:

.element {
  text-align: end;
}

As Ahmad writes, this will set the direction in the opposite direction of whatever language direction we’ve set. This is very neat! There’s a lot more to read in the post itself.


And finally, to wrap things up, I just stumbled upon this excellent SVG animation from Cassie Evans called Flowers:

This reminds me of Cassie’s post from last year about how she animated her SVG logo and how stroke-dasharray is effectively the niftiest thing when it comes to making animations for the web.

Speaking of SVG paths, remember that setting the pathLength is quite a handy trick for animating them, as it makes the math way easier.


SPONSOR

Webcat

Serverless just became code-less! Make production ready webapps and mobile apps amazingly fast and easy.


Here’s a little attempt to coin a new term: Component-Level CMSs.

When a component lives in an environment where the data queries populating it live nearby, there is a pretty direct line between the visual component and the database where that exact content lives. That is opening up doors to site editing experiences that travel that line. We’re starting to see CMSs that directly leverage that.

A CMS that allows you to update content either directly on the front end of the site or while looking directly at it have always been desirable for a certain type and scale of site. We’re starting to see a new breed of them.


This image has an empty alt attribute; its file name is netlify-1024x512.jpg
SPONSOR

Netlify

We’re sending high fives to Netlify for sponsoring this newsletter! We’re big fans of Netlify and we think you will be too, once you give it a try. Use Netlify to host your Jamstack sites — which is a fancy way of saying you get to pre-build as much as you can, then use JavaScript and APIs for everything else, like form submissions and actions… without the overhead of maintaining a server!

Oh, and there’s a free tier. Try it now and deploy a site in seconds. 🚀