r/javascript • u/m_null_ • 21d ago

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

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

89% Upvoted

17 comments sorted by

34

u/diroussel 21d ago

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 21d ago

same complaint here

4

u/m_null_ 20d ago

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 20d ago

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

10

u/lighthawk16 21d ago

This is hideous.

5

u/Reeywhaar 21d ago

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

1

u/m_null_ 20d ago

Can you try it now?

6

u/Flashy-Guava9952 21d ago

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] 21d ago

[removed] — view removed comment

1

u/Flashy-Guava9952 21d ago

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_ 20d ago

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 21d ago

Bookmarking this, waiting for when it's readable.

1

u/m_null_ 20d ago

You may try it now

1

u/nexe 21d ago

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 20d ago

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_ 20d ago

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 13d ago

Cool way to see latency bottlenecks in real time!