I don't know how they perceive the performance. I see 41 network requests. That's 2.1 MB of CSS over the wire, blocking rendering and hurting painting and loading speed. There's 400 KB of Tailwind, 87 KB of general CSS, plus another 200 KB of other general CSS. They need to embrace functional CSS properly. I'm sure they could have a single CSS file under 80 KB that renders everything.
Once (like a year ago or so) stumbled upon some person's post asking for someone to help them to "fix" some section at their website. It was done !important over !important over !important over !important. Said person was really convinced all it needed was another bunch of !important because apparently that was what ai spit for them, at least at that time
Unfortunately the original blog post introducing the great CSS-in-JS system being removed is not in the "Related posts" section, would be nice to compare the thinking in the two
There's room for improvement still. Currently, the production build is using long-dev class names. e.g. `DirectoryContent-module__Box_3__gl6dE` could be compiled to a shorter hash like `gl6DE3a2`.
The only thing hashing classes achieves is making it difficult for users to use ad blockers and/or custom CSS. I understand why e.g. Meta does it on their sites, but for GitHub it makes no sense.
Sometimes, [GitHub] posts a [blog post in which they move away from] some terrible [way of doing things] I've never heard before, and it's a weird indirect way to learn how awful their other [design choices] must be.
I don't know how they perceive the performance. I see 41 network requests. That's 2.1 MB of CSS over the wire, blocking rendering and hurting painting and loading speed. There's 400 KB of Tailwind, 87 KB of general CSS, plus another 200 KB of other general CSS. They need to embrace functional CSS properly. I'm sure they could have a single CSS file under 80 KB that renders everything.
Once (like a year ago or so) stumbled upon some person's post asking for someone to help them to "fix" some section at their website. It was done !important over !important over !important over !important. Said person was really convinced all it needed was another bunch of !important because apparently that was what ai spit for them, at least at that time
Unfortunately the original blog post introducing the great CSS-in-JS system being removed is not in the "Related posts" section, would be nice to compare the thinking in the two
There's room for improvement still. Currently, the production build is using long-dev class names. e.g. `DirectoryContent-module__Box_3__gl6dE` could be compiled to a shorter hash like `gl6DE3a2`.
If you use Vite:
Those class names surely gzip better than hashes over the wire?
Here's a comparison using `brotli --best` on my app.
Both, dev and prod, have hashes because that's part of what CSS Modules uses to avoid collisions.Besides download size, smaller names improve parsing speed too.
This.
The only thing hashing classes achieves is making it difficult for users to use ad blockers and/or custom CSS. I understand why e.g. Meta does it on their sites, but for GitHub it makes no sense.
The improvement would be shipping human-readable structure to allow easier user overrides, not that hash abomination
Would you need a source map then for prod debugging?
Sometimes, [GitHub] posts a [blog post in which they move away from] some terrible [way of doing things] I've never heard before, and it's a weird indirect way to learn how awful their other [design choices] must be.
https://xkcd.com/2071/
And yet, there's been a glaring overflow bug on every repo page if the repo has a sponsor button on Firefox Android for months.
Honestly, hats off to them. It's hard to get anything done with Copilot so I'm amazed they even managed to do this.
css-in-js? Rofl. Whats next? Html-in-js?
Yes.