Hello Reader,

Today's newsletter is a bit of a different format.

First up is a video I put out this week because I think it's one of the most important videos I've ever put on my channel.

That's followed up by a story of how I got nerd-sniped by a perfectly fine solution to a problem I wanted to try and improve on, before we get back into the regular format.

What if you suddenly couldn't type anymore?

​

Salma Alam-Naylor, who you might know as whitep4nth3r on Twitch, recently developed excruciating pain and pins and needles in her hands.

This made it very difficult for her to type, and to start healing, she had to stop using her keyboard.

As a software engineer, that isn't exactly easy to do.

She was kind enough to join me so we could all learn more about what it's been like for her, and some of the tools she's been learning to use to continue writing code.

She also wrote an article about how she learned to code with her voice that I'd encourage you to read as well.

🤓 I got nerd-sniped

A nice thing about being a content creator with a very narrow focus is when I get nerd-sniped by something, I can justify spending way too much time going down that rabbit hole 😆.

This happened to me this week when Matt Perry shared a new effect that was added to the Motion examples.

In his post, he highlighted the importance of using aria-hidden for the duplicate text used to make this, which got me to start thinking about a way to do it without duplicating the text.

If you’re using a framework and turn the elements into a component, you can pass the text as a prop and having duplicate text is no big deal, but damn it, I want to do it with vanilla HTML and without writing content twice!

​My first attempt was using an animation to do it.

I was able to get this to work, but it had a problem: when we use a keyframes animation on an element, it will fire when the page loads, which I didn’t want.

In a way, I felt like it was “good enough” because it mostly worked, even if it wasn't quite right.

Then Temani Afif came in with a suggestion I wish I’d thought of: using a text-shadow!

This was nearly perfect!

With text-shadow, we can offset it without a blur. It’s everything I wanted, and was very simple to implement…

So, why is it nearly perfect? When the text moves off, we can still select it, but we don’t see the ::selection, which is kind of awkward.

Now, for a navigation menu like this, that really doesn’t matter because why would someone be selecting the text?

No one would, problem solved!

Except it still bugged me 😆.

I poked and prodded at it the next day, until I finally remembered that I could use both transform: translate and the individual translate property individually from one another!

The trick is delaying the translate for half the transition-duration, and having it happen instantly, with a transition-duration: 0ms.

You can find the finished version here if you want to poke around with it.

And yes, I will be making a YouTube video on this eventually, but it’ll probably be at least a month, but I was happy with how it turned out and wanted to share it 😁.

🙋‍♂️ What I’ve been up to this week

Create a super fun “focus by negation” effect

​

Adam Argyle posted a cool effect on his blog recently. It’s not exactly practical in it’s final form, but the earlier stages of it could be useful, and there is a lot to learn in going all-in with it.

I took a bit of a different approach with this video, showing how I learn something from a tutorial or blog post.

I had an idea of how it worked, but I didn’t know all the details, so I did my best, and then would explore his code to see why things might have been going wrong. I hope you like this style!

Shorts of the week

• ​Centering in CSS is a meme for the wrong reasons​
• ​Using code elements when you should be using kbd?​

HTML & CSS Tip of the Week

​Container query units: cqi and cqb​

Container queries made a lot of noise when they came out. While not everyone is using them yet, most people at least seem to be aware that they exist.

Somehow, the new (awesome) units that we got with them seem to have gone more under the radar.

🎙️ Podcast Navigating CSS Layout Decisions Inspired by recent articles from Andy Bell and Alex Riviere (linked in the links section below), I explore a bit of my own decision-making process when deciding between Flexbox and Grid. This leads to me talking about intrinsic and content-first layouts as well, and how the most important thing is that we're thinking about the decisions that we're making. LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB​

​

🔗 Other awesome stuff around from the web

• ​How to Use ARIA Alert Effectively (I recently had to deal with this, and wish this article existed then!)
• ​Syntax Highlighting with Prism.js and markdown-it​
• ​Pure CSS Mixin for Displaying Values of Custom Properties (this is really cool, but you’ll need some time to go through it)
• ​How I created a newsletter I actually enjoy writing​
• ​CSS-Only Sprite Animation (CodePen)

🏁

The nerd-sniped section of this email was quite different from what I usually share in these, as I tend to save the more technical stuff for videos, I hope that you enjoyed it 🙂.

Have a fantastic week!
Kevin

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205