The small thing that unblocked my whole week


View this email in your browser (or share it with a friend!)

Hello Reader,

In the last three days, I’ve created more content than I usually do in one week (and no, don’t worry, I’m not about to try and sell you some productivity system 😆).

As I sat down to write this, I wondered what I had done differently to get so much done, and at least some of it was due to a small tweak I made to my workflow on Monday.

I won’t bore you with the details, but I want to talk about the idea of removing friction from our workflows.

A while ago, Dave Rupurt wrote about how people aren’t friction, and Matthias Ott followed up a few weeks later with a post on how friction is a good thing that helps shape our work.

Matthias mostly talks about that friction in terms of talking with people, and the way conversations, and even pushback on ideas, can lead to improving products.

I do think other forms of friction are positive as well. We need boundaries, and often what can feel like overly strict ones can help shape the best work, even if, at the time, they feel like they are getting in the way.

Great products are usually the result of trying to solve a very specific problem, and those products start to fall apart once they start to try to do more.

But I don’t think all forms of friction are created equal.

Some friction just gets in our way (and I do think a lot of the AI tools are just a new source of this type of negative friction, but that’s a topic for another day).

Over time, I’ve often looked to reduce the friction in my content creation workflows, with things like starter templates in CodePen and Notion templates for my different types of content, both reducing the need to repeat things.

Circling back to this past Monday, I sat down to start making some new content, and despite the efforts I’ve put in place, I felt stuck.

Instead of pushing through, I wrote down the things that felt like they were getting in my way.

What I finally realized was that it was part of my workflow I had never really thought about, which was making me feel stuck. It had to do with the transition from ideation to actually creating the content, where I had a pretty terrible setup.

In the end, I only made a small change that made a huge difference.

And all of that was without the help of any LLM or fancy AI tools. I’m pretty sure if I had asked a chatbot for help, it would have pointed me to some extra tool to layer in. Instead, I just wrote down a few things on a sticky note, realized what the problem was, and quickly found a solution.

I still have friction in my workflow, but it’s the good kind.

I still need to plan my ideas, create outlines, and then demos, and I often run into small problems or struggles during those stages that shape my content and lead to better ideas.

So yeah, the next time you feel stuck, or that something doesn’t feel right, don’t jump to the first thing that you feel might be the sticking point (I’ve made 4 CodePen starter templates… that was never the real issue 😆), or try to find a new tool, but write down some bullet points, and you might realize that it was something else getting in the way the entire time.

That thing might be something small and fixable, like what I ran into, or it might simply be the type of friction that helps produce better work, and that’s not something you’d want to remove.

(Speaking of Notion, one of my biggest annoyances with Notion is how they are shoving AI into every aspect of their product. It’s clippy, but worse).

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

Wrote the entire thing and then I forgot to send last week's newsletter once again 🤦‍♂️.

📺 Handy CSS layout patterns, and fun ways to elevate them

video preview

A look at a few useful layout patterns:

  • Easy horizontal scrolling with grid and scroll snapping - at the end of the video, I add a scroll-driven animation to make it a lot cooler 😅
  • Auto-fit grid, and preventing overflow when using it
  • Using container queries for simple, adaptive layouts - a quick look at corner-shape: scoop at the end of this one

You can find the code from this one here.


📺 My experience talking at SmashingConf Amsterdam

video preview

Over on the second channel, I’ve put out a vlog of of experience talking at SmashingConf Amsterdam, giving you a bit of peek behind the curtain, so you get to see a few things I was up to, and how nervous I got before going on stage 😅.


📺 CSS Battle: 10-minute challenge to 100%

video preview

It’s been awhile since I did some CSS Battles! Here are the ones I did in this video.


⚡ The easiest, and some new ways, to center with CSS

video preview

A look at the easiest way to center with CSS (grid, with place-content: center), as well as a few others, like how we can use alignment and justification in block contexts now, and a fun trick with position: absolute and fixed.


⚡ Making a wrapper, but with 50 lines of CSS

video preview

A snippet from my CSS Day talk from a few years ago. You can watch the full talk here.

🗓️ Mark your calendar

CSS Day - Amsterdam, June 11th & 12th

Speaking of CSS Day, I’ll be speaking there again this year alongside a pretty amazing lineup of speakers. Ticket prices go up on the 14th of May, so if you can make it, get your tickets soon 🙂.


ZurichJS - Zurich, September 11th

Yup, they invited me to a JavaScript conference! Obviously, a bit of a different type of event to CSS Day, but one I'm still very much looking forward to as well.

Free learning paths

I’m really excited to have launched the first two free learning paths on The Cascade!

These first two take a look at Flexbox and Grid. They are curated YouTube videos arranged in a specific order that I think makes the most sense. That might sound like a playlist, but they are more than just YouTube playlists that I’ve moved over to my platform.

First off, the videos on the platform are all ad-free, and more importantly, most videos include a code editor, so you can go picture-in-picture, making it easy to follow along with the tutorial.

I’ve also included recaps after each one with the important points covered in the video, and maybe most importantly, there are some extra challenge lessons mixed in, so that you can practice what you’ve learned.

If you’re interested, they are completely free, and you can find them here.

🎙️ Podcast

Staying sane when things get busy

show
Staying sane when things get...
May 15 · General Musings with Kev...
16:24
Spotify Logo
 

I recently went through a period that could have led to burnout, but I managed to avoid it, so I thought I'd share how I managed to get through it.

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | RSS

📝 Quiz time!

When using native CSS nesting, if you did this .card { &__title { color: red; } }, what actually happens?

  1. The browser sees it as .card__title
  2. The browser sees it as card.card__title
  3. The browser sees it as :is(.card)__title which is invalid and doesn’t work
  4. The browser sees it as :is(.card).card__title

As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.

🏁

Have a fantastic week!
Kevin


Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇

Beginner friendly (and free)

HTML & CSS for Absolute Beginners

A free course that starts with the absolute basics, and gets to creating some layouts with Flexbox and Grid.

Enroll →

Intermediate

CSS Demystified

For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!

Enroll →

Intermediate (Frontend Masters)

Build a Modern Site from Scratch

Build a fully responsive site using modern CSS features, along with some polished animations.

Enroll → (25% off first month of Frontend Masters if you use this affiliate link)

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.
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246

Hi! I'm Kevin

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

View this email in your browser (or share it with a friend!) Hello Reader, The pattern of shorter newsletters continues for me, as I continue my prep for CSS Day. I’m writing this on Thursday morning (my normal newsletter writing time), and yesterday, as I was rehearsing my talk, I realized I had a pretty big oversight in my talk, so I spent the rest of the day reshuffling things and updating the demos I’m using. It all means it’ll be a stronger talk, but I’ll be on the plane to the...

View this email in your browser (or share it with a friend!) PRE-S: A quick reminder that the State of CSS survey is currently open. The browser vendors all pay a lot of attention to the results of these “State of” surveys, and the more people who take them, the more representative the results are… plus they are a great way to learn about features you didn’t know about! Hello Reader, A bit of a short newsletter this week, as I've been focusing on getting some content created and working on my...

View this email in your browser (or share it with a friend!) Hello Reader, More and more people I deeply respect and have learned a lot from over the years feel like they are speaking into a void, to the point where they are losing motivation to continue making content. And I know it’s not only people making content, either. While some people are embracing the changes, many feel things have changed and that their jobs are no longer what they signed up for, leading them to lose the passion for...