Skip to content

Commit

Permalink
Correct mis-use of "it's"
Browse files Browse the repository at this point in the history
  • Loading branch information
fredden committed Apr 13, 2022
1 parent ac7daa5 commit 6af9a2e
Show file tree
Hide file tree
Showing 14 changed files with 29 additions and 29 deletions.
12 changes: 6 additions & 6 deletions 1-js/05-data-types/10-destructuring-assignment/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

The two most used data structures in JavaScript are `Object` and `Array`.

- Objects allow us to create a single entity that stores data items by key.
- Objects allow us to create a single entity that stores data items by key.
- Arrays allow us to gather data items into an ordered list.

Although, when we pass those to a function, it may need not be an object/array as a whole. It may need individual pieces.

*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient.
*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient.

Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. Soon we'll see that.

Expand Down Expand Up @@ -76,7 +76,7 @@ In the code above, the second element of the array is skipped, the third one is
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);
```
That works, because internally a destructuring assignment works by iterating over the right value. It's kind of syntax sugar for calling `for..of` over the value to the right of `=` and assigning the values.
That works, because internally a destructuring assignment works by iterating over the right value. It's a kind of syntax sugar for calling `for..of` over the value to the right of `=` and assigning the values.
````


Expand Down Expand Up @@ -176,7 +176,7 @@ alert(rest.length); // 2
*/!*
```

The value of `rest` is the array of the remaining array elements.
The value of `rest` is the array of the remaining array elements.

We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignment.

Expand Down Expand Up @@ -254,7 +254,7 @@ alert(width); // 100
alert(height); // 200
```

Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables.
Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables.

The order does not matter. This works too:

Expand Down Expand Up @@ -429,7 +429,7 @@ let options = {
height: 200
},
items: ["Cake", "Donut"],
extra: true
extra: true
};

// destructuring assignment split in multiple lines for clarity
Expand Down
2 changes: 1 addition & 1 deletion 1-js/07-object-properties/02-property-accessors/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ There are two kinds of object properties.

The first kind is *data properties*. We already know how to work with them. All properties that we've been using until now were data properties.

The second type of properties is something new. It's *accessor properties*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.
The second type of property is something new. It's an *accessor property*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.

## Getters and setters

Expand Down
2 changes: 1 addition & 1 deletion 2-ui/1-document/04-searching-elements-dom/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ Also, there's a global variable named by `id` that references the element:
```

```warn header="Please don't use id-named global variables to access elements"
This behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), so it's kind of standard. But it is supported mainly for compatibility.
This behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), so it's a kind of standard. But it is supported mainly for compatibility.
The browser tries to help us by mixing namespaces of JS and DOM. That's fine for simple scripts, inlined into HTML, but generally isn't a good thing. There may be naming conflicts. Also, when one reads JS code and doesn't have HTML in view, it's not obvious where the variable comes from.
Expand Down
6 changes: 3 additions & 3 deletions 2-ui/1-document/09-size-and-scroll/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ As a sample element to demonstrate properties we'll use the one given below:
width: 300px;
height: 200px;
border: 25px solid #E8C48F;
padding: 20px;
overflow: auto;
padding: 20px;
overflow: auto;
}
</style>
```
Expand Down Expand Up @@ -106,7 +106,7 @@ Geometry properties are calculated only for displayed elements.
If an element (or any of its ancestors) has `display:none` or is not in the document, then all geometry properties are zero (or `null` for `offsetParent`).
For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0` when we created an element, but haven't inserted it into the document yet, or it (or it's ancestor) has `display:none`.
For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0` when we created an element, but haven't inserted it into the document yet, or it (or its ancestor) has `display:none`.
We can use this to check if an element is hidden, like this:
Expand Down
2 changes: 1 addition & 1 deletion 2-ui/2-events/05-dispatch-events/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ Please note: the event must have the flag `cancelable: true`, otherwise the call

## Events-in-events are synchronous

Usually events are processed in a queue. That is: if the browser is processing `onclick` and a new event occurs, e.g. mouse moved, then it's handling is queued up, corresponding `mousemove` handlers will be called after `onclick` processing is finished.
Usually events are processed in a queue. That is: if the browser is processing `onclick` and a new event occurs, e.g. mouse moved, then its handling is queued up, corresponding `mousemove` handlers will be called after `onclick` processing is finished.

The notable exception is when one event is initiated from within another one, e.g. using `dispatchEvent`. Such events are processed immediately: the new event handlers are called, and then the current event handling is resumed.

Expand Down
6 changes: 3 additions & 3 deletions 2-ui/3-event-details/4-mouse-drag-and-drop/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@ These are the basics. Later we'll see how to other features, such as highlightin
Here's the implementation of dragging a ball:

```js
ball.onmousedown = function(event) {
ball.onmousedown = function(event) {
// (1) prepare to moving: make absolute and on top by z-index
ball.style.position = 'absolute';
ball.style.zIndex = 1000;

// move it out of any current parents directly into body
// to make it positioned relative to the body
document.body.append(ball);
document.body.append(ball);

// centers the ball at (pageX, pageY) coordinates
function moveAt(pageX, pageY) {
Expand Down Expand Up @@ -93,7 +93,7 @@ So we should listen on `document` to catch it.

## Correct positioning

In the examples above the ball is always moved so, that it's center is under the pointer:
In the examples above the ball is always moved so that its center is under the pointer:

```js
ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
Expand Down
2 changes: 1 addition & 1 deletion 2-ui/4-forms-controls/3-events-change-input/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ So the example above uses `document.getSelection()` to get the selected text. Yo

It's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.

That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's bit beyond our scope now, but you can find its methods in the [DataTransfer specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's a bit beyond our scope now, but you can find its methods in the [DataTransfer specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).

Also, there's an additional asynchronous API of accessing the clipboard: `navigator.clipboard`. More about it in the specification [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/), [not supported by Firefox](https://caniuse.com/async-clipboard).

Expand Down
10 changes: 5 additions & 5 deletions 3-frames-and-windows/01-popup-windows/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ Settings for `params`:

There is also a number of less supported browser-specific features, which are usually not used. Check <a href="https://developer.mozilla.org/en/DOM/window.open">window.open in MDN</a> for examples.

## Example: a minimalistic window
## Example: a minimalistic window

Let's open a window with minimal set of features, just to see which of them browser allows to disable:

Expand Down Expand Up @@ -120,7 +120,7 @@ Rules for omitted settings:

## Accessing popup from window

The `open` call returns a reference to the new window. It can be used to manipulate it's properties, change location and even more.
The `open` call returns a reference to the new window. It can be used to manipulate its properties, change location and even more.

In this example, we generate popup content from JavaScript:

Expand Down Expand Up @@ -239,7 +239,7 @@ There's also `window.onscroll` event.

Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window. And there are also `focus/blur` events that allow to catch the moment when the visitor focuses on a window and switches elsewhere.

Although, in practice they are severely limited, because in the past evil pages abused them.
Although, in practice they are severely limited, because in the past evil pages abused them.

For instance, look at this code:

Expand All @@ -257,10 +257,10 @@ Still, there are some use cases when such calls do work and can be useful.

For instance:

- When we open a popup, it's might be a good idea to run a `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
- When we open a popup, it might be a good idea to run `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
- If we want to track when a visitor actually uses our web-app, we can track `window.onfocus/onblur`. That allows us to suspend/resume in-page activities, animations etc. But please note that the `blur` event means that the visitor switched out from the window, but they still may observe it. The window is in the background, but still may be visible.

## Summary
## Summary

Popup windows are used rarely, as there are alternatives: loading and displaying information in-page, or in iframe.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ Arguments:
`targetOrigin`
: Specifies the origin for the target window, so that only a window from the given origin will get the message.

The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read it's `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.
The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read its `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.

Specifying `targetOrigin` ensures that the window only receives the data if it's still at the right site. Important when the data is sensitive.

Expand Down
2 changes: 1 addition & 1 deletion 4-binary/01-arraybuffer-binary-arrays/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Let's eliminate a possible source of confusion. `ArrayBuffer` has nothing in com
**To manipulate an `ArrayBuffer`, we need to use a "view" object.**
A view object does not store anything on it's own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
A view object does not store anything on its own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
For instance:
Expand Down
6 changes: 3 additions & 3 deletions 5-network/04-fetch-abort/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ When `abort()` is called:
- `controller.signal` emits the `"abort"` event.
- `controller.signal.aborted` property becomes `true`.

Generally, we have two parties in the process:
Generally, we have two parties in the process:
1. The one that performs a cancelable operation, it sets a listener on `controller.signal`.
2. The one that cancels: it calls `controller.abort()` when needed.

Expand All @@ -34,7 +34,7 @@ Here's the full example (without `fetch` yet):
let controller = new AbortController();
let signal = controller.signal;

// The party that performs a cancelable operation
// The party that performs a cancelable operation
// gets the "signal" object
// and sets the listener to trigger when controller.abort() is called
signal.addEventListener('abort', () => alert("abort!"));
Expand Down Expand Up @@ -143,6 +143,6 @@ let results = await Promise.all([...fetchJobs, ourJob]);

## Summary

- `AbortController` is a simple object that generates an `abort` event on it's `signal` property when the `abort()` method is called (and also sets `signal.aborted` to `true`).
- `AbortController` is a simple object that generates an `abort` event on its `signal` property when the `abort()` method is called (and also sets `signal.aborted` to `true`).
- `fetch` integrates with it: we pass the `signal` property as the option, and then `fetch` listens to it, so it's possible to abort the `fetch`.
- We can use `AbortController` in our code. The "call `abort()`" -> "listen to `abort` event" interaction is simple and universal. We can use it even without `fetch`.
2 changes: 1 addition & 1 deletion 5-network/06-fetch-api/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ The `integrity` option allows to check if the response matches the known-ahead c
As described in the [specification](https://w3c.github.io/webappsec-subresource-integrity/), supported hash-functions are SHA-256, SHA-384, and SHA-512, there might be others depending on the browser.
For example, we're downloading a file, and we know that it's SHA-256 checksum is "abcdef" (a real checksum is longer, of course).
For example, we're downloading a file, and we know that its SHA-256 checksum is "abcdef" (a real checksum is longer, of course).
We can put it in the `integrity` option, like this:
Expand Down
2 changes: 1 addition & 1 deletion 7-animation/3-js-animation/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ Function `animate` accepts 3 parameters that essentially describes the animation
}
```

It's graph:
Its graph:
![](linear.svg)

That's just like `transition-timing-function: linear`. There are more interesting variants shown below.
Expand Down
2 changes: 1 addition & 1 deletion 9-regular-expressions/04-regexp-anchors/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ The pattern `pattern:^Mary` means: "string start and then Mary".
Similar to this, we can test if the string ends with `snow` using `pattern:snow$`:

```js run
let str1 = "it's fleece was white as snow";
let str1 = "its fleece was white as snow";
alert( /snow$/.test(str1) ); // true
```

Expand Down

0 comments on commit 6af9a2e

Please sign in to comment.