Integrate feedback for Chapters 12-21

Issue marijnh#88

Author: marijnh

12_browser.txt

@@ -199,11 +199,13 @@ need to be closed. An example of this would be `<img
 src="http://example.com/image.jpg">`, which will display the image
 found at the given source URL.
 
-To be able to include angular brackets in the text of a document, even though
-they have a special meaning in HTML, yet another form of special notation has
-to be introduced. A plain opening angular bracket is written as `&lt;` (“less than”),
-and a closing bracket as `&gt;` (“greater than”). In HTML, an ampersand (“&”) character
-followed by a word and a semicolon (“;”) denotes an escaped character.
+To be able to include angular brackets in the text of a document, even
+though they have a special meaning in HTML, yet another form of
+special notation has to be introduced. A plain opening angular bracket
+is written as `&lt;` (“less than”), and a closing bracket as `&gt;`
+(“greater than”). In HTML, an ampersand (“&”) character followed by a
+word and a semicolon (“;”) is called an _entity_, and will be replaced
+by the character it encodes.
 
 This is analogous to the way backslashes are used in JavaScript strings.
 Since this mechanism gives ampersand characters a special meaning too,

13_dom.txt

@@ -64,8 +64,9 @@ where elements can contain sub-elements that are similar to
 themselves.
 
 We call a data structure a _tree_ when it has a branching structure,
-no cycles (a node may not contain itself, directly or
-indirectly), and has a single, well-defined “root”.
+no cycles (a node may not contain itself, directly or indirectly), and
+has a single, well-defined “root”. In the case of the DOM,
+`document.documentElement` serves as the root.
 
 Trees come up a lot in computer science. Apart from representing
 recursive structures like HTML documents or programs, they are also
@@ -142,11 +143,10 @@ following diagram tries to illustrate these.
 
 image::img/html-links.svg[alt="Links between DOM nodes",width="6cm"]
 
-Although the diagram only shows one link of each type,
-every node has a `parentNode` property
-that points to its containing node. Likewise, every element
-node (node type 1) has a `childNodes` property that points to an
-array-like object holding its children.
+Although the diagram only shows one link of each type, every node has
+a `parentNode` property that points to its containing node. Likewise,
+every element node (node type 1) has a `childNodes` property that
+points to an array-like object holding its children.
 
 In theory, you could move anywhere in the tree using just these
 parent and child links. But JavaScript also gives you access to
@@ -495,12 +495,13 @@ is called `className`. You can also access it with the
 
 == Layout ==
 
-You might have noticed that different types of elements are laid out differently.
-Some, such as paragraphs (`<p>`) or headings (`<h1>`), take up the
-whole width of the document, and are placed below each other.
-These are called _block_ elements. Others, such as links (`<a>`) or
-the `<strong>` element used in the example above, are treated as part
-of the surrounding text. Such elements are called _inline_ elements.
+You might have noticed that different types of elements are laid out
+differently. Some, such as paragraphs (`<p>`) or headings (`<h1>`),
+take up the whole width of the document, and are rendered on separate
+lines. These are called _block_ elements. Others, such as links
+(`<a>`) or the `<strong>` element used in the example above, are
+rendered on the same line with their surrounding text. Such elements
+are called _inline_ elements.
 
 For any given document, browser are able to compute a
 layout, which gives each element a size and position based on its type
@@ -722,10 +723,11 @@ p.a.b#main {
 ----
 
 The precedence rule favoring the most recently defined rule only holds
-when the rules have the same _specificity_. Specificity depends on the
-amount of aspects of the tag that the rule matches. For example, `p.a`
-is more specific than just `p` or just `.a`, so a rule defined as such would take
-precedence to them.
+when the rules have the same _specificity_. A rule's specificity is a
+measure of how precisely it describes matching elements, determined by
+the number and kind (tag, class, or id) of element aspects it
+requires. For example, `p.a` is more specific than just `p` or just
+`.a`, so a rule defined as such would take precedence to them.
 
 The notation `p > a {…}` applies the given styles to all `<a>` tags
 that are direct children of `<p>` tags. Similarly, `p a {…}` applies

16_canvas.txt

@@ -1084,12 +1084,12 @@ level. It is more difficult to use than plain HTML, but also much more
 powerful.
 
 Both SVG and HTML build up a data structure (the DOM) that represents
-the picture. This makes it possible to modify elements they are drawn.
-If you need to repeatedly change a small part of a big picture, in
-response to what the user is doing or as part of an animation, doing
-it in canvas can be needlessly expensive. The DOM also allows us to
-register mouse event handlers on every element in the picture (even on
-shapes drawn with SVG). This can not be done with canvas.
+the picture. This makes it possible to modify elements after they are
+drawn. If you need to repeatedly change a small part of a big picture,
+in response to what the user is doing or as part of an animation,
+doing it in canvas can be needlessly expensive. The DOM also allows us
+to register mouse event handlers on every element in the picture (even
+on shapes drawn with SVG). This can not be done with canvas.
 
 But canvas’ pixel-oriented approach can be an advantage when drawing a
 huge amount of tiny elements. The fact that it does not build up a

18_forms.txt

@@ -197,7 +197,7 @@ a good idea to disable the control until the action finishes, so that
 when the user gets impatient and clicks it again, they don't
 accidentally repeat their action.
 
-== A forms as a whole ==
+== A form as a whole ==
 
 When a field is contained in a `<form>` element, its DOM element will
 have a property `form` linking back to the form's DOM element. The
@@ -283,13 +283,13 @@ F1, inserts the string “Srinivasa Ramanujan” for you.
 
 [source,text/html]
 ----
-<textarea style="width: 100%; height: 50px"></textarea>
+<textarea></textarea>
 <script>
-  var text = document.querySelector("textarea");
-  text.addEventListener("keydown", function(event) {
-    // The key code for F1 happens to 112
+  var textarea = document.querySelector("textarea");
+  textarea.addEventListener("keydown", function(event) {
+    // The key code for F1 happens to be 112
     if (event.keyCode == 112) {
-      replaceSelection(text, "Srinivasa Ramanujan");
+      replaceSelection(textarea, "Srinivasa Ramanujan");
       event.preventDefault();
     }
   });
@@ -309,7 +309,7 @@ of a text field's content with the given word, and then moves the
 cursor after that word, so that the user can continue typing.
 
 The `"change"` event for a text field does not fire every time
-something is typed. Rather, it happens when the event loses focus
+something is typed. Rather, it happens when the field loses focus
 after its content was changed. To respond immediately to changes in a
 text field, you should register a handler for the `"input"` event
 instead, which fires for every character typed (or deleted, or
@@ -493,10 +493,9 @@ is initially empty. The reason there isn't simply a `file` property is
 that file fields also support a `multiple` attribute, which makes it
 possible to select multiple files at the same time.
 
-For a singular file field, there will be either zero or one file
-objects in the `files` object. Such an object has properties like
-`name` (the file name), `size` (the file's size in bytes), and `type`
-(the media type of the file, like `text/plain` or `image/jpeg`).
+Objects in the `files` object have properties like `name` (the file
+name), `size` (the file's size in bytes), and `type` (the media type
+of the file, like `text/plain` or `image/jpeg`).
 
 [[filereader]]
 What it does not have is a property that contains the content of the
@@ -615,22 +614,24 @@ Notes: <select id="list"></select>
 </textarea>
 
 <script>
-  var notes = JSON.parse(localStorage.getItem("notes")) ||
-              {"shopping list": ""};
-  function saveToStorage() {
-    localStorage.setItem("notes", JSON.stringify(notes));
-  }
-
   var list = document.querySelector("#list");
   function addToList(name) {
     var option = document.createElement("option");
     option.textContent = name;
     list.appendChild(option);
   }
+
+  // Initialize the list from localStorage
+  var notes = JSON.parse(localStorage.getItem("notes")) ||
+              {"shopping list": ""};
   for (var name in notes)
     if (notes.hasOwnProperty(name))
       addToList(name);
 
+  function saveToStorage() {
+    localStorage.setItem("notes", JSON.stringify(notes));
+  }
+
   var current = document.querySelector("#currentnote");
   current.value = notes[list.value];
 

19_paint.txt

@@ -122,13 +122,14 @@ function createPaint(parent) {
 
   var panel = elt("div", {class: "picturepanel"}, canvas);
   parent.appendChild(elt("div", null, panel, toolbar));
-}                         
+}
 ----
 
 Each control has access to the canvas drawing context (and, through
 that context's `canvas` property, to the `<canvas>` element itself).
 Most of the program's state lives in this canvas—it contains the
-current picture as well as the selected color and brush size.
+current picture as well as the selected color (in its `fillColor`
+property) and brush size (in its `lineWidth` property).
 
 We wrap the canvas and the controls in `<div>` elements with classes
 to be able to add some styling, for example the grey border around the
@@ -137,11 +138,11 @@ picture.
 == Tool selection ==
 
 The first control we add is the the `<select>` element that allows the
-user to pick a drawing tool. Again, we will use an object to collect
-the various tools, so that we do not have to hard-code them all in one
-place, and so that we can add more tools later. This object associates
-the names of the tools with the function that should be called when
-they are selected and the canvas is clicked.
+user to pick a drawing tool. As with `controls`, we will use an object
+to collect the various tools, so that we do not have to hard-code them
+all in one place, and so that we can add more tools later. This object
+associates the names of the tools with the function that should be
+called when they are selected and the canvas is clicked.
 
 // include_code
 

20_node.txt

@@ -14,10 +14,16 @@ use complicated machines and programming languages?’. Fu-Tzu replied
 beautiful huts.’
 ____
 
-This chapter provides a brief introduction to Node.js, aiming to teach
-you the important ideas that the system builds on and give you enough
-information to write simple Node programs. It does not aim to be a
-complete, or even a thorough, treatment of Node.
+So far, we have learned the JavaScript language, and used it within a
+single environment, the browser. The following two chapters will
+briefly introduce you to Node.js, which allows you to apply your
+JavaScript skills outside of the browser, allowing you to build
+anything from simple command-line tools to dynamic HTTP servers.
+
+These chapters aim to teach you the important ideas that Node.js
+builds on and give you enough information to write some useful
+programs for it. They do not try to be a complete, or even a thorough,
+treatment of Node.
 
 If you want to follow along and run the code in this chapter, start by
 going to http://nodejs.org[_nodejs.org_], and following the