javascript-tutorial
Chapter 11, 'Promises, async/await', assumes knowledge of DOM manipulation not yet taught
DOM manipulation is not covered in this tutorial until four chapters later, in Part 2. From the comments, it looks like some are ready for it and some are not. I don't know if the async stuff could be explained well without using DOM examples, and I haven't looked at the DOM chapter much, so don't know if it requires stuff from Part 1 beyond Chapter 10, but maybe it could be moved up, or referenced, or some short primer or in-context explanations provided to get people unfamiliar with the subject through the async chapter.
You're right.
The tutorial was reorganized. In the past, Promises were in Part 3, but their knowledge is required for pure-JS topics, such as async/await, modules, etc, so I had to move it up.
We can rewrite the examples, but maybe it's enough to add a note in the 1st article of Promises? Or to each article of this chapter?
Reorganization can be like that. At FreeCodeCamp their JS section was reorganized (when ES6 was added, I think), and has this kind of problem recurring in many of their little tutorials, w/ the "campers" having to figure out which tutorial to skip ahead to to understand what's being taught in the current one. It's been that way for years, and there's been much mention in their forum, so I don't know if it's going to get fixed. Does kind of slow you down.
But anyway, judging by the comments, some of readers/students already know enough DOM from wherever to follow the async examples, while others do not. And some who do not may be shy to make comments about it. But a note at the beginning of the first article would I think be the minimum. Up to that point the assumption would be that the reader didn't need to know any JS that hadn't been taught in the previous articles.
(For my part, even though I have learned some DOM previously, I decided it would be more fruitful to jump ahead to the DOM chapter in part 2 then circle back later).
Also, some of the tasks in the async stuff use CSS features that, though I've used them before, I'm rusty on, and need to review to feel comfortable with the code. That's not a big deal, and I'll be glad to refamiliarize myself with them, but it's one more thing slowing me down there . Maybe true for some others as well. But that information is readily available.
Also, the circle animation in the task in the first article seems to run sort of inconsistently in the Plunker sandbox (in Chrome, at least) -- have to reload to page (not just Stop and Start) to get it to animate. And sometimes, I think maybe, that doesn't even work. So it's kind of a lot at once.
Personally, I'm fine, but there were a number of stumbling blocks in processing the async chapter, even though the async material itself was presented clearly (at least in the "callbacks" article -- as far as I've gotten).
A good tutorial has to be well-organized.
For Promises, I added few more words to http://javascript.info/callbacks to make things clearer. Also we need to keep in mind that people may not understand DOM yet, and probably add some additional explanations where needed, to ensure that they understand what's going on.
We'll need to move "Animated circle" task somewhere (to animations?). And maybe replace it with something else, without DOM trickery.
Progress: Added a note about using DOM.
The "Animated circle" task is still pending.
It's good to have something about it. What I read there now, though includes "If you’re not familiar with these methods, and their usage in the examples is confusing, you may want to read a few chapters from the next part of the tutorial." As I understand it (I thought this had been resolved, anyway) "Chapters" are the large sections within each part, like "Document" (Part II, Chapter 1), which contain within them "Articles" (which I argued for calling "Lessons") such as (Part II) 1.7 "Modifying the Document" (which is, coincidentally, how far into the chapter one would have to read to understand the examples given right at the beginning of the article, such as:
function loadScript(src) {
// creates a <script> tag and append it to the page
// this causes the script with given src to start loading and run when complete
let script = document.createElement('script');
script.src = src;
document.head.append(script);
}
.createElement and .append first being introduced there (in II.1.7). So it might be useful to clarify that one would have to read at least that far to be familiar with the syntax being used.