my blog https://overreacted.io
wip
+15
-13
+15
-13
public/untitled/index.md
+15
-13
public/untitled/index.md
···
14
14
</html>
15
15
```
16
16
17
-
Suppose it was the only piece of HTML you've ever seen in your life. If you had complete freedom, which features would you add to HTML, and in what order?
18
-
19
-
How would you reimagine the *HTML itself?*
17
+
Imagine this was the only piece of HTML you've ever seen in your life. If you had complete freedom, which features would you add to HTML, and in what order?
20
18
21
19
---
22
20
23
-
### Components
21
+
### Tags
24
22
25
-
Personally, I'd like to start by adding a way to define my own custom HTML tags.
23
+
Personally, I'd like to start by adding a way to define my own HTML tags.
26
24
27
25
It doesn't need to be complicated. We can just use JavaScript functions:
28
26
···
38
36
}
39
37
```
40
38
41
-
We'll specify that *sending* HTML involves unwrapping all of these custom tags:
39
+
To make this work, let's say that whenever the HTML is sent over the network--that is, *serialized*--all custom tags get replaced with the output of their functions:
42
40
43
41
```js {3}
44
42
<html>
···
58
56
59
57
---
60
58
61
-
### Props
59
+
### Parameters
62
60
63
61
Functions take parameters.
64
62
···
100
98
101
99
Objects let us group related stuff together.
102
100
103
-
Suppose we wanted to *send* this HTML. First, according to our specification for custom tags, we'd have to replace all custom tags like `Greeting` with their output:
101
+
Suppose we wanted to *send* the HTML above to the browser. The first step, as we specified earlier, would involve replacing custom tags with their output:
104
102
105
103
```js {3,4}
106
104
<html>
···
199
197
}
200
198
```
201
199
202
-
Actually, this looks a bit repetitive--let's have `Greeting` itself do the `readFile`:
200
+
Actually, this looks a bit repetitive--let's move the `readFile` *into* the `Greeting`:
203
201
204
202
```js {3-4,8-10}
205
203
<html>
···
241
239
}]
242
240
```
243
241
244
-
(which, as you might recall, can always be converted to the "real" HTML:)
242
+
(If we wanted, we could then convert this JSON into the "real" HTML:)
245
243
246
244
```js
247
245
<html>
···
252
250
</html>
253
251
```
254
252
255
-
But it's nice to think of it like this:
253
+
But note how our original "imaginary HTML" allowed us to *name* this concept:
256
254
257
-
```js
255
+
```js {3-4}
258
256
<html>
259
257
<body>
260
258
<Greeting username="alice123" />
261
259
<Greeting username="bob456" />
262
260
</body>
263
261
</html>
262
+
263
+
async function Greeting({ username }) {
264
+
// ...
265
+
}
264
266
```
265
267
266
-
These are self-contained abstractions that can load their own data.
268
+
It allowed us to create a [self-contained abstraction](/impossible-components/#local-state-local-data) that loads its own data.
267
269
268
270
Cool beans!
269
271