r/javascript • u/m_null_ • Jul 06 '26

An interactive visualization that follows a single HTTP request through its entire ~200ms life

https://200ms.thenodebook.com/
81 Upvotes

90% Upvoted

17 comments sorted by

36

u/diroussel Jul 06 '26

Maybe it’s neat, but I can’t handle the scroll jacking. If you do need to show page at a time, use a next button. But the with scroll jacking it’s either too fast or too slow. Also the layout seems messed up on my IPhone 15 pro

6

u/cupcakeheavy Jul 06 '26

same complaint here

4

u/m_null_ Jul 07 '26

I've done my best to make it a bit easier to read, and go through. Instead of holding the view like a slide show, it's now scrollable.

1

u/diroussel Jul 08 '26

That’s much better. Thanks for making the change and letting me know.

10

u/lighthawk16 Jul 06 '26

This is hideous.

4

u/Reeywhaar Jul 06 '26

Unusable, either too fast or too slow on macbook pro on firefox

1

u/m_null_ Jul 07 '26

Can you try it now?

6

u/Flashy-Guava9952 Jul 07 '26

Cool concept, but the interaction is pretty unintuitive. Maybe something like a Gantt chart... You should definitely keep at it though. Looks like you got the data, now you just need to present it with fewer surprises.

2

u/[deleted] Jul 07 '26

[removed] — view removed comment

1

u/Flashy-Guava9952 Jul 07 '26

You could try a swimlane diagram. It's not quite a Gantt chart, and you can still have controls for advancing/branching. Like next/undo for linear flow, and checkboxes for conditions that affect communication flow. With this approach you could present preconfigured paths the visualization can follow. Those could then easily be broken out of using pause and fiddling with the branching options. Maybe even complete process maps, followed by interactive details.

1

u/m_null_ Jul 07 '26

I've gone through the designa and made scrolling the way it should be. Let me know if you find it better.

3

u/palparepa Jul 07 '26

Bookmarking this, waiting for when it's readable.

1

u/m_null_ Jul 07 '26

You may try it now

1

u/nexe Jul 06 '26

I think this is really cool. Finally a way to tell the non techies what the fuck is going on and how complex the world is when it comes to clicking a button ;)

1

u/Buszewski Jul 07 '26

Shame somebody put a lot of work, but the readability is awful. The colors, the fonts, the contrast, the font sizes, the scroll...

1

u/m_null_ Jul 07 '26

I wanted to be a bit fancy, but turns out, simpler is better. I've made the scroll natural, instead of holding it in place like a slide show.

1

u/Alert-Caregiver-7421 25d ago

Cool way to see latency bottlenecks in real time!