Skip to content

Commit e9ded79

Browse files
committed
fixes
1 parent b0d39f8 commit e9ded79

File tree

3 files changed

+28
-28
lines changed

3 files changed

+28
-28
lines changed

1-js/01-getting-started/2-manuals-specifications/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ This book is a *tutorial*. It aims to help you gradually learn the language. But
55

66
## Specification
77

8-
**The ECMA-262 specification** contains the most in-depth, detailed and formalized information about JavaScript. It defines the language.
8+
[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) contains the most in-depth, detailed and formalized information about JavaScript. It defines the language.
99

1010
But being that formalized, it's difficult to understand at first. So if you need the most trustworthy source of information about the language details, the specification is the right place. But it's not for everyday use.
1111

1-js/02-first-steps/16-javascript-specials/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ Conditional
149149
: The only operator with three parameters: `cond ? resultA : resultB`. If `cond` is truthy, returns `resultA`, otherwise `resultB`.
150150

151151
Logical operators
152-
: Logical AND `&&` and OR `||` perform short-circuit evaluation and then return the value where it stopped. Logical NOT `!` converts the operand to boolean type and returns the inverse value.
152+
: Logical AND `&&` and OR `||` perform short-circuit evaluation and then return the value where it stopped (not necessary `true`/`false`). Logical NOT `!` converts the operand to boolean type and returns the inverse value.
153153

154154
Comparisons
155155
: Equality check `==` for values of different types converts them to a number (except `null` and `undefined` that equal each other and nothing else), so these are equal:

4-binary/03-blob/article.md

+26-26
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Blob
1+
`Blob` # Blob
22

33
`ArrayBuffer` and views are a part of ECMA standard, a part of JavaScript.
44

55
In the browser, there are additional higher-level objects, described in [File API](https://www.w3.org/TR/FileAPI/), in particular `Blob`.
66

7-
`Blob` consists of an optional string `type` (a MIME-type usually), plus `blobParts` -- a sequence of other `Blob` objects, strings and `BufferSources`.
7+
`Blob` consists of an optional string `type` (a MIME-type usually), plus `blobParts` -- a sequence of other `Blob` objects, strings and `BufferSource`.
88

99
![](blob.svg)
1010

@@ -16,8 +16,8 @@ new Blob(blobParts, options);
1616

1717
- **`blobParts`** is an array of `Blob`/`BufferSource`/`String` values.
1818
- **`options`** optional object:
19-
- **`type`** -- blob type, usually MIME-type, e.g. `image/png`,
20-
- **`endings`** -- whether to transform end-of-line to make the blob correspond to current OS newlines (`\r\n` or `\n`). By default `"transparent"` (do nothing), but also can be `"native"` (transform).
19+
- **`type`** -- `Blob` type, usually MIME-type, e.g. `image/png`,
20+
- **`endings`** -- whether to transform end-of-line to make the `Blob` correspond to current OS newlines (`\r\n` or `\n`). By default `"transparent"` (do nothing), but also can be `"native"` (transform).
2121

2222
For example:
2323

@@ -35,7 +35,7 @@ let blob = new Blob([hello, ' ', 'world'], {type: 'text/plain'});
3535
```
3636

3737

38-
We can extract blob slices with:
38+
We can extract `Blob` slices with:
3939

4040
```js
4141
blob.slice([byteStart], [byteEnd], [contentType]);
@@ -47,8 +47,8 @@ blob.slice([byteStart], [byteEnd], [contentType]);
4747

4848
The arguments are similar to `array.slice`, negative numbers are allowed too.
4949

50-
```smart header="Blobs are immutable"
51-
We can't change data directly in a blob, but we can slice parts of blobs, create new blobs from them, mix them into a new blob and so on.
50+
```smart header="`Blob` objects are immutable"
51+
We can't change data directly in a `Blob`, but we can slice parts of a `Blob`, create new `Blob` objects from them, mix them into a new `Blob` and so on.
5252

5353
This behavior is similar to JavaScript strings: we can't change a character in a string, but we can make a new corrected string.
5454
```
@@ -57,9 +57,9 @@ This behavior is similar to JavaScript strings: we can't change a character in a
5757
5858
A Blob can be easily used as an URL for `<a>`, `<img>` or other tags, to show its contents.
5959
60-
Thanks to `type`, we can also download/upload blobs, and it naturally becomes `Content-Type` in network requests.
60+
Thanks to `type`, we can also download/upload `Blob` objects, and the `type` naturally becomes `Content-Type` in network requests.
6161
62-
Let's start with a simple example. By clicking on a link you download a dynamically-generated blob with `hello world` contents as a file:
62+
Let's start with a simple example. By clicking on a link you download a dynamically-generated `Blob` with `hello world` contents as a file:
6363
6464
```html run
6565
<!-- download attribute forces the browser to download instead of navigating -->
@@ -74,7 +74,7 @@ link.href = URL.createObjectURL(blob);
7474

7575
We can also create a link dynamically in JavaScript and simulate a click by `link.click()`, then download starts automatically.
7676

77-
Here's the similar code that causes user to download the dynamicallly created Blob, without any HTML:
77+
Here's the similar code that causes user to download the dynamicallly created `Blob`, without any HTML:
7878

7979
```js run
8080
let link = document.createElement('a');
@@ -89,33 +89,33 @@ link.click();
8989
URL.revokeObjectURL(link.href);
9090
```
9191

92-
`URL.createObjectURL` takes a blob and creates an unique URL for it, in the form `blob:<origin>/<uuid>`.
92+
`URL.createObjectURL` takes a `Blob` and creates an unique URL for it, in the form `blob:<origin>/<uuid>`.
9393

9494
That's what the value of `link.href` looks like:
9595

9696
```
9797
blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273
9898
```
9999

100-
The browser for each url generated by `URL.createObjectURL` stores an the url -> blob mapping internally. So such urls are short, but allow to access the blob.
100+
The browser for each URL generated by `URL.createObjectURL` stores an the URL -> `Blob` mapping internally. So such URLs are short, but allow to access the `Blob`.
101101

102-
A generated url (and hence the link with it) is only valid within the current document, while it's open. And it allows to reference the blob in `<img>`, `<a>`, basically any other object that expects an url.
102+
A generated URL (and hence the link with it) is only valid within the current document, while it's open. And it allows to reference the `Blob` in `<img>`, `<a>`, basically any other object that expects an url.
103103

104-
There's a side-effect though. While there's an mapping for a blob, the blob itself resides in the memory. The browser can't free it.
104+
There's a side-effect though. While there's an mapping for a `Blob`, the `Blob` itself resides in the memory. The browser can't free it.
105105

106-
The mapping is automatically cleared on document unload, so blobs are freed then. But if an app is long-living, then that doesn't happen soon.
106+
The mapping is automatically cleared on document unload, so `Blob` o bjects are freed then. But if an app is long-living, then that doesn't happen soon.
107107

108-
**So if we create an URL, that blob will hang in memory, even if not needed any more.**
108+
**So if we create an URL, that `Blob` will hang in memory, even if not needed any more.**
109109

110-
`URL.revokeObjectURL(url)` removes the reference from the internal mapping, thus allowing the blob to be deleted (if there are no other references), and the memory to be freed.
110+
`URL.revokeObjectURL(url)` removes the reference from the internal mapping, thus allowing the `Blob` to be deleted (if there are no other references), and the memory to be freed.
111111

112-
In the last example, we intend the blob to be used only once, for instant downloading, so we call `URL.revokeObjectURL(link.href)` immediately.
112+
In the last example, we intend the `Blob` to be used only once, for instant downloading, so we call `URL.revokeObjectURL(link.href)` immediately.
113113

114-
In the previous example though, with the clickable HTML-link, we don't call `URL.revokeObjectURL(link.href)`, because that would make the blob url invalid. After the revocation, as the mapping is removed, the url doesn't work any more.
114+
In the previous example with the clickable HTML-link, we don't call `URL.revokeObjectURL(link.href)`, because that would make the `Blob` url invalid. After the revocation, as the mapping is removed, the URL doesn't work any more.
115115

116116
## Blob to base64
117117

118-
An alternative to `URL.createObjectURL` is to convert a blob into a base64-encoded string.
118+
An alternative to `URL.createObjectURL` is to convert a `Blob` into a base64-encoded string.
119119

120120
That encoding represents binary data as a string of ultra-safe "readable" characters with ASCII-codes from 0 to 64. And what's more important -- we can use this encoding in "data-urls".
121121

@@ -130,7 +130,7 @@ For instance, here's a smiley:
130130
The browser will decode the string and show the image: <img src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">
131131

132132

133-
To transform a blob into base64, we'll use the built-in `FileReader` object. It can read data from Blobs in multiple formats. In the [next chapter](info:file) we'll cover it more in-depth.
133+
To transform a `Blob` into base64, we'll use the built-in `FileReader` object. It can read data from Blobs in multiple formats. In the [next chapter](info:file) we'll cover it more in-depth.
134134

135135
Here's the demo of downloading a blob, now via base-64:
136136

@@ -151,23 +151,23 @@ reader.onload = function() {
151151
};
152152
```
153153

154-
Both ways of making an URL of a blob are usable. But usually `URL.createObjectURL(blob)` is simpler and faster.
154+
Both ways of making an URL of a `Blob` are usable. But usually `URL.createObjectURL(blob)` is simpler and faster.
155155

156156
```compare title-plus="URL.createObjectURL(blob)" title-minus="Blob to data url"
157157
+ We need to revoke them if care about memory.
158158
+ Direct access to blob, no "encoding/decoding"
159159
- No need to revoke anything.
160-
- Performance and memory losses on big blobs for encoding.
160+
- Performance and memory losses on big `Blob` objects for encoding.
161161
```
162162

163163
## Image to blob
164164

165-
We can create a blob of an image, an image part, or even make a page screenshot. That's handy to upload it somewhere.
165+
We can create a `Blob` of an image, an image part, or even make a page screenshot. That's handy to upload it somewhere.
166166

167167
Image operations are done via `<canvas>` element:
168168

169169
1. Draw an image (or its part) on canvas using [canvas.drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage).
170-
2. Call canvas method [.toBlob(callback, format, quality)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) that creates a blob and runs `callback` with it when done.
170+
2. Call canvas method [.toBlob(callback, format, quality)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) that creates a `Blob` and runs `callback` with it when done.
171171

172172
In the example below, an image is just copied, but we could cut from it, or transform it on canvas prior to making a blob:
173173

@@ -205,7 +205,7 @@ If we prefer `async/await` instead of callbacks:
205205
let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
206206
```
207207

208-
For screenshotting a page, we can use a library such as <https://github.com/niklasvh/html2canvas>. What it does is just walks the page and draws it on `<canvas>`. Then we can get a blob of it the same way as above.
208+
For screenshotting a page, we can use a library such as <https://github.com/niklasvh/html2canvas>. What it does is just walks the page and draws it on `<canvas>`. Then we can get a `Blob` of it the same way as above.
209209

210210
## From Blob to ArrayBuffer
211211

0 commit comments

Comments
 (0)