Tweet

More from @JoshWComeau

Josh W. Comeau

@JoshWComeau

9 Mar

Around this time tomorrow (10AM EST), I'll be launching my first product as an indie hacker, CSS for JavaScript Devs (css-for-js.dev).

It has been one heck of a ride 😅. In this thread, I wanna share what the journey's been like ✨

In early 2020, I developed an RSI that made it impossible to use a keyboard/mouse. I spent months not using a computer at all, and then months training myself to code with dictation and an eye-tracker.

It's mostly better now, but this was a catalyst for my abrupt career change.

I mention this because I think it's important framing: I'm not the type of person that would typically quit their secure, very-well-paid job as a staff engineer *during a pandemic* to pursue an unproven venture. But it felt urgent to me that I do this right now.

Read 23 tweets

Josh W. Comeau

@JoshWComeau

3 Mar

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!

Read 9 tweets

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

Share this page!

Josh W. Comeau

Try unrolling a thread yourself!

More from @JoshWComeau

Josh W. Comeau

Josh W. Comeau

Josh W. Comeau

Josh W. Comeau

Josh W. Comeau

Josh W. Comeau

Did Thread Reader help you today?

Like this author's thread?