Newsletters

First up this week, Andy Bell wrote this fantastic piece where he dives into a ton of new CSS features that we can use today:

CSS is great and getting better all the time. Over recent years, especially, it has

Yep, you can do that now without hacks or employing the somewhat awkward combination pseudo-elements and counters. Your best bet? The ::marker pseudo-element. We just updated the Almanac entry on that for your reference pleasure.

ul 

[Robin]: Designing the homepage of a website is harder than learning a new framework, more difficult than building an enormous website, and more challenging than memorizing all the values and properties of CSS. In short, the absolute worst thing about …

[Robin]: “Unnecessary initialisms are exclusionary,” writes Jeremy Keith in this particularly excellent blog post about performance, web design, and how initials for terms such as CLS make thing much more difficult for everyone to understand:

I feel sorry for

Robin: This week I’ve been thinking a lot about Framer Motion. It’s a library designed to make beautiful and complex animations on the web much easier than they would be otherwise. It’s also worth taking a look at the …

I don’t think we’ve linked to this in the newsletter yet, but Chris wrote a fantastic post about the latest design of CSS-Tricks and there’s an awful lot to dig into here. Chris compares the previous version to …

Okay, this is a neat idea but also probably highly foolish: using CSS as a content API. We’ll get to that. But first: in Custom Properties as State, Chris writes about Seasonal.css which “supplies …

[Robin]: Over the past week I’ve been working on fun side project that I’m calling a Scroll Story—an elaborate blog post where I rant about a thing. The most exciting part about this little website is that it uses …

Earlier this month Michelle Barker looked into how to cover elements with CSS and had this interesting tip that I’ve never seen before:

.original-element {
  position: relative;
}

.covering-element {
  position: absolute;
  inset: 0;

[Robin]: Animations are important, but deadly. They can focus our attention on certain bits of information at just the right time, they can be for fun when you’ve hit a button, and animations can also be used to make you …

We’ve gathered together a host of writers and front-end folk to tell you what they learned during this year into this 2020’s End of Year Thoughts. There’s so much to learn from in here (and there are lots more …

[Robin]: Making things move by Varun Vachhar is a fantastic blog post I stumbled on the other day. He talks about how he built the following animation with canvas-stretch and walks step-by-step in the process of designing it:

Not only …

Sarah wrote about all the exciting possibilities that open up when you learn about the intricacies of SVG:

Truly, once you learn SVG, you can draw anything, and have it scale on any device. Even

[Robin]: The first thing that caught my eye this week is this fabulous tutorial by Alex Trost where he walks us through how to make this rather nifty design:

This design is the work of Andy Barefoot, who’s really pushing …

[Robin]: One time I was interviewing someone for a UI engineering gig and noticed something interesting. We were building a UI that involved flexbox and the person opened up DevTools and started clicking up and down in the list …

[Robin]: One of the nifty things about VS Code is that you can run tasks when you open up a project. So instead of having to open up the command line and also have VS Code open at the same …

Core Web Vitals is how Google measures the performance of any given site and you might’ve already heard the buzzwords like LCP, FID, and CLP. But — these are actually really useful metrics …

[Robin]: I read this post from Dave Rupert about setting color variables, using a combination of Sass vars, CSS vars, and what Dave calls “semantic theme vars.” He writes:

Last week I got the opportunity to work on a

[Robin]: This week I’ve been moving into a new apartment and everything is, well, to put it kindly, an absolute nightmare. There’s a rat king of cables and three laundromat’s worth of clothes on the floor. Important documents are flung …

Just the other day Kilian Valkohof wrote this great piece about how to create a full-bleed layout effect where an element like an image breaks out from the grid you’ve established.

Kilian shows us how he does that with plain …