🙋‍♂️ What I’ve been up to this week the last two weeks

I once again wrote a newsletter last week, and then forgot to send it (🤦‍♂️) so here’s what I’ve been up to over the last two weeks.

📺 How I made the slide in nav on my website

​

A few weeks ago, I mentioned how I’d redesigned my homepage, and I want to thank everyone who replied, whether it was with feedback, or just to say that they liked it 😊.

I didn’t reply to everyone (I got a lot of emails), but I did read all the feedback, and have made a few changes, so if you did give me feedback and I didn’t reply, I’ll take the time now to say “thanks!”

One thing that I wanted to do with the site is have some fun with modern CSS, so while I didn’t have any feedback on this, I wanted to make a sticky nav on scroll. I had a simple bit of JS at first, then said “wait, what am I doing?!”

So then I hit record, and made this video where I look at how we can do it with both scroll-state and view-timeline. Turns out the scroll-state version is so much easier, and support is almost the same at this point.So then I hit record, and made this video where I look at how we can do it with both scroll-state and view-timeline. Turns out the scroll-state version is so much easier, and support is almost the same at this point.

📺 CSS properties that solve annoying problems

​

A bit of a quick hits on useful properties and values, where I look at inset, isolation, aspect-ratio, fit-content, and text-wrap: balance and pretty.

⚡ A border-radius trick

​

A quick look at why I like using viewport units for border-radius values.

⚡ CSS just keeps getting better

​

As someone who had to use photoshop to slice up an image of a button to get round corners, this is pretty crazy stuff 😆.

🔗 Other awesome stuff from around the web

• ​Stefan Judis takes a look at button elements attributes to change form behavior​
• ​Temani Afif shows us that we can use the auto value with clamp() thanks to the new calc-size() function
• ​Cassidy Williams with a great look at a fun use-case for corner-shape​
• ​Ahmad Shadeed with an exploration of the too-early breakpoint​
• ​Kevin Hamer looking at how we can approximatecontrast-color() with other CSS features​
• ​Alvaro Montoro has a CSS Connections style game, with 16 named CSS colors that you need to sort into 4 groups.