Tweet

Josh W. Comeau

3 Mar, 9 tweets, 2 min read

In Summer 2020, I was trying to figure out what I wanted to teach. Maybe Gatsby, since I worked for the org? Maybe React, since I had been using AND teaching it for years? Maybe whimsical animations, since that's my whole jam?

I picked… CSS.

Explanation in-thread 👇🏻

First, some brief context: In 2020, I developed an RSI that left me unable to type or use a mouse. It's mostly better now, but it was an eye-opening experience, and one that convinced me that it was time to do something I had wanted to do for years: focus exclusively on teaching.

For a few years I've been teaching part-time at a local coding bootcamp. It's super fulfilling work, because I can see the impact I have on students looking to start a new career.

Impact is important to me. I wanted to teach something that would meaningfully affect people!

I spoke with many many developers, and I came to learn that within this React / JS ecosystem, CSS is one of the biggest sources of pain. So many of y'all find it *miserable*.

I can relate: I struggled a lot with CSS as well.

After YEARS of stumbling my way through CSS, I decided to take it more seriously. Whenever I hit a confusing or frustrating situation, I took the time to dig deep. By looking through MDN docs and CSSWG specs, I was able to work out what was *actually* going on.

This kind of systems-first approach, learning the mechanisms underneath the properties, changed my experience with CSS. It turns out, CSS is FUN.

I still run into issues, but I have confidence that I can work it out. The ominous sense that things could break any moment is gone!

I could teach React, but there are already so many great React resources. Plus, I'm thinking more long-term; I want to teach something that will still be helping you every day, 5 or 10 years from now. Will we still be using React in 10 years? Will we even be using JavaScript? 🤷‍♀️

So, CSS is the thing I can teach that could have the biggest impact, and I know this is true because I saw the impact in my own life and career.

If you're already comfortable with HTML & JS, CSS is the last missing puzzle piece. Snapping it into place makes a *huge* difference.

✏️ This morning, I published a new blog post: “The Importance of Learning CSS”

It looks at why I think learning CSS is so important. I covered some of it in this thread, but I have so much more to say on the subject ✨

👇
joshwcomeau.com/css/the-import…

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @JoshWComeau

Josh W. Comeau

@JoshWComeau

5 Feb

Yesterday in the Q&A portion of my conf talk, I got a question asking what I thought about CSS frameworks like Bootstrap.

My answer: I do not suggest using them. Nor do I suggest using fully-styled component libraries like Material UI.

Here’s why 👇🏻

For Christmas this year, I was gifted a Lego NES kit. Was super fun.

Here’s a question, though: what if I had been given all the blocks, but no instructions? What if I wasn’t even shown the final product?

How good would my NES look, do you think?

A design is more than the sum of its parts. I can take a bunch of really-nicely-designed components and still wind up with a poorly-designed product.

It’s been said that only Google can produce nice-looking Material Design apps, since their designers understand how to use it.

Read 13 tweets

Josh W. Comeau

@JoshWComeau

1 Feb

Today I looked into the performance of different layout modes in CSS. I was curious if it takes the browser longer to lay out elements in a grid vs. Flexbox vs. flow layout.

TL:DR; they're all plenty fast ⚡️ but there are small differences.

Info in thread 👇🏻

For the benchmark, I created an app that renders 1000 random items, with a couple HTML tags in each one. I trigger a re-render, and measure how long it takes to recalculate layout.

Specifically looking for the time spent in this step:

1. Regular flow layout. No CSS on the container.

Average layout recalc time: 22.3ms

I imagine this is the lowest it could be, since each element fills the available width. No "interplay" between children.

This will be our baseline!

Read 16 tweets

Josh W. Comeau

@JoshWComeau

12 Jan

🌠 Keep navigation centered in a lopsided container (logo on one side, nothing on the other) with Flexbox!

“Asymmetrical centering” like this has befuddled me for a long time, but I've cracked the code: `flex-basis` is key 🔓🗝

Demo + Code: codepen.io/joshwcomeau/pe…

When `flex-basis` is set to `0`, it distributes ALL space, not just empty space.

So: we put columns on either side of the nav, make them greedy with `flex-grow`, and distribute the space with `flex-basis`:

.column {
flex-grow: 1;
flex-basis: 0;
}

(Image credit: w3 dot org)

(You can also use `flex: 1` instead, but that shorthand obfuscates what's really going on here!)

Another nifty trick: The nav items "fan out" as the window gets larger, thanks to viewport-based gap sizes:

nav {
display: flex;
gap: max(calc(10vw - 60px), 16px);
}

Read 6 tweets

Josh W. Comeau

@JoshWComeau

6 Jan

Woaaah — An AI that can generate delightful illustrations from text captions.

This will be GOLD for folks who want custom illustrations to visually explain a concept. The content creator in me is *pumped*.

openai.com/blog/dall-e

Heard from some folks that are concerned about the effect it'll have on artists. Wrestling with this a bit.

In my view, it's similar to the effect that Squarespace had on web developers. There's still plenty of demand for us, but it changed a bit.

Essentially things shift upwards a bit. It's less common to get paid $500 to build a website for your local bakery, but still plenty of opportunities building dynamic products for businesses with big budgets.

Read 10 tweets

Josh W. Comeau

@JoshWComeau

9 Dec 20

✨ This year I decided to take blogging more seriously. In 2020, I published 30 articles on my blog, joshwcomeau.com.

We're nearing the end of the year, so I thought it'd be fun to do a "Top 10" countdown, sorted by # of views 😄 I'll share some context about each one!

#10 — Boop! joshwcomeau.com/react/boop/

This animation tutorial details how I created a wobbly temporary hover state using React Spring.

I was unhappy with the hover animations on my course platform, and decided to experiment. I was so happy with the results, it became a blog post!

#9 — Embracing Modern Image Formats. joshwcomeau.com/performance/em…

A look at how to use the modern “.webp” image format to shave some KBs off your page, in a backwards-compatible way 😄

Tools like `gatsby-image` and `next/image` are making it redundant, and I'm thrilled ✨

Read 13 tweets

Josh W. Comeau

@JoshWComeau

23 Nov 20

The most infamous CSS rule is:

button:focus {
outline: none;
}

This style removes the "ugly" focus ring on inputs and links, but it means keyboard users can't navigate; it totally breaks the experience for them (and any non-mouse users) 😬

A thread with some solutions 🧵

First, some quick options:

• Leave them as-is! Outlines aren't so bad.
• Provide an alternative focus style, like changing the background color, or adding a border.

There's a nifty new pseudo-class you may not be aware of, though…

🌠 The `:focus-visible` pseudo-class is just like the `:focus` one, but it only matches when the browser determines that a visible focus state is necessary (eg. not a mouse user).

Keyboard users will see the focus rings, but mouse users won't.

Read 6 tweets

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!