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.
This blog post isn't new — it was originally published in November 2020. But I know lots of y'all haven't seen it, so I thought I'd resurface it 😄
Dangit. If we shift it to the left***
• • •
Missing some Tweet in this thread? You can try to
force a refresh
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.
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!
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.
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.