> Violet marks the data as it moves, always top to bottom. Nothing else on the page uses that color.
I'm seeing 3 violet elements on my screen. "ms" in the top left, the dot next to that text, and a dot on a horizontal timeline at the lower edge of the screen. Scrolling down I see yet more violet UI elements, I assume the one on the vertical timeline represents the data, while all the others represent... other things.
It seems violet is just the accent colour used for everything, which makes it an especially perplexing comment. I can only assume the "author" never even read the LLM's output before posting it.
Yeah this smells like the type of comment an LLM leaves when it gets a really specific instruction. “use one consistent color for the data timeline. Right now we’re using multiple which is confusing.” Then the LLM writes some comment that’s a mini retrospective on what happened to justify itself.
Claude seems to do this all the time. That, the empty words and the increased self initiative of claude were all reasons I decided to just use codex (now merged into GPT).
Claude using documentation and comments as its personal diary is one of the most infuriating behaviors it exhibits.
Half the time it’ll record some temporary implementation quirk, which later sessions interpret as infallible product design requirements. Absolutely unsustainable.
is it bad that while this does look like a really cool method to explain a complex topic, my instinct on reading mic-droppy, RLHF AI prose is to be dismissive? there's just something about the persistent mic drops and this-not-that writing that feels so cheap
I think it's because the explainer is passive, there's no interiority, it tells and doesn't show. plus, stylistically, if this were rewritten in second person (like most explainers are) it would make it a heck of a lot more readable:
'You order a coffee on your coffee shop's tablet. 211.4 ms later you see 'Order Confirmed'.
There's a world of complexity behind that status confirmation. Let's see how it all works.' etc
> At 2000ms, without output, you wonder if it crashed. (That was the old one.)
That must have been a really, really long time ago indeed, because there are very few websites now that take less than 2000ms to load. The linked site didn’t even come close on my phone (probably 3-4 seconds), and I most certainly didn’t wonder whether it had crashed.
Am I crazy if for something like an online purchase, I kind of expect it to take a second or two to process the payment, so I would assume something went wrong if it was 200ms?
I’ve definitely had in the UX side a situation where the PM/Owner types asked me to introduce a delay in the “disabled button with loading spinner” such that the user sees it for a visible amount of time because our API was too fast for their taste.
Yes similar here, async operation that could be quick enough not to warrant a busy state, but not all the time. So rather than show a flash of busy state, that makes the ui look janky when the operation is quick, show the busy state for a minimum amount of time
That was terrible, I used to always turn it off. It's like speaking one word and the person interrupting you based on the prefix you had uttered so far... every single darn word. Imagine writing "how do I kill" and having it assume you meant a living being rather than a program.
While I also enjoyed it very much, some thing are strangely ordered and not how I would expect someone with such knowledge of all the moving parts in a request, would build such a site. So for me it feels like an LLM has build it and the human with the prompt saw it and said "eh, good enough".
Agreed. This reeks LLM writing with no human oversight, or at least a human with no writing experience. The text underneath “The Click” is an immediate giveaway:
> Five milliseconds of hardware and browser bookkeeping before a single byte leaves the laptop.
I don’t even know how to describe it, but the “[…] before X” sentence style stands out to me.
I'd be impressed with a touchpad and OS that can go from an actuation to a userspace process receiving a click event in 1.2ms. I'd expect something more like 10x that. My understanding is that most hardware samples between 90-130Hz, and even premium hardware only samples at 250Hz which would average 2ms before the kernel is aware.
Usually the dominant time is from POS to acceptor. These are frequently still on high latency links.
Also a lot of times in person payment flows allow a lot more in their latency budget because it won’t impact the sale, you won’t walk out because of a second here or there, unlike online.
So systems aren’t as optimized, they route to older systems, marketing or further risk checks are added, and a broader range of accepted services that have higher latency (ent/snap processors and the like).
This is very nice and for me especially because I've tried to think about it before your post. I think you can write a very long book if you go really into detail such as the underlying physics for wifi starting from maxwell's equations, how specific CPU architectures execute one instruction at a hardware level and maybe more in depth discussion about the math and cryptography within TLS.
Back in the day "what happens when the user types a url in the address bar and press enter" used to be an interview question, and I remember nobody has ever mentioned the hardware and keyboard keys and interrupts. This post does! Pretty awesome detailed view of a request lifecycle.
I’ve always wanted a version of this sort of a timeline that really lets you zoom out and in to the fractal complexity of it all. Right at the end we’re talking about updating the DOM and rendering… there’s a whole Unicode and font stack and rasterization process happening in there.
I once got that question, started with the keyboard switches and the interrupts, and the interviewer sighed and asked me to get to the stuff in the browser.
I still like this question because of exactly what you mentioned. What the interviewee does and does not mention can give you a fair bit of insight into their priors.
The US is so big, that 50 ms is physically not possible for everyone.
This is something that not everybody is aware of. When I as a German build something for germans, everyone who needs to wait longer than 100 ms for a request, is rightfully mad. But when I want to serve the same stuff to americans at the same speed, I have to build something completely different and much more complex.
I'm seeing 3 violet elements on my screen. "ms" in the top left, the dot next to that text, and a dot on a horizontal timeline at the lower edge of the screen. Scrolling down I see yet more violet UI elements, I assume the one on the vertical timeline represents the data, while all the others represent... other things.
It seems violet is just the accent colour used for everything, which makes it an especially perplexing comment. I can only assume the "author" never even read the LLM's output before posting it.
Half the time it’ll record some temporary implementation quirk, which later sessions interpret as infallible product design requirements. Absolutely unsustainable.
I think it's because the explainer is passive, there's no interiority, it tells and doesn't show. plus, stylistically, if this were rewritten in second person (like most explainers are) it would make it a heck of a lot more readable:
'You order a coffee on your coffee shop's tablet. 211.4 ms later you see 'Order Confirmed'.
There's a world of complexity behind that status confirmation. Let's see how it all works.' etc
Just to be the "actually..." guy: People notice 200ms delay. It's just that in cases it doesn't cause any bad feelings."
At 50ms, you notice.
At 400ms, you care.
At 2000ms, without output, you wonder if it crashed. (That was the old one.)
That must have been a really, really long time ago indeed, because there are very few websites now that take less than 2000ms to load. The linked site didn’t even come close on my phone (probably 3-4 seconds), and I most certainly didn’t wonder whether it had crashed.
Not seeing the final completion of the request.
Your phone probably showed something after you clicked the link but before the page rendered: Link highlight change, a progress bar, etc.
If your phone had crashed and the browser was non-responsive, you would have recognized it quickly. More quickly than the page load time.
Might have been better to have made it clicking a ‘like’ button.
kicking llama's ass...
https://github.com/alex/what-happens-when
"What happens when you type google.com into your browser's address box and press enter?"
Gave me roller-coaster ride across 40 years of gathering knowledge about computers and networks.
I'm very jealous of whoever created that. Well done!
Homer explains it best https://youtu.be/Tmx1jpqv3RA
> Five milliseconds of hardware and browser bookkeeping before a single byte leaves the laptop.
I don’t even know how to describe it, but the “[…] before X” sentence style stands out to me.
Also a lot of times in person payment flows allow a lot more in their latency budget because it won’t impact the sale, you won’t walk out because of a second here or there, unlike online.
So systems aren’t as optimized, they route to older systems, marketing or further risk checks are added, and a broader range of accepted services that have higher latency (ent/snap processors and the like).
Proceeds to use that color for tooltips, text color, headers, and more
This was a really cool visualization but that ^ bothered me way more than it should have.
But really, great page.
Someone new could learn from it the basics of what to check when debugging web.
Somewhat ironic, given how many contracts here seem to come with 3 months notice periods.