Request: Add visual guides to the "In depth: Microtasks and the JavaScript runtime environment" article

[DanKaplanSES]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

I want to preface this by saying this is a well-written article, it's the topic that presents the challenge. It necessitates learning lots of new terms with, unfortunately, similar names:

• Microtasks
• Tasks
• JavaScript runtime environment
• JavaScript execution contexts
• Execution context stack
• Global context
• Local context
• etc.

I find myself forgetting the meaning of the old terms when I learn a new one, and to refresh my memory, I often revisit earlier sections.

I'd prefer to be able to read it from top to bottom in a single pass, and I think adding visual guides would help me the most.

What did you expect to see?

The article is well-written so I don't have any unmet expectations. Every term is relevant to the topic. In my opinion, it's the concept being taught that is challenging.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

To show an example of what I'm thinking, the event loop article already includes a visual guide.

MDN metadata

Page report details

* Folder: `en-us/web/api/html_dom_api/microtask_guide/in_depth` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md * Last commit: https://github.com/mdn/content/commit/e9e2ec643ac69c132f31427a0b586ab2cf83ed58 * Document last modified: 2024-07-26T02:56:30.000Z

[Josh-Cena]

FYI: I'm rewriting the event loop article and I'll replace it with an article that talks about everything related to JavaScript execution, including execution contexts, global environments, task queues, and heaps. I would be replacing the diagram with one that's much more complete and TBH I find the current one quite... useless? Like it tells you there are three separate things that each hold some stuff but that's about it.

I would suggest this be held off until I have finished rewriting, so we can evaluate what is left to be done. But I would not oppose a PR if I can see a good diagram and I would even want to steal it for my own article's use.

[DanKaplanSES]

I find the current one quite... useless

For context:

I'm glad you're going to replace it because I think there's room for improvement.

I do want to play the devils advocate to make a point though: seeing a stack consists of frames, a queue consists of messages, and stacks/queues exist in separate hierarchies helps form a mental model faster than reading the sentence I'm writing at this moment. Even a nearly useless image can be worth 1000 words. (By the way, you never hinted you thought otherwise, I just wanted to make that point and you presented a good opportunity for me to do so.)

I would suggest this be held off until I have finished rewriting, so we can evaluate what is left to be done.

That sounds pragmatic. I agree.

But I would not oppose a PR if I can see a good diagram and I would even want to steal it for my own article's use.

I would be happy to create one, but given that you're rewriting it, I don't know if I have a solid foundation to stand on; is the information needed for such a diagram contained within the current article?

[Josh-Cena]

I would not be rewriting the microtask guide, so if you want to make a diagram summarizing that article, you would be safe to do so—I was trying to avoid overlapping content, but if you went ahead of me I'd be happy to adjust my own draft.