Tweet

More from @JoshWComeau

Josh W. Comeau

@JoshWComeau

6 Apr

From March 2020 to ~October 2020, I wasn't really able to use a keyboard/mouse.

I've been pretty public about how I worked around it (joshwcomeau.com/blog/hands-fre…), but I haven't been as public about how I overcame it.

🧵 This thread is about my personal experience with RSI.

This is a story about my own experience, not a tutorial for how to solve RSI. Everyone's different, and just because something worked for me doesn't mean it'll work for you.

Please read all the way through before trying anything.

[cw medical stuff / surgery discussion]

In March 2020, I injured my left arm. Certain activities, like typing, would cause a burning pain in the elbow, and occasionally the wrist or fingers.

In May 2020, the same thing started happening in my right arm.

Read 35 tweets

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

7 Mar

One of these numbers-in-circles is correctly centered. The other one *looks* correctly centered. 😅

Can you tell which is which?

Explanation in-thread 👇

With “true” mathematical centering, you get the result on the left. This is what happens by default in HTML/CSS. It centers the number according to an invisible box.

If we shift it a few pixels to the right, its stem aligns with the Y axis, and it looks ever-so-slightly nicer 💖

I wrote a blog post all about these sorts of small tweaks, “Chasing the Pixel-Perfect Dream“: joshwcomeau.com/css/pixel-perf…

It reminds me of a well-tended garden. Each plant that you prune has a negligible impact, but in aggregate, it makes a huge difference.

Read 5 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

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?