j0.lol
+13
-6
src/lib.rs
+13
-6
src/lib.rs
···
27
27
let mut str_builder = String::new();
28
28
29
29
let doc = parse.next().unwrap();
30
-
assert!(
31
-
Rule::document != doc.as_rule(),
32
-
"Root node should always be the top-level document node."
33
-
);
34
30
35
31
for tag in doc.into_inner() {
36
32
match tag.as_rule() {
···
127
123
String::from(format!("<{el}>{input}</{el}>"))
128
124
}
129
125
130
-
const MARKUP: &str =
131
-
r#"<#foo element="span" test="Hello World. Foo bar. \"Quoted text.\"">Lorem</#foo>"#;
126
+
const MARKUP: &str = r#"<#foo element="span" test="Hello World. Foo bar.">Lorem</#foo>"#;
132
127
const COMPILED_MARKUP: &str = r#"<span>Lorem</span>"#;
133
128
134
129
let mut writer = Rewriter::default();
···
137
132
let rewrited = writer.rewrite(MARKUP)?;
138
133
139
134
assert_eq!(COMPILED_MARKUP, rewrited);
135
+
136
+
Ok(())
137
+
}
138
+
139
+
#[test]
140
+
fn blog_example() -> miette::Result<()> {
141
+
const MARKUP: &str = include_str!("test.html");
142
+
143
+
let writer = Rewriter::default();
144
+
let rewrited = writer.rewrite(include_str!("test.html"))?;
145
+
146
+
assert_eq!(MARKUP, rewrited);
140
147
141
148
Ok(())
142
149
}
+1
-16
src/main.rs
+1
-16
src/main.rs
···
7
7
}
8
8
9
9
fn main() -> miette::Result<()> {
10
-
const MARKUP: &str = r#"<body>
11
-
<h1>Hello!</h1>
12
-
13
-
<p>Lorem lorem</p>
14
-
15
-
<#hello>World</#hello>
16
-
</body>"#;
17
-
18
-
const COMPILED_MARKUP: &str = r#"<body>
19
-
<h1>Hello!</h1>
20
-
21
-
<p>Lorem lorem</p>
22
-
23
-
<span>Hello World</span>
24
-
</body>"#;
10
+
const MARKUP: &str = include_str!("test.html");
25
11
26
12
let rewriter = Rewriter {
27
13
components: HashMap::from([(String::from("hello"), foo_rewriter as RewriterFn)]),
···
30
16
let rewrited = rewriter.rewrite(MARKUP)?;
31
17
32
18
println!("{rewrited}");
33
-
assert_eq!(COMPILED_MARKUP, rewrited);
34
19
35
20
Ok(())
36
21
}
+644
src/test.html
+644
src/test.html
···
1
+
<p>
2
+
I think — at least for me — that blogging is a form of journaling. I feel
3
+
like if I was journaling physically<a ref="physicalnotetaking"></a> I would
4
+
love to take care of a physical <em>tome</em> containing my thoughts.
5
+
Decorate it, take care of it, et cetera. Following this logic, I take great
6
+
joy in taking care of my website. Polishing the CSS, adding nice features,
7
+
making a nice favicon<a ref="favicon"></a>, and other stuff (sorry I have
8
+
been working on it a lot recently.) So, uh, I think I want to just gush
9
+
about all the changes I have made recently to my site, and maybe circle back
10
+
to some deeper point about self-love.
11
+
</p>
12
+
13
+
<figure>
14
+
<img
15
+
loading="lazy"
16
+
width="1302"
17
+
height="1310"
18
+
src="https://vps.j0.lol/website-assets/lotsofcommits.png"
19
+
/>
20
+
<figcaption>Lots of commits.</figcaption>
21
+
</figure>
22
+
23
+
<h2>Favicons are weird</h2>
24
+
25
+
<p>I have many questions about favicons.</p>
26
+
<ul>
27
+
<li>
28
+
Why are they called favicons?<a ref="whyfavicon"></a> Favorite icons?
29
+
Shouldn't they be called like bookmark<a ref="bookmarksaside"></a> icons
30
+
or something? Did they make this up in like Netscape Navigator or
31
+
Internet Explorer or something?<a ref="ie"></a>
32
+
</li>
33
+
<li>
34
+
Why are they so small? It's really hard to represent anything in a
35
+
16×16 square. At least we can now use 32×32, and people who
36
+
know their way around a vector design program can use an SVG.
37
+
</li>
38
+
<li>
39
+
How have we not come up with a better way of linking an icon to your
40
+
website than stuffing a bunch of
41
+
<code><link></code> tags in your <code><head></code
42
+
><a ref="googwebmanifest"></a>??
43
+
</li>
44
+
</ul>
45
+
46
+
<p>
47
+
Um. Sorry about all the footnotes. When I started working on my current
48
+
iteration of my site, which I arbitrarily named V4, I was getting into
49
+
drawing at the same time. I wasn't sure what to fit in that thing, so I just
50
+
put the drawing I had in there. It uh. It looked bad. Here's a recreation:
51
+
<img
52
+
loading="lazy"
53
+
class="raw"
54
+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAhGVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAEgAAAABAAAASAAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAADHbxzxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAACs0lEQVQ4EaWTXW8bRRSGn5nd9cf6Mx/YaWMcYzdpSgMSVXvRilvEBT8B/h//AVVcVOICVUXqh8BpWkibOFBqU3d3vbbX3h3OOAqEa87srvbMzPvOOzPvUd3ObcP/CPcyVkmileaCMTMZSppW6j99lzH/ENiJqQCCdIK2MGEra5+lWRKm8xUR8i05+ct4VgQX4Eouz43yDot0yXKpeBYe0fDW2at2MU4CRvHi/Yks4KxIjOjSFmyZI95Ry1q8eeVz/JuL79S4vfExV0rrRBPFr4ce7/+osuZsMidmYdKVKrWzc8s4OqXjfkqrHbLfe0s8c3jwk8/irCWLGm7eiuh9dEqaNHn4JMePv7/kw0qFs9kQ18qupW163YQv7ymm6YwNGdxvO4zeBeAEbNYXK5Wb1ZjWVsTrbxtcKa5T89bQe9U9zKTEzd0Yz/Fp1DPORiF/TU4Zxs9EwRlaj4RkxuvhgOnM46u7dU4HKQkT3EF8Qj7XIY426Q/6hLEjk7WQyTYeF/j8wDCdG34+VmxUS1QKOd78WWScO2IUj9BH0YDEH3D/hyVatrLdiCjmFPcfKb75wtDdhuHYodUMKOVrPDqc8Ph5wP4HTaKFHKR14l5ll+fhIT3uoKpDvjt5CgLKN1zmsjrjGfdudClkG3x//Ire9oTrpQN+Cfu4qVxH2StTcauc8JDPcnf5eneL0fwtwTzC1ZrmtSYFXeYo6NO+OqbrH1D0isyzBepq+xPTK3VoFrdEUkSSJoSLEN/zBVSU0zcEi4BlllLP1ym6BTGSph8cyo1NUb3OHTPN5rhSAwVdYJbNxL7pytYp2cpxnnJXdrN1UlB5xmlISchd5eBaO/oCzKQlWYKnPHLyWncqWxASRmrE5laNULPmVsiMRZrzWrBgO+wI43m3JPJnn3/jPLHybdFdxN8uVB7pghou7AAAAABJRU5ErkJggg=="
55
+
width="16"
56
+
height="16"
57
+
style="vertical-align: top"
58
+
/>
59
+
. Ew, right? So a few months ago I made this new drawing, the dialog box
60
+
deer that you have definitely seen on this site already. And I realised that
61
+
I can adapt it into a favicon:
62
+
<img
63
+
loading="lazy"
64
+
class="raw"
65
+
src="/static/favicon.ico"
66
+
width="32"
67
+
height="32"
68
+
style="width: 16px; height: 16px; vertical-align: top"
69
+
/>. Much clearer, right? Just bicubic scaling the image down makes it quite
70
+
readable, which I was honestly shocked at.
71
+
</p>
72
+
73
+
<h2 id="fonts">Changing fonts</h2>
74
+
75
+
<figure>
76
+
<img
77
+
loading="lazy"
78
+
width="1448"
79
+
height="288"
80
+
src="https://vps.j0.lol/website-assets/lovingyourwebsite/oldfont.png"
81
+
alt="Screenshot of my blog, with an old rounded monospace heading font."
82
+
/>
83
+
<figcaption>My old heading font</figcaption>
84
+
</figure>
85
+
86
+
<figure>
87
+
<img
88
+
loading="lazy"
89
+
width="1452"
90
+
height="192"
91
+
src="https://vps.j0.lol/website-assets/lovingyourwebsite/newfont.png"
92
+
alt="Screenshot of my blog, with an new rounded serif heading font."
93
+
/>
94
+
<figcaption>My new heading font</figcaption>
95
+
</figure>
96
+
97
+
<p>
98
+
I'm a programmer first, not a writer. So when I was making my website, it
99
+
just made sense to add a touch of monospace to it. I imported my terminal
100
+
font <em style="font-family: var(--font-mono)">(Maple Mono)</em> into my
101
+
project and set it as a heading font, italicized with cursive symbols.
102
+
Though I was getting kind of tired of it. I don't think monospace fonts look
103
+
that good when at such a large size. So I found this new font on Google
104
+
Fonts (where else?) called
105
+
<em style="font-family: var(--font-serif)">Hepta Slab</em> and fell in love
106
+
with it immediately. It's still very round, which captures the sort of look
107
+
the rest of my fonts have (the sans-serif font is <em>DM Sans</em>) while
108
+
feeling way more in place than a monospaced font.
109
+
</p>
110
+
111
+
<p>
112
+
I think people all have complex relationship with fonts. Though maybe that's
113
+
just my autism speaking. People hate
114
+
<em style="font-family: "Comic Sans MS"">Comic Sans</em>. People
115
+
love to write Word documents with
116
+
<em style="font-family: Arial, Helvetica, sans-serif">Arial</em>. Web
117
+
developers love <em style="font-family: Inter, sans-serif">Inter</em>.
118
+
Everyone sort of has their own font, in their
119
+
<span class="shantell">handwriting</span><a ref="shantell"></a>. You might
120
+
feel comforted by a <span class="monospace">monospace</span> font.
121
+
<span class="cursive">Cursive</span>
122
+
might remind you of rigid school structures.
123
+
</p>
124
+
125
+
<speech-box character="deer" emotion="happy">
126
+
<p>In other words, fonts are highly personal.</p>
127
+
</speech-box>
128
+
129
+
<speech-box character="deer" emotion="shocked">
130
+
<p>
131
+
Where did I get the idea to use
132
+
<span style="font-family: var(--font-serif)">serif</span> for headings?
133
+
Honestly I'm not sure. I've seen it in a few places, like
134
+
<a href="https://highlysuspect.agency/">Quat's blog</a> and
135
+
<a href="https://zed.dev/docs/">the Zed website</a>.
136
+
<a
137
+
href="https://www.smashingmagazine.com/2010/11/best-practices-of-combining-typefaces/"
138
+
>Smashing Magazine</a
139
+
>
140
+
has writing on this from 2010(!) so it's clearly not a new practice.
141
+
</p>
142
+
</speech-box>
143
+
144
+
<h2>Physicality</h2>
145
+
146
+
<div class="hstack">
147
+
<figure style="background: #1c1829">
148
+
<img
149
+
loading="lazy"
150
+
width="1064"
151
+
height="1298"
152
+
src="https://vps.j0.lol/website-assets/lovingyourwebsite/nophysicality.png"
153
+
alt="Screenshot of my website's home page. The 'page' is very bare."
154
+
/>
155
+
<figcaption>The home page is floating on a background.</figcaption>
156
+
</figure>
157
+
158
+
<figure style="background: #1c1829; justify-content: space-between">
159
+
<img
160
+
loading="lazy"
161
+
width="1064"
162
+
height="1110"
163
+
src="https://vps.j0.lol/website-assets/lovingyourwebsite/yesphysicality.png"
164
+
alt="Screenshot of my website's home page. The 'page' feels a lot more grounded, with borders and a shadow."
165
+
/>
166
+
<figcaption>The page has a nice border and a shadow now.</figcaption>
167
+
</figure>
168
+
</div>
169
+
170
+
<p>
171
+
As someone with autism, I have a divine fixation with tactile things. Shapes
172
+
feel nice. During this redesign, I've been trying to add physicality
173
+
wherever possible. This isn't <em>just</em> because of Apple's
174
+
<em>Liquid Glass</em> design language, but I think flat design is boring
175
+
generally. I think many people do??
176
+
</p>
177
+
178
+
<p>
179
+
I've been adding physicality wherever possible. The figures now have a
180
+
shadow and border. Well, I haven't really been able to add it anywhere else,
181
+
due to some rigid CSS limitations. I'll figure it out eventually. I hope
182
+
this looks good!
183
+
</p>
184
+
185
+
<h2>Cute little icons</h2>
186
+
187
+
<div class="hstack">
188
+
<figure style="background: #08070f">
189
+
<img
190
+
loading="lazy"
191
+
width="770"
192
+
height="244"
193
+
src="https://vps.j0.lol/website-assets/lovingyourwebsite/oldindex.png"
194
+
alt="Screenshot of old post index. Arrows are used for date."
195
+
/>
196
+
<figcaption>Old arrow icons.</figcaption>
197
+
</figure>
198
+
199
+
<figure style="background: #08070f">
200
+
<img
201
+
loading="lazy"
202
+
width="744"
203
+
height="226"
204
+
src="https://vps.j0.lol/website-assets/lovingyourwebsite/newindex.png"
205
+
alt="Screenshot of old post index. Clock icons are used for date."
206
+
/>
207
+
<figcaption>New, nice clock icons.</figcaption>
208
+
</figure>
209
+
</div>
210
+
211
+
<div class="hstack">
212
+
<figure style="background: #08070f; justify-content: space-between">
213
+
<img
214
+
loading="lazy"
215
+
width="1386"
216
+
height="966"
217
+
src="https://vps.j0.lol/website-assets/lovingyourwebsite/oldbsky.png"
218
+
alt="Screenshot of old comment section"
219
+
/>
220
+
<figcaption>
221
+
Old comment section. Uses text for reply and like labels.
222
+
</figcaption>
223
+
</figure>
224
+
225
+
<figure style="background: #08070f">
226
+
<img
227
+
loading="lazy"
228
+
width="1412"
229
+
height="988"
230
+
src="https://vps.j0.lol/website-assets/lovingyourwebsite/newbsky.png"
231
+
alt="Screenshot of new comment section"
232
+
/>
233
+
<figcaption>
234
+
New comment section. Lots of icons, and a <em>LOT</em> of tweaking
235
+
to get things feeling better.*
236
+
</figcaption>
237
+
</figure>
238
+
</div>
239
+
<span
240
+
><small
241
+
>＊ Note that the comment lines are very thin, and you might have to
242
+
zoom in to see them.</small
243
+
></span
244
+
>
245
+
<p>
246
+
I found a new icon library: <a href="https://css.gg">CSS.gg</a>. They serve
247
+
very simple SVG icons you can just throw in your source. These have been
248
+
sprinkled around where necessary.
249
+
</p>
250
+
251
+
<h2>Code Blocks and Highlighting</h2>
252
+
253
+
<pre><code class="language-rust">
254
+
fn main() {
255
+
println!("Here's a code block!");
256
+
257
+
// Explode
258
+
unsafe { unreachable_unchecked!() }
259
+
}
260
+
</code></pre>
261
+
262
+
<p>
263
+
I'm currently using <a href="https://prismjs.com/">Prism.js</a> for code
264
+
highlighting. It's widely supported, has good theming, and a heck of a lot
265
+
of language support. Um. The only issue is that it doesn't really make sense
266
+
in <samp>$CURRENT_YEAR</samp>. Since the advent of
267
+
<a href="https://tree-sitter.github.io/tree-sitter/">tree-sitter</a>, code
268
+
highlighting is done via syntax trees instead of regex parsing. It's faster,
269
+
and makes more sense. However: tree-sitter is written in a compiled
270
+
language. This makes it a pain to run in the browser
271
+
<a ref="highlightssr"></a>... There's web bindings via wasm
272
+
<a href="https://www.npmjs.com/package/web-tree-sitter">on npm</a>, but it
273
+
would need a bit of work to use to highlight. Plus, I'm sort of worried
274
+
about the size of WASM blobs. Each language requires its own blob, so I
275
+
could be pulling in several wasm blobs on every site. Prism.js is (at time
276
+
of writing, on this site)
277
+
<math>
278
+
<mrow>
279
+
<mn>74.4</mn>
280
+
<mi>kB</mi>
281
+
</mrow>
282
+
<mtext><sub>JS</sub></mtext>
283
+
<mo>+</mo>
284
+
<mrow>
285
+
<mn>1.4</mn>
286
+
<mi>kB</mi>
287
+
</mrow>
288
+
<mtext><sub>CSS</sub></mtext>
289
+
</math>
290
+
big. As a test, I pulled in tree-sitter JS, WASM and the Javascript WASM
291
+
blob. That alone (without any highlighting code or anything!) is
292
+
<math>
293
+
<mrow>
294
+
<mn>152</mn>
295
+
<mi>kB</mi>
296
+
</mrow>
297
+
<mtext><sub>JS</sub></mtext>
298
+
<mo>+</mo>
299
+
<mrow>
300
+
<mn>206</mn>
301
+
<mi>kB</mi>
302
+
</mrow>
303
+
<mtext><sub>WASM</sub></mtext>
304
+
<mo>+</mo>
305
+
<mrow>
306
+
<mn>359</mn>
307
+
<mi>kB</mi>
308
+
</mrow>
309
+
<mtext><sub>WASM js grammar</sub></mtext> </math
310
+
>. Yipes!
311
+
</p>
312
+
313
+
<p>
314
+
So this is why I'm using Prism. There are other regex-based highlighters,
315
+
but this one works fine. One thing I added recently is the little language
316
+
tag, which makes it more obvious which language is in the code block. I
317
+
added it for my blog post where I talk about Swift in comparison to Rust.
318
+
</p>
319
+
320
+
<h2>About footnotes</h2>
321
+
322
+
<p>
323
+
Umm. I like tangents. You might notice the large footnotes section on this
324
+
article. This was pretty fun to implement! If you've used markdown, and not
325
+
really thought about writing in HTML, you might assume that footnotes are a
326
+
HTML primitive. Nah! My current implementation looks like this:
327
+
</p>
328
+
329
+
<pre><code class="language-html"><!--
330
+
<p>
331
+
This is a paragraph <a ref="umm_actually"></a>.
332
+
</p>
333
+
334
+
<footer>
335
+
<h2 id="notes_heading">Footnotes</h2>
336
+
<ol>
337
+
<li id="note_umm_actually">
338
+
Well, there's not really much text there. Its a sentence.
339
+
Should it really even be put in a p tag?
340
+
It's kind of semantically wrong.
341
+
</li>
342
+
</ol>
343
+
</footer>
344
+
--></code></pre>
345
+
346
+
<p>
347
+
A <a href="/static/js/footnotes.js">script</a> comes along and fills out
348
+
everything to be <em>semantically correct</em> HTML. It's based on this
349
+
<a href="https://www.niquette.ca/articles/accessible-footnotes/"
350
+
>great article about making footnotes accessible</a
351
+
>, but I tweaked it a bit to remove markup boilerplate. Note that the
352
+
<code><a></code> tag uses <code>ref</code>, not <code>href</code>. Not
353
+
sure if this attribute is used in other places, but I thought it would be
354
+
fine to use here. (It gets stripped by the script and replaced with a
355
+
<code>href</code>.)
356
+
</p>
357
+
358
+
<p>
359
+
One fun issue I found is that the "return" ↩ symbol looks different
360
+
depending on browser. Mobile browsers (at least mine) will make it an emoji,
361
+
while desktop browsers will use a normal font. You can choose this behaviour
362
+
by suffixing a unicode character:
363
+
</p>
364
+
365
+
<style>
366
+
table {
367
+
margin: 0 auto;
368
+
border-collapse: collapse;
369
+
border: 1px solid var(--border);
370
+
}
371
+
372
+
th,
373
+
td {
374
+
padding: 0.2rem;
375
+
border: 1px solid var(--border);
376
+
}
377
+
</style>
378
+
379
+
<figure>
380
+
<table>
381
+
<tr>
382
+
<th>Default</th>
383
+
<td>↩</td>
384
+
<td>⛄</td>
385
+
</tr>
386
+
<tr>
387
+
<th>Variation Selector 15 <code>&#xfe0e;</code></th>
388
+
<td>↩︎</td>
389
+
<td>⛄︎</td>
390
+
</tr>
391
+
392
+
<tr>
393
+
<th>Variation Selector 16 <code>&#xfe0f;</code></th>
394
+
395
+
<td>↩️</td>
396
+
<td>⛄️</td>
397
+
</tr>
398
+
</table>
399
+
<figcaption>
400
+
Weirdly, on Chrome macOS it always picks the snowman emoji.
401
+
</figcaption>
402
+
</figure>
403
+
404
+
<h2>Aside on writing in HTML</h2>
405
+
406
+
<p>
407
+
I think HTML might be the most expressive way to write. You can express
408
+
almost anything (see the <a href="#fonts">fonts section</a> :p) and it
409
+
doesn't have the same issues that other markup formats have with wordiness
410
+
(if you think HTML is bad, see
411
+
<math>
412
+
<mrow>
413
+
<mtext>L</mtext>
414
+
<mrow style="margin-left: -0.35em"></mrow>
415
+
<mpadded voffset="0.2em" style="padding: 0.2em 0 0 0">
416
+
<mstyle scriptlevel="0" displaystyle="false">
417
+
<mstyle scriptlevel="1" displaystyle="false">
418
+
<mtext>A</mtext>
419
+
</mstyle>
420
+
</mstyle>
421
+
</mpadded>
422
+
<mrow style="margin-left: -0.15em"></mrow>
423
+
<mtext>T</mtext>
424
+
<mrow style="margin-left: -0.1667em"></mrow>
425
+
<mpadded voffset="-0.2155em" style="padding: 0 0 0.2155em 0">
426
+
<mstyle scriptlevel="0" displaystyle="false">
427
+
<mtext>E</mtext>
428
+
</mstyle>
429
+
</mpadded>
430
+
<mrow style="margin-left: -0.125em"></mrow>
431
+
<mtext>X</mtext>
432
+
</mrow> </math
433
+
>.) I see most bloggers using markdown and I wonder: why? It makes
434
+
everything harder. If you want to have a "component", you basically have to
435
+
<a href="https://mdxjs.com/">extend markdown</a>, then have a framework or
436
+
preprocessor to convert into HTML. You can put HTML in markdown (sometimes),
437
+
but the syntax is very odd. Either way, it's gross.
438
+
</p>
439
+
440
+
<p>
441
+
I think people are scared of HTML. It's not that hard to write, and you can
442
+
use <a href="https://emmet.io/">Emmet</a> to write a lot of HTML from very
443
+
understandable abbreviations if you have worked with CSS.
444
+
<code>footer>h2#notes_heading+ol>li*3</code> produces an entire footnotes
445
+
section from earlier, and it lets you use tab to jump between text fields to
446
+
fill.
447
+
</p>
448
+
449
+
<p>
450
+
You also lose a lot of
451
+
<a href="https://developer.mozilla.org/en-US/docs/Glossary/Semantics"
452
+
>semantic information</a
453
+
>
454
+
with markdown. You could represent a
455
+
<code>figure>img+figcaption</code>
456
+
like this:
457
+
</p>
458
+
<pre><code class="language-md">
459
+
460
+
This is an image.
461
+
</code></pre>
462
+
463
+
<p>
464
+
But what happens when you want to style a figure? If you want to center the
465
+
caption, frame the image, add a <code>::before</code> pseudo-element with a
466
+
counter, etc. What will a screen reader do when it comes across your figure?
467
+
Not what you want it to do!
468
+
</p>
469
+
470
+
<p>
471
+
So it's either restrictive, ugly, or heavy. Um, maybe that was convincing. I
472
+
think using HTML thoughtfully like this makes you better at using HTML
473
+
thoughtfully elsewhere. When writing in HTML, go to
474
+
<a
475
+
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements"
476
+
>MDN</a
477
+
>
478
+
and think: "Is there an element for this?" By doing this, you'll learn about
479
+
new tags like <code><samp></code> for quoting output from a program,
480
+
<code><abbr></code> for acronyms or abbreviations, all of MathML,
481
+
<code><ruby></code> for displaying
482
+
<ruby
483
+
>pronounciation<rp>(</rp>
484
+
<rt>pro-noun-si-a-tion</rt>
485
+
<rp>)</rp> </ruby
486
+
>. It's fun :)
487
+
</p>
488
+
489
+
<h2>Trying to conclude this post</h2>
490
+
491
+
<p>
492
+
I've had a lot of fun writing this post, as well as working on my website.
493
+
HTML+CSS is one of the most expressive technologies we have in software
494
+
development. Working on your personal website is, I think, a form of self
495
+
love. It's a construct built for the express purpose of self-expression.
496
+
Express yourself!
497
+
</p>
498
+
499
+
<?php speech_start(SpeechCharacter::Deer, SpeechEmotion::Happy); ?>
500
+
<p>
501
+
I see you've made it to the end. Thanks for sticking with me here, this is
502
+
probably the longest blog post I have made yet. If you want to see more of
503
+
my posts when they come out, <a href="/feed">subscribe to my RSS feed</a>!
504
+
Due to how RSS is designed, I have literally no idea how many people are
505
+
subscribed. But that's kind of fun!
506
+
</p>
507
+
<?php speech_end(); ?>
508
+
509
+
<!-- end -->
510
+
<footer>
511
+
<h2 id="notes_heading">Footnotes</h2>
512
+
<ol>
513
+
<li id="note_physicalnotetaking">
514
+
I've tried journaling physically before. I just really struggle with
515
+
it. I think my hands aren't up to the task? They are very weak. I've
516
+
always struggled with it. I'm left handed and I don't think I was
517
+
ever raised to write properly? Maybe it's some deeper problem
518
+
though. Oh well.
519
+
</li>
520
+
<li id="note_favicon">
521
+
Did you know that Safari is really <em>really</em> annoying about
522
+
favicon caching? Details are
523
+
<a
524
+
href="https://www.leereamsnyder.com/favicons-in-2021#clearing-the-icon-cache-in-macos-safari-is-deeply-unpleasant"
525
+
>here</a
526
+
>, but it really sucks. If you're trying to work on your favicon,
527
+
see
528
+
<a
529
+
href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs"
530
+
>this great article</a
531
+
>
532
+
about it, highlighted to me by one of my most favorite websites:
533
+
<a href="https://css-tricks.com/how-to-favicon-in-2021/"
534
+
>CSS-Tricks</a
535
+
>.
536
+
</li>
537
+
<li id="note_whyfavicon">
538
+
Because they helped differentiate URLS in your... favorites. They
539
+
are called favorites instead of bookmarks because Microsoft said so.
540
+
</li>
541
+
542
+
<li id="note_bookmarksaside">
543
+
Aside: I really don't use bookmarks. Maybe this really dates me as a
544
+
member of Generation Z, but it's almost always a lot easier to just
545
+
let the powerful browser autofill <samp>b</samp> into
546
+
<samp>bsky.app</samp> for me. And the bookmarks toolbar is such a
547
+
waste of space! If I don't have the URL saved in the browser for
548
+
whatever reason, searching into Kagi will almost always give me what
549
+
I want.
550
+
</li>
551
+
<li id="note_ie">
552
+
They were introduced in IE5. Makes sense why they use the very
553
+
Windows <samp>.ico</samp> format then.
554
+
</li>
555
+
556
+
<li id="note_googwebmanifest">
557
+
Google actually tried. When they introduced Progressive Web Apps,
558
+
they made a new Web Manifest that you can stuff (Android) icons into
559
+
instead of the head. Here's what that looks like:
560
+
<pre><code class="language-json">
561
+
{
562
+
"icons": [
563
+
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
564
+
{ "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
565
+
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
566
+
]
567
+
}
568
+
</code></pre>
569
+
570
+
It would be nice if we could standardise on this for favicons or
571
+
whatever. But everything has been set in stone, I guess.
572
+
</li>
573
+
574
+
<li id="note_shantell" class="shantell">
575
+
Shantell Sans has a really lovely story. You can
576
+
<a href="https://shantellsans.com/process">read it here</a>.
577
+
</li>
578
+
579
+
<li id="note_highlightssr">
580
+
You may be asking: Why don't you just render it serverside? A few
581
+
reasons:
582
+
<ul style="margin-block-end: 0.5rem">
583
+
<li>
584
+
My website is in PHP, not a compiled language like Rust.
585
+
</li>
586
+
<li>
587
+
I did this <a href="/blog/php-site">before</a>, and made an
588
+
impossible-to-maintain PHP extension that sucks.
589
+
</li>
590
+
<li>
591
+
Even if I did this, I'm moving the highlighting computation
592
+
time onto the "load bearing" HTML step instead of loading
593
+
after the rest of the page is loaded.
594
+
</li>
595
+
<li>
596
+
Like, I'm not caching my pages (because PHP) so every page
597
+
gets rendered on every request. If I was making a static
598
+
site generator this would make a lot more sense. But I'm not
599
+
really interested in re-architecting my entire website for
600
+
this purpose (yet...)
601
+
</li>
602
+
</ul>
603
+
So, I'm choosing to stick with client-side highlighting.
604
+
</li>
605
+
</ol>
606
+
</footer>
607
+
608
+
<style>
609
+
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playwrite+GB+S+Guides:ital@0;1&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap");
610
+
611
+
.monospace {
612
+
font-family: "Courier New", Courier, monospace;
613
+
}
614
+
615
+
.cursive {
616
+
font-family: "Playwrite GB S Guides", cursive;
617
+
font-weight: 400;
618
+
font-style: normal;
619
+
}
620
+
621
+
.shantell {
622
+
font-family: "Shantell Sans", cursive;
623
+
font-optical-sizing: auto;
624
+
font-weight: 400;
625
+
font-style: normal;
626
+
font-variation-settings:
627
+
"BNCE" 0,
628
+
"INFM" 0,
629
+
"SPAC" 0;
630
+
}
631
+
632
+
.hstack {
633
+
display: flex;
634
+
flex-direction: row;
635
+
width: 100%;
636
+
gap: 0.5rem;
637
+
justify-content: center;
638
+
639
+
> * {
640
+
margin-left: 0;
641
+
margin-right: 0;
642
+
}
643
+
}
644
+
</style>