pyrox.dev
My blog
format
+769
-304
+4
-4
src/_components/about/technology_item.vto
+4
-4
src/_components/about/technology_item.vto
···
1
1
<li>
2
-
<strong class="mr-1">{{ tech.type }}</strong> –
3
-
<a class="ml-1 text-ctp-blue underline" href="{{tech.link}}">
4
-
{{ tech.name }}
5
-
</a>
2
+
<strong class="mr-1">{{ tech.type }}</strong> –
3
+
<a class="ml-1 text-ctp-blue underline" href="{{tech.link}}">
4
+
{{ tech.name }}
5
+
</a>
6
6
</li>
+12
-6
src/_components/flag_text.vto
+12
-6
src/_components/flag_text.vto
···
1
1
<!-- dprint-ignore-file -->
2
2
{{ if flag == "trans" }}
3
-
<span class="trans-flag">
4
-
<span class="text-trans-blue">t</span><span class="text-trans-pink">r</span><span class="text-white">a</span><span class="text-trans-pink">n</span><span class="text-trans-blue">s</span>
5
-
</span>
3
+
<span class="trans-flag">
4
+
<span class="text-trans-blue">t</span><span class="text-trans-pink">r</span><span
5
+
class="text-white"
6
+
>a</span><span class="text-trans-pink">n</span><span class="text-trans-blue">s</span>
7
+
</span>
6
8
{{ else if flag == "lesbian" }}
7
-
<span class="lesbian-flag inline">
8
-
<span class="text-lesbian-orange1">l</span><span class="text-lesbian-orange2">e</span><span class="text-lesbian-orange3">s</span><span class="text-white">b</span><span class="text-lesbian-pink1">i</span><span class="text-lesbian-pink2">a</span><span class="text-lesbian-pink3">n</span>
9
-
</span>
9
+
<span class="lesbian-flag inline">
10
+
<span class="text-lesbian-orange1">l</span><span class="text-lesbian-orange2">e</span><span
11
+
class="text-lesbian-orange3"
12
+
>s</span><span class="text-white">b</span><span class="text-lesbian-pink1">i</span><span
13
+
class="text-lesbian-pink2"
14
+
>a</span><span class="text-lesbian-pink3">n</span>
15
+
</span>
10
16
{{ /if }}
+6
-6
src/_components/footnotes.vto
+6
-6
src/_components/footnotes.vto
···
1
1
<hr class="border-ctp-overlay1 mb-2">
2
2
<ul>
3
-
{{ for fn of footnotes }}
4
-
<li class="fn" id="{{ fn.id }}">
5
-
<span class="fn-label">{{ fn.rawId }}</span>: {{ fn.content }}
6
-
<a href="#{{ fn.refId }}" class="fn-backref" aria-label="Back to reference"></a>
7
-
</li>
8
-
{{ /for }}
3
+
{{ for fn of footnotes }}
4
+
<li class="fn" id="{{ fn.id }}">
5
+
<span class="fn-label">{{ fn.rawId }}</span>: {{ fn.content }}
6
+
<a href="#{{ fn.refId }}" class="fn-backref" aria-label="Back to reference"></a>
7
+
</li>
8
+
{{ /for }}
9
9
</ul>
+31
-28
src/_components/head.vto
+31
-28
src/_components/head.vto
···
7
7
<link rel="alternate" type="application/feed+json" href="/blog.json" />
8
8
<link rel="alternate" type="application/rss+xml" href="/blog.rss" />
9
9
{{# Stylesheets #}}
10
-
<link rel="stylesheet" href="/static/fonts.css" />
11
10
<link
12
-
rel="stylesheet"
13
-
href='/static/styles.css?v={{ new Date(Date.now()).toISOString() |> date("t") }}'
11
+
rel="stylesheet"
12
+
href='/static/styles.css?v={{ new Date(Date.now()).toISOString() |> date("t") }}'
14
13
/>
15
14
<link
16
-
rel="stylesheet"
17
-
href='/static/icons/bsi.min.css?v={{ new Date(Date.now()).toISOString() |> date("t") }}'
15
+
rel="stylesheet"
16
+
href='/styles.css?v={{ new Date(Date.now()).toISOString() |> date("t") }}'
18
17
/>
19
18
<link
20
-
rel="stylesheet"
21
-
href='/static/icons/si.min.css?v={{ new Date(Date.now()).toISOString() |> date("t") }}'
19
+
rel="stylesheet"
20
+
href='/static/icons/bsi.min.css?v={{ new Date(Date.now()).toISOString() |> date("t") }}'
21
+
/>
22
+
<link
23
+
rel="stylesheet"
24
+
href='/static/icons/si.min.css?v={{ new Date(Date.now()).toISOString() |> date("t") }}'
22
25
/>
23
26
{{# Page Metadata #}}
24
27
<link rel="canonical" href="{{ url |> url(true) }}" />
25
28
<title>{{ title }}</title>
26
29
{{ if !production }}
27
-
<script defer src="/static/scripts/open-in-editor.js"></script>
28
-
<script src="/static/scripts/highlight-accessibility.js"></script>
29
-
{{# Load Sa11y #}}
30
-
<link rel="preconnect" href="https://cdn.jsdelivr.net">
31
-
<link
32
-
rel="stylesheet"
33
-
href="https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@latest/dist/css/sa11y.min.css"
34
-
/>
35
-
<script
36
-
src="https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@latest/dist/js/lang/en.umd.js,gh/ryersondmp/sa11y@latest/dist/js/sa11y.umd.min.js"
37
-
></script>
38
-
<script defer>
39
-
Sa11y.Lang.addI18n(Sa11yLangEn.strings);
40
-
const sa11y = new Sa11y.Sa11y({
41
-
checkRoot: "body",
42
-
readabilityRoot: "main",
43
-
developerChecksOnByDefault: true,
44
-
showGoodLinkButton: false,
45
-
showGoodImageButton: false,
46
-
});
47
-
</script>
30
+
<script defer src="/static/scripts/open-in-editor.js"></script>
31
+
<script src="/static/scripts/highlight-accessibility.js"></script>
32
+
{{# Load Sa11y #}}
33
+
<link rel="preconnect" href="https://cdn.jsdelivr.net">
34
+
<link
35
+
rel="stylesheet"
36
+
href="https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@latest/dist/css/sa11y.min.css"
37
+
/>
38
+
<script
39
+
src="https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@latest/dist/js/lang/en.umd.js,gh/ryersondmp/sa11y@latest/dist/js/sa11y.umd.min.js"
40
+
></script>
41
+
<script defer>
42
+
Sa11y.Lang.addI18n(Sa11yLangEn.strings);
43
+
const sa11y = new Sa11y.Sa11y({
44
+
checkRoot: "body",
45
+
readabilityRoot: "main",
46
+
developerChecksOnByDefault: true,
47
+
showGoodLinkButton: false,
48
+
showGoodImageButton: false,
49
+
});
50
+
</script>
48
51
{{ /if }}
49
52
50
53
{{# Disable Dark Reader #}}
+4
-4
src/_components/logo.vto
+4
-4
src/_components/logo.vto
···
1
1
<div class="flex flex-row justify-center gap-x-2 lg:gap-x-4 content-center">
2
-
<i
3
-
class="bi bi-exclamation-triangle text-ctp-yellow self-center justify-self-end text-2xl lg:text-4xl"
4
-
></i>
5
-
<p class="text-ctp-text font-mono text-lg lg:text-xl self-center">0x64697368</p>
2
+
<i
3
+
class="bi bi-exclamation-triangle text-ctp-yellow self-center justify-self-end text-2xl lg:text-4xl"
4
+
></i>
5
+
<p class="text-ctp-text font-mono text-lg lg:text-xl self-center">0x64697368</p>
6
6
</div>
+26
-26
src/_components/post_card.vto
+26
-26
src/_components/post_card.vto
···
1
1
{{ if compact }}
2
-
<li class="bg-ctp-surface0 rounded">
3
-
<a href="{{ post.url }}">
4
-
<div class="m-4 py-1">
5
-
<p class="text-ctp-subtext1 text-lg">{{ post.title }}</p>
6
-
<p class="inline italic text-ctp-subtext0">{{ post.summary }}</p>
7
-
<p class="float-right inline text-ctp-blue">
8
-
<time datetime="{{ post.published |> date('SHORT_DATE') }}">
9
-
{{ post.published |> date('DATE') }}
10
-
</time>
11
-
</p>
12
-
</div>
13
-
</a>
14
-
</li>
2
+
<li class="bg-ctp-surface0 rounded">
3
+
<a href="{{ post.url }}">
4
+
<div class="m-4 py-1">
5
+
<p class="text-ctp-subtext1 text-lg">{{ post.title }}</p>
6
+
<p class="inline italic text-ctp-subtext0">{{ post.summary }}</p>
7
+
<p class="float-right inline text-ctp-blue">
8
+
<time datetime="{{ post.published |> date('SHORT_DATE') }}">
9
+
{{ post.published |> date("DATE") }}
10
+
</time>
11
+
</p>
12
+
</div>
13
+
</a>
14
+
</li>
15
15
{{ else }}
16
-
<li class="bg-ctp-surface0 rounded-md w-3/4 lg:w-full">
17
-
<a href="{{ post.url }}">
18
-
<div class="m-6 py-2">
19
-
<h2 class="text-ctp-subtext1 font-serif text-2xl mb-2">{{ post.title }}</h2>
20
-
<h3 class="text-lg lg:inline italic text-ctp-subtext0">{{ post.summary }}</h3>
21
-
<p class="text-lg lg:float-right lg:inline text-ctp-blue">
22
-
<time datetime="{{ post.published |> date('SHORT_DATE') }}">
23
-
{{ post.published |> date('DATE') }}
24
-
</time>
25
-
</p>
26
-
</div>
27
-
</a>
28
-
</li>
16
+
<li class="bg-ctp-surface0 rounded-md w-3/4 lg:w-full">
17
+
<a href="{{ post.url }}">
18
+
<div class="m-6 py-2">
19
+
<h2 class="text-ctp-subtext1 font-serif text-2xl mb-2">{{ post.title }}</h2>
20
+
<h3 class="text-lg lg:inline italic text-ctp-subtext0">{{ post.summary }}</h3>
21
+
<p class="text-lg lg:float-right lg:inline text-ctp-blue">
22
+
<time datetime="{{ post.published |> date('SHORT_DATE') }}">
23
+
{{ post.published |> date("DATE") }}
24
+
</time>
25
+
</p>
26
+
</div>
27
+
</a>
28
+
</li>
29
29
{{ /if }}
+11
-11
src/_components/project_card.vto
+11
-11
src/_components/project_card.vto
···
1
1
<li class="bg-ctp-surface0 p-4 text-lg rounded-md">
2
-
<h2 class="text-2xl font-serif mb-2">{{ project.name }}</h2>
3
-
<h3 class="italic">{{ project.description }}</h3>
4
-
<p>Techs Used: {{ project.techs }}</p>
5
-
<p>
6
-
Developed Since:
7
-
<strong><time datetime="{{ project.start |> date('date') }}">
8
-
{{ project.start |> date('POST_DATE') }}
9
-
</time></strong>
10
-
</p>
11
-
<p>Status: {{ project.status }}</p>
12
-
<a class="underline text-ctp-blue" href="{{ project.link }}">{{ project.link }}</a>
2
+
<h2 class="text-2xl font-serif mb-2">{{ project.name }}</h2>
3
+
<h3 class="italic">{{ project.description }}</h3>
4
+
<p>Techs Used: {{ project.techs }}</p>
5
+
<p>
6
+
Developed Since:
7
+
<strong><time datetime="{{ project.start |> date('date') }}">
8
+
{{ project.start |> date("POST_DATE") }}
9
+
</time></strong>
10
+
</p>
11
+
<p>Status: {{ project.status }}</p>
12
+
<a class="underline text-ctp-blue" href="{{ project.link }}">{{ project.link }}</a>
13
13
</li>
+17
-17
src/_components/table_of_contents.vto
+17
-17
src/_components/table_of_contents.vto
···
1
1
<nav class="toc" aria-labelledby="toc-header">
2
-
<h2 class="text-ctp-overlay1 mb-1" id="toc-header">Table of Contents</h2>
3
-
<ol class="toc-l1">
4
-
{{ for item of toc }}
5
-
<li>
6
-
<a href="#{{ item.slug }}">{{ item.text }}</a>
2
+
<h2 class="text-ctp-overlay1 mb-1" id="toc-header">Table of Contents</h2>
3
+
<ol class="toc-l1">
4
+
{{ for item of toc }}
5
+
<li>
6
+
<a href="#{{ item.slug }}">{{ item.text }}</a>
7
7
8
-
{{ if item.children.length }}
9
-
<ul>
10
-
{{ for child of item.children }}
11
-
<li class="toc-l2">
12
-
<a href="#{{ child.slug }}">{{ child.text }}</a>
13
-
</li>
14
-
{{ /for }}
15
-
</ul>
16
-
{{ /if }}
17
-
</li>
18
-
{{ /for }}
19
-
</ol>
8
+
{{ if item.children.length }}
9
+
<ul>
10
+
{{ for child of item.children }}
11
+
<li class="toc-l2">
12
+
<a href="#{{ child.slug }}">{{ child.text }}</a>
13
+
</li>
14
+
{{ /for }}
15
+
</ul>
16
+
{{ /if }}
17
+
</li>
18
+
{{ /for }}
19
+
</ol>
20
20
</nav>
+17
-17
src/_components/webring.vto
+17
-17
src/_components/webring.vto
···
1
1
<li
2
-
class="mb-2 lg:mb-4 px-2 py-1 bg-ctp-surface0 text-center text-lg rounded-md w-full sm:w-1/2 xl:w-1/3"
2
+
class="mb-2 lg:mb-4 px-2 py-1 bg-ctp-surface0 text-center text-lg rounded-md w-full sm:w-1/2 xl:w-1/3"
3
3
>
4
-
<p><a href="{{ring.all}}" class="text-serif text-2xl text-ctp-mauve">{{ ring.name }}</a></p>
4
+
<p><a href="{{ring.all}}" class="text-serif text-2xl text-ctp-mauve">{{ ring.name }}</a></p>
5
+
<a
6
+
href="{{ring.previous}}"
7
+
class="text-ctp-green"
8
+
aria-label="Previous site in the {{ring.name}}"
9
+
>< Previous</a> |
10
+
{{ if ring.random }}
5
11
<a
6
-
href="{{ring.previous}}"
7
-
class="text-ctp-green"
8
-
aria-label="Previous site in the {{ring.name}}"
9
-
>< Previous</a> |
10
-
{{ if ring.random }}
11
-
<a
12
-
href="{{ring.random}}"
13
-
class="text-ctp-peach"
14
-
aria-label="Random site in the {{ring.name}}"
15
-
>Random</a> |
16
-
{{ /if }}
17
-
<a href="{{ring.all}}" class="text-ctp-sapphire" aria-label="Site list for the {{ring.name}}"
18
-
>All</a> |
19
-
<a href="{{ring.next}}" class="text-ctp-maroon" aria-label="Next site in the {{ring.name}}"
20
-
>Next ></a>
12
+
href="{{ring.random}}"
13
+
class="text-ctp-peach"
14
+
aria-label="Random site in the {{ring.name}}"
15
+
>Random</a> |
16
+
{{ /if }}
17
+
<a href="{{ring.all}}" class="text-ctp-sapphire" aria-label="Site list for the {{ring.name}}"
18
+
>All</a> |
19
+
<a href="{{ring.next}}" class="text-ctp-maroon" aria-label="Next site in the {{ring.name}}"
20
+
>Next ></a>
21
21
</li>
+41
src/_data/decap_cms.toml
+41
src/_data/decap_cms.toml
···
1
+
media_folder = "src/static/media"
2
+
public_folder = "/static/media"
3
+
[backend]
4
+
name = "git-gateway"
5
+
branch = "main"
6
+
7
+
[[collections]]
8
+
name = "blog"
9
+
label = "Blog Posts"
10
+
label_singular = "Blog Post"
11
+
folder = "src/blog"
12
+
extension = "md"
13
+
format = "yaml-frontmatter"
14
+
15
+
# Metadata Fields
16
+
[[collections.fields]]
17
+
name = "title"
18
+
label = "Title"
19
+
widget = "string"
20
+
[[collections.fields]]
21
+
name = "summary"
22
+
label = "Summary"
23
+
widget = "text"
24
+
[[collections.fields]]
25
+
name = "draft"
26
+
label = "Draft Status"
27
+
widget = "boolean"
28
+
[[collections.fields]]
29
+
name = "published"
30
+
label = "Publish Date"
31
+
widget = "datetime"
32
+
date_format = "YYYY-MM-DD"
33
+
[[collections.fields]]
34
+
name = "templateEngines"
35
+
label = "Template Engines"
36
+
widget = "hidden"
37
+
default = ["vto", "md"]
38
+
[[collections.fields]]
39
+
name = "body"
40
+
label = "Post Content"
41
+
widget = "markdown"
+75
src/_data/volunteering.toml
+75
src/_data/volunteering.toml
···
1
+
[orgs]
2
+
3
+
[orgs.bb]
4
+
name = "Binary Breakers"
5
+
homepage = "https://binarybreakers.com"
6
+
7
+
[[orgs.bb.events]]
8
+
name = "The Breakout: Cozy Edition"
9
+
role = "Chat Moderation"
10
+
[[orgs.bb.events]]
11
+
name = "The Breakout: Spring BreakOUT"
12
+
role = "Chat Moderation"
13
+
[[orgs.bb.events]]
14
+
name = "The Breakout: Summer GAYmes"
15
+
role = "Chat Moderation"
16
+
17
+
18
+
[orgs.furs]
19
+
name = "Fastest Furs"
20
+
homepage = "https://fastestfurs.com"
21
+
22
+
[[orgs.furs.events]]
23
+
name = "Fastest Furs LIVE at FWA 2025"
24
+
role = "Chat Moderation"
25
+
26
+
27
+
[orgs.fatales]
28
+
name = "Frame Fatales"
29
+
homepage = "https://framefatales.com"
30
+
31
+
[[orgs.fatales.events]]
32
+
name = "Frost Fatales 2025"
33
+
role = "In-Studio Stream Tech, Cam Ops"
34
+
[[orgs.fatales.events]]
35
+
name = "Flame Fatales 2024"
36
+
role = "Chat Moderation"
37
+
[[orgs.fatales.events]]
38
+
name = "Frost Fatales 2024"
39
+
role = "Chat Moderation"
40
+
41
+
42
+
[orgs.gdq]
43
+
name = "Games Done Quick"
44
+
homepage = "https://gamesdonequick.com/"
45
+
46
+
[[orgs.gdq.events]]
47
+
name = "Summer Games Done Quick 2025"
48
+
role = "Chat Moderation"
49
+
[[orgs.gdq.events]]
50
+
name = "Awesome Games Done Quick 2025"
51
+
role = "Chat Moderation"
52
+
[[orgs.gdq.events]]
53
+
name = "Summer Games Done Quick 2024"
54
+
role = "Chat Moderation"
55
+
[[orgs.gdq.events]]
56
+
name = "Awesome Games Done Quick 2024"
57
+
role = "Chat Moderation"
58
+
59
+
60
+
[orgs.zt]
61
+
name = "Zeldathon"
62
+
homepage = "https://zeldathon.com"
63
+
64
+
[[orgs.zt.events]]
65
+
name = "Zeldathon Voyage"
66
+
role = "Chat Moderation"
67
+
68
+
69
+
[orgs.la]
70
+
name = "Lady Arcaders"
71
+
homepage = "https://ladyarcaders.com/"
72
+
73
+
[[orgs.la.events]]
74
+
name = "Out of Bounds 2ronto"
75
+
role = "Chat Moderation"
+41
-42
src/_includes/layouts/about.vto
+41
-42
src/_includes/layouts/about.vto
···
1
1
{{ layout "layouts/base.vto" }}
2
-
<main class="ml-4 my-8 min-h-screen text-ctp-text justify-self-center w-full lg:w-1/2 h-card">
3
-
<h1 class="text-5xl text-bold text-ctp-mauve">
4
-
About
5
-
<span class="p-name p-nickname inline">
6
-
dish
7
-
</span>
8
-
</h1>
9
-
<img
10
-
class="h-64 w-64 rounded-full my-4"
11
-
src="/static/images/author.png"
12
-
transform-images="avif webp 300@2"
13
-
alt="dish at Frost Fatales 2025. She has her head tilted 45 degrees to the left and is wearing a face mask with the trans flag on it."
14
-
/>
2
+
<main class="ml-4 my-8 min-h-screen text-ctp-text justify-self-center w-full lg:w-1/2 h-card">
3
+
<h1 class="text-5xl text-bold text-ctp-mauve">
4
+
About
5
+
<span class="p-name p-nickname inline">
6
+
dish
7
+
</span>
8
+
</h1>
9
+
<img
10
+
class="h-64 w-64 rounded-full my-4"
11
+
src="/static/images/author.png"
12
+
transform-images="avif webp 300@2"
13
+
alt="dish at Frost Fatales 2025. She has her head tilted 45 degrees to the left and is wearing a face mask with the trans flag on it."
14
+
/>
15
15
16
-
<div class="text-lg h-entry">
17
-
{{ content }}
18
-
</div>
16
+
<div class="text-lg h-entry">
17
+
{{ content }}
18
+
</div>
19
19
20
-
<h2 class="mt-8 mb-1 text-ctp-mauve text-2xl">Webrings!</h2>
21
-
<p class="text-ctp-text text-lg mb-4">
22
-
We're a big fan of old-school web discovery. Here's the
23
-
<a href="https://en.wikipedia.org/wiki/Webring" class="text-ctp-blue underline"
24
-
>webrings</a>
25
-
we're part of:
26
-
</p>
27
-
<ul>
28
-
{{ for ring of webrings.rings }}
29
-
{{ await comp.webring({"ring": ring}) }}
30
-
{{ /for }}
31
-
</ul>
20
+
<h2 class="mt-8 mb-1 text-ctp-mauve text-2xl">Webrings!</h2>
21
+
<p class="text-ctp-text text-lg mb-4">
22
+
We're a big fan of old-school web discovery. Here's the
23
+
<a href="https://en.wikipedia.org/wiki/Webring" class="text-ctp-blue underline">webrings</a>
24
+
we're part of:
25
+
</p>
26
+
<ul>
27
+
{{ for ring of webrings.rings }}
28
+
{{ await comp.webring({ "ring": ring }) }}
29
+
{{ /for }}
30
+
</ul>
32
31
33
-
<h2 class="mt-8 text-ctp-mauve text-2xl">About This Site</h2>
34
-
<p class="text-ctp-text text-lg">I've used the following to build this site:</p>
35
-
<ul>
36
-
{{ for tech of about.techs }}
37
-
{{ await comp.about.technology_item({"tech": tech}) }}
38
-
{{ /for }}
39
-
</ul>
32
+
<h2 class="mt-8 text-ctp-mauve text-2xl">About This Site</h2>
33
+
<p class="text-ctp-text text-lg">I've used the following to build this site:</p>
34
+
<ul>
35
+
{{ for tech of about.techs }}
36
+
{{ await comp.about.technology_item({ "tech": tech }) }}
37
+
{{ /for }}
38
+
</ul>
40
39
41
-
<p class="mt-4 text-lg">
42
-
Profile picture by Richard Ngo. <a
43
-
class="text-ctp-blue underline"
44
-
href="https://photos.gamesdonequick.com/FrostFatales2025/i-B3c9P48/A"
45
-
>Original Source</a> from Games Done Quick, modified by dish.
46
-
</p>
47
-
</main>
40
+
<p class="mt-4 text-lg">
41
+
Profile picture by Richard Ngo. <a
42
+
class="text-ctp-blue underline"
43
+
href="https://photos.gamesdonequick.com/FrostFatales2025/i-B3c9P48/A"
44
+
>Original Source</a> from Games Done Quick, modified by dish.
45
+
</p>
46
+
</main>
48
47
{{ /layout }}
+8
-8
src/_includes/layouts/base.vto
+8
-8
src/_includes/layouts/base.vto
···
1
1
<!DOCTYPE html>
2
2
<html lang="en-US">
3
-
<head>
4
-
{{ await comp.head({"url": url, "title": title}) }}
5
-
</head>
6
-
<body id="body" class="mocha bg-ctp-crust grid">
7
-
{{ await comp.navbar() }}
3
+
<head>
4
+
{{ await comp.head({ "url": url, "title": title }) }}
5
+
</head>
6
+
<body id="body" class="mocha bg-ctp-crust grid">
7
+
{{ await comp.navbar() }}
8
8
9
-
{{ content }}
9
+
{{ content }}
10
10
11
-
{{ await comp.footer() }}
12
-
</body>
11
+
{{ await comp.footer() }}
12
+
</body>
13
13
</html>
+15
-15
src/_includes/layouts/blog-list.vto
+15
-15
src/_includes/layouts/blog-list.vto
···
1
1
{{ layout "layouts/base.vto" }}
2
-
<main class="min-h-screen text-ctp-text justify-self-center px-4 lg:px-0 w-full lg:w-1/2">
3
-
<h1 class="text-5xl my-8">Blog</h1>
4
-
<a
5
-
class="lg:inline float-right -mt-20 lg:mr-1.5"
6
-
href="/blog.rss"
7
-
aria-label="Blog RSS Feed"
8
-
>
9
-
<i class="text-5xl si si-rss"></i>
10
-
</a>
11
-
<ul class="mt-8">
12
-
{{ for post of search.pages("category=blog", "published=desc") }}
13
-
{{ await comp.post_card({"post": post}) }}
14
-
{{ /for }}
15
-
</ul>
16
-
</main>
2
+
<main class="min-h-screen text-ctp-text justify-self-center px-4 lg:px-0 w-full lg:w-1/2">
3
+
<h1 class="text-5xl my-8">Blog</h1>
4
+
<a
5
+
class="lg:inline float-right -mt-20 lg:mr-1.5"
6
+
href="/blog.rss"
7
+
aria-label="Blog RSS Feed"
8
+
>
9
+
<i class="text-5xl si si-rss"></i>
10
+
</a>
11
+
<ul class="mt-8">
12
+
{{ for post of search.pages("category=blog", "published=desc") }}
13
+
{{ await comp.post_card({ "post": post }) }}
14
+
{{ /for }}
15
+
</ul>
16
+
</main>
17
17
{{ /layout }}
+34
-34
src/_includes/layouts/blog-post.vto
+34
-34
src/_includes/layouts/blog-post.vto
···
1
1
{{ layout "layouts/base.vto" }}
2
-
<main class="min-h-screen text-ctp-text justify-self-center w-full lg:w-1/2">
3
-
<article class="h-entry">
4
-
<h1 class="text-5xl font-serif mt-8 p-name">{{ title }}</h1>
2
+
<main class="min-h-screen text-ctp-text justify-self-center w-full lg:w-1/2">
3
+
<article class="h-entry">
4
+
<h1 class="text-5xl font-serif mt-8 p-name">{{ title }}</h1>
5
5
6
-
<h2 class="mt-4 text-ctp-subtext0">
7
-
Published on
8
-
<time class="dt-published" datetime="{{ published |> date }}">
9
-
{{ published |> date('POST_DATE') }}
10
-
</time>
11
-
</h2>
12
-
13
-
<h2 class="hidden text-ctp-overlay1">
14
-
By
15
-
<span class="inline p-author h-card">{{ author.name }}</span>
16
-
</h2>
6
+
<h2 class="mt-4 text-ctp-subtext0">
7
+
Published on
8
+
<time class="dt-published" datetime="{{ published |> date }}">
9
+
{{ published |> date("POST_DATE") }}
10
+
</time>
11
+
</h2>
17
12
18
-
<h2 class="text-ctp-overlay1">
19
-
{{ readingInfo.words }} words, about {{ readingInfo.minutes }}
20
-
minute{{ if readingInfo.minutes != 1 }}s{{ /if }}
21
-
</h2>
13
+
<h2 class="hidden text-ctp-overlay1">
14
+
By
15
+
<span class="inline p-author h-card">{{ author.name }}</span>
16
+
</h2>
22
17
23
-
{{ if enable_toc != false }}
24
-
{{ if toc.length }}
25
-
{{ await comp.table_of_contents({"toc": toc}) }}
26
-
{{ else }}
27
-
<div class="mb-8"></div>
28
-
{{ /if }}
29
-
{{ /if }}
18
+
<h2 class="text-ctp-overlay1">
19
+
{{ readingInfo.words }} words, about {{ readingInfo.minutes }}
20
+
minute{{ if readingInfo.minutes != 1 }}s{{ /if }}
21
+
</h2>
30
22
31
-
<div class="e-content text-lg">
32
-
{{ content }}
33
-
</div>
34
-
</article>
35
-
{{ if footnotes.length }}
36
-
<section aria-label="Footnotes">
37
-
{{ await comp.footnotes({"footnotes": footnotes }) }}
38
-
</section>
23
+
{{ if enable_toc != false }}
24
+
{{ if toc.length }}
25
+
{{ await comp.table_of_contents({ "toc": toc }) }}
26
+
{{ else }}
27
+
<div class="mb-8"></div>
39
28
{{ /if }}
40
-
</main>
29
+
{{ /if }}
30
+
31
+
<div class="e-content text-lg">
32
+
{{ content }}
33
+
</div>
34
+
</article>
35
+
{{ if footnotes.length }}
36
+
<section aria-label="Footnotes">
37
+
{{ await comp.footnotes({ "footnotes": footnotes }) }}
38
+
</section>
39
+
{{ /if }}
40
+
</main>
41
41
{{ /layout }}
+22
-23
src/_includes/layouts/home.vto
+22
-23
src/_includes/layouts/home.vto
···
1
1
{{ layout "layouts/base.vto" }}
2
-
<main class="min-h-screen text-ctp-text justify-self-center w-full lg:w-1/2 h-card">
3
-
<h1 class="mt-8 text-5xl text-bold text-ctp-mauve">
4
-
hi, I'm <span><a href="/about" rel="me" class="u-url u-uid p-name p-nickname"
5
-
>dish</a></span>
6
-
</h1>
7
-
<img
8
-
class="h-64 w-64 rounded-full mt-4"
9
-
src="/static/images/author.png"
10
-
transform-images="avif webp 300@2"
11
-
alt="dish at Frost Fatales 2025. She has her head tilted 45 degrees to the left and is wearing a face mask with the trans flag on it."
12
-
/>
13
-
<h2 class="text-2xl mt-4 p-note">Student, Sysadmin, and UX Crafter</h2>
14
-
<p class="text-lg mt-2">
15
-
Howdy! I play with computers, with an emphasis on accessible, secure, and enjoyable
16
-
experiences.
17
-
</p>
18
-
<h2 class="my-8 text-2xl">Recent blog posts:</h2>
19
-
<ul class="lg:w-3/4">
20
-
{{ for post of search.pages("category=blog", "published=desc", 5) }}
21
-
{{ await comp.post_card({"post": post, compact: true}) }}
22
-
{{ /for }}
23
-
</ul>
24
-
</main>
2
+
<main class="min-h-screen text-ctp-text justify-self-center w-full lg:w-1/2 h-card">
3
+
<h1 class="mt-8 text-5xl text-bold text-ctp-mauve">
4
+
hi, I'm <span><a href="/about" rel="me" class="u-url u-uid p-name p-nickname">dish</a></span>
5
+
</h1>
6
+
<img
7
+
class="h-64 w-64 rounded-full mt-4"
8
+
src="/static/images/author.png"
9
+
transform-images="avif webp 300@2"
10
+
alt="dish at Frost Fatales 2025. She has her head tilted 45 degrees to the left and is wearing a face mask with the trans flag on it."
11
+
/>
12
+
<h2 class="text-2xl mt-4 p-note">Student, Sysadmin, and UX Crafter</h2>
13
+
<p class="text-lg mt-2">
14
+
Howdy! I play with computers, with an emphasis on accessible, secure, and enjoyable
15
+
experiences.
16
+
</p>
17
+
<h2 class="my-8 text-2xl">Recent blog posts:</h2>
18
+
<ul class="lg:w-3/4">
19
+
{{ for post of search.pages("category=blog", "published=desc", 5) }}
20
+
{{ await comp.post_card({ "post": post, compact: true }) }}
21
+
{{ /for }}
22
+
</ul>
23
+
</main>
25
24
{{ /layout }}
+8
-8
src/_includes/layouts/projects.vto
+8
-8
src/_includes/layouts/projects.vto
···
1
1
{{ layout "layouts/base.vto" }}
2
-
<main class="min-h-screen text-ctp-text justify-self-center w-full lg:w-1/2">
3
-
<h1 class="my-8 text-5xl text-bold text-ctp-mauve">Projects</h1>
4
-
<ul class="space-y-4">
5
-
{{ for project of projects.projects }}
6
-
{{ await comp.project_card({"project": project}) }}
7
-
{{ /for }}
8
-
</ul>
9
-
</main>
2
+
<main class="min-h-screen text-ctp-text justify-self-center w-full lg:w-1/2">
3
+
<h1 class="my-8 text-5xl text-bold text-ctp-mauve">Projects</h1>
4
+
<ul class="space-y-4">
5
+
{{ for project of projects.projects }}
6
+
{{ await comp.project_card({ "project": project }) }}
7
+
{{ /for }}
8
+
</ul>
9
+
</main>
10
10
{{ /layout }}
+23
src/_includes/layouts/volunteering.vto
+23
src/_includes/layouts/volunteering.vto
···
1
+
{{ layout "layouts/base.vto" }}
2
+
<main class="ml-4 my-8 min-h-screen text-ctp-text justify-self-center w-full lg:w-1/2 h-card">
3
+
<h1 class="text-5xl text-bold text-ctp-mauve">
4
+
dish's Volunteering
5
+
</h1>
6
+
7
+
<br>
8
+
9
+
<div class="text-xl">
10
+
{{ content }}
11
+
<br>
12
+
{{ for org of volunteering.orgs }}
13
+
<h2 class="text-3xl">{{ org.name }}</h2>
14
+
<ul>
15
+
{{ for ev of org.events }}
16
+
<li class="text-xl">{{ ev.name }} - {{ ev.role }}</li>
17
+
{{ /for }}
18
+
</ul>
19
+
<br>
20
+
{{ /for }}
21
+
</div>
22
+
</main>
23
+
{{ /layout }}
+3
-2
src/about.md
+3
-2
src/about.md
···
23
23
time advocating for trans rights in the spaces I'm in. I feel very strongly that trans rights are
24
24
human rights, and do my best to uplift all voices, though I am not perfect.
25
25
26
-
Find more about my projects on the [[projects]] page, or read my [[blog/index|blog]], as I've put a
27
-
lot of time into both.
26
+
Find more about my projects on the [[projects]] page, or read my [[blog/index.md|blog]], as I've put
27
+
a lot of time into both. Finally, I do a lot of [[volunteering]], especially for charity marathons!
28
+
Check out my work on that page.
+247
src/blog/consider-the-interface.md
+247
src/blog/consider-the-interface.md
···
1
+
---
2
+
title: Consider the Interface
3
+
summary: 'Why new technology kinda... sucks'
4
+
draft: true
5
+
published: 2025-03-02
6
+
templateEngine: [vto, md]
7
+
---
8
+
9
+
## Introduction
10
+
11
+
Technology always changes. That's something we take for granted, and it's something that will
12
+
continue for decades, centuries, and millennia to come. However, our technological prowess and
13
+
advancement always comes at a cost. There's always something sacrificed in the name of progress.
14
+
15
+
For the past few years, I've had a looming sense of dread about tech. This isn't a doomsday
16
+
premonition, a prophecy, or anything like that. I've just noticed things changing in ways that don't
17
+
make sense. Popular series disappearing, YouTube videos vanishing, and subscription prices
18
+
constantly increasing.
19
+
20
+
I think that this is something we're really going to have to reconcile, especially as we move into
21
+
this new age of generative AI, stolen and derivative works, and in general, as corporations seek to
22
+
take over our daily lives in ways they haven't tried before.
23
+
24
+
I was inspired to write this after watching a
25
+
[video by Drew Gooden](https://www.youtube.com/watch?v=P-TANCVoHlc) called _"Technology isn't fun
26
+
anymore"_, and one he referenced called
27
+
_[Why Young People Love Old Things](https://www.youtube.com/watch?v=0dEJiQnotR8)_, by the channel
28
+
Genuine Curiosity. These two videos helped me work out and describe the feeling I've felt about how
29
+
technology is going backwards while trying to seem like it's going forward.
30
+
31
+
As Drew mentions in his video, many companies seem to be making decisions that are against their
32
+
best interests, such as TV manufacturers enabling "Motion Smoothing" features by default, which can
33
+
then lead to major video artifacting, and in essence, degrades the viewing experience.
34
+
35
+
While I'm not going to explore the economic or market reasons behind these seemingly nonsensical
36
+
decisions, I do want to share my own experience with this sort of thing and try to examine why I do
37
+
the things that I do. Further, this is all from my own perspective, and while I do try to utilize
38
+
others' perspectives to elaborate on my own opinions, at the end of the day, this is how I see the
39
+
world. This is not intended to be an objective piece, just want to make that clear.
40
+
41
+
## Tactility
42
+
43
+
There's something special about using something tactile. Whether that's a temperature dial in a car,
44
+
a light switch, or using a mouse, it's a vastly different experience than the omnipresent
45
+
touchscreens and mousepads so many people use today. It feels like it better connects you to the
46
+
actual experience and action you're doing, giving you a better feeling of control and appreciation
47
+
for what you're doing. Touchscreens and mousepads have absolutely advanced in their capabilities,
48
+
with Apple's being leagues ahead of anyone else, capable of recognizing complex gestures,
49
+
distinguish from many fingers at once, and they give you control you might not otherwise have.
50
+
51
+
However, whenever I use one, it feels distinctly disconnected from the actual thing I'm doing. Yes,
52
+
it's better than the competitors, but it's still just sliding your fingers over a flat surface. On
53
+
the other hand, when I'm using my mouse, there's a distinct _click_ when I press down on the mouse
54
+
buttons, the scroll wheel has a slight whirring noise as it spins, my hand physically moves across
55
+
my desk. In essence, it's like I'm actually pointing at something, which is of course the original
56
+
purpose of a mouse, to be a "pointing device." Windows' Computer Management utility even calls the
57
+
section where you can find these the "Mice and other pointing devices" section.
58
+
59
+
This was a main point brought up in the Genuine Curiosity video, how that sense of tactility helps
60
+
us be better connected to what we're doing. This also connects to another article I've read, this
61
+
one about
62
+
[how to design physical car controls](https://www.theturnsignalblog.com/the-subtle-art-of-designing-physical-control-for-cars/).
63
+
This article brought up some very interesting ideas about how to make something digital feel analog,
64
+
such as with force feedback mechanisms. However, the article brings up one main point at the start
65
+
that I'd like to call your attention to:
66
+
67
+
> When you see any physical control, you automatically get certain expectations from its physical
68
+
> properties like size, shape, and weight.
69
+
70
+
This highlights something that we all intuitively understand, but in general, don't think about,
71
+
unless something goes wildly against this. How many times have you tried to pull on a door with a
72
+
handle, only to realize that it's marked "Push" instead? That design goes against this principle. We
73
+
intuitively know how things operate, and human-centered design takes that into account.
74
+
75
+
However, touchscreens are not human-centered. They do not give any sort of force feedback(aside from
76
+
your keyboard _maybe_ having some sort of haptic feedback), and they are by and large flat panes of
77
+
glass or plastic with no defining features. They don't have any sort of texture, no knobs or
78
+
switches or buttons, in fact, the ideal touchscreen is one that has no distinguishing features
79
+
whatsoever. This, I would argue, is not ideal. Touchscreens are designed for you to be constantly
80
+
looking at and engaged with them, and if you're not looking at them, your ability to use them is
81
+
severely hindered. On the other hand, in many cars, you can adjust the temperature or music volume
82
+
without ever taking your eyes off the road, because the controls were designed so that you need to
83
+
think as little as possible to understand how they work.
84
+
85
+
The issue comes when these two technologies combine. The lack of any sort of feedback, combined with
86
+
the fact that you're driving a 2000+ pound block of metal and plastic down a highway, creates a
87
+
deadly combo. There's no way to know what you're doing without taking your eyes off the road. And
88
+
that's incredibly dangerous when you're the driver of a car. It's why when I buy a car, I'm going to
89
+
be looking for one that has no touchscreen, preferably. I don't want to be a distracted driver, and
90
+
another point on a bar chart.
91
+
92
+
To be clear, I don't think any of these are novel revelations. Many folks have said this exact kind
93
+
of thing before, and it's constantly ignored. However, I think that we're at a critical turning
94
+
point in how we interface with computers. More and more, for better or for worse, is being done
95
+
through voice and chat-like interfaces. Not your typical desktop and web browser experience, but
96
+
asking questions and receiving answers(whether or not they're correct, I'm personally very against
97
+
generative AI) has become a core user experience in many places, even if it isn't the right UX for
98
+
the use.
99
+
100
+
### Mechanisms
101
+
102
+
Another point of tactility that isn't so obvious in its utility is the ability to see the mechanisms
103
+
of how things work. I built my own blog and know how it works. I know what happens and when to make
104
+
the webpage you're reading right now. I like biking, and I can see clearly how it works, it's simple
105
+
and elegant. With a car, this is getting harder and harder to do. More and more critical components
106
+
of your car are controlled by electronic black boxes that take inputs and give outputs, with no real
107
+
way to understand how they work.
108
+
109
+
If you're a programmer or maker or some sort of creative type, you hopefully understand what I mean.
110
+
Being able to make things and understand what went into them, find out how they work, show someone
111
+
how two paints blend together, that to me is the magic of making things. This could be its own
112
+
article on its own(and it may be in the future!), but this is something I strongly emphasize with.
113
+
If I want to, I can take apart the keyboard I'm typing this on. I can open up my desktop, recompile
114
+
my kernel, add another line to this document. I know exactly where to go in my blog to make changes
115
+
to my HTML validator, and I can show someone why I think I did something in an interesting way.
116
+
117
+
To me, this is the fundamental misunderstanding of modern technology. Many people(not saying even
118
+
close to a majority, but a substantial amount nonetheless) enjoy tinkering. They buy things just to
119
+
take them apart and learn how they work. They read through code and fix bugs. They work to create
120
+
something they find beautiful, in whatever way that is. This is why I fell in love with technology,
121
+
and why I don't like modern technology as much. The joy I feel from taking apart an old laptop to
122
+
replace the failing boot drive is the same I get from writing code to render nice tables in a Django
123
+
app.
124
+
125
+
## Simplicity
126
+
127
+
Before you say anything: Yes, I know that user interfaces have gotten way simpler in many ways, and
128
+
especially in positive ways too, such as improved focus on accessibility and ensuring that things
129
+
"just work". However, I also see a trend of there being fewer and fewer escape hatches to allow
130
+
power-users the ability to go beyond what the normal interface allows. To be clear, I think this is
131
+
a good idea from a business perspective, as power users are not a large market, and so products that
132
+
aim to have mass-market appeal don't have a necessity for this kind of feature.
133
+
134
+
However, the aspect I want to focus on here is the underlying technical complexity. In some ways,
135
+
complexity is needed. The world is a big place, there's a lot of people with a lot of needs. There
136
+
needs to be complexity somewhere, but it feels like the world is gravitating towards needless
137
+
complexity all the time. I see so many cases of basic static web apps being built with massive JS
138
+
frameworks, shipping megabytes of code for something that displays a list of items from a server.
139
+
Sure, you might need _some_ JS, but not millions of bytes on it. They're not free to use(in terms of
140
+
maintenance burden), and they're definitely not free for end-users(JS takes way longer to execute,
141
+
while CSS and HTML are much faster, since they're not full programming languages). Therefore,
142
+
technologies like CSS-in-JS[^CSS-in-JS] just feel like they overcomplicate things, instead of making
143
+
it easier. Now, I'd have to deal with increased JS bundle sizes, harder debugging, and an overall
144
+
worse developer and user experience.
145
+
146
+
Something you will hear me emphasize a lot is good user experience. It is one of the areas I most
147
+
heavily focus on, as this site hopefully demonstrates. I aim to keep page sizes small, everything
148
+
compressed, and reduce the amount of JavaScript needed at runtime. This makes my pages performant
149
+
and also accessible. I also try to keep the colors well-balanced, using a variety of accessibility
150
+
checkers, both automated and manual, to make my content as available as possible. And so, I would
151
+
argue, the ever-increasing complexity of modern front-end development simply goes against that, and
152
+
makes things less accessible. By reducing the amount of JavaScript needed for a webpage, you
153
+
increase the number of users you can have, because your site is then more accessible to those with
154
+
low-end devices. Ensuring that users with low-end devices have the ability to access a site, even if
155
+
they have to disable JS to do it, is important(barring situations such as payment processing or
156
+
anything else that absolutely **REQUIRES** JS).
157
+
158
+
## Ownership
159
+
160
+
Another thing I notice with new products, for better or for worse, is that you don't own them. It's
161
+
always a subscription service, or it's a cloud service with proprietary file formats, or a streaming
162
+
service that will delete content that barely doesn't hit popularity metrics this month. As someone
163
+
who enjoys coming back to things weeks, months, sometimes even years after I last interacted with
164
+
them, this is devastating. The fact that so much of the stuff I enjoy today could be gone tomorrow
165
+
is frankly a little bit terrifying. It's why I'm a chronic archivist and that person that tells you
166
+
to back up your stuff. Because this matters to me, and I wish it mattered to more folks.
167
+
168
+
### You don't own new things
169
+
170
+
This is the big issue in all of this. Companies like
171
+
[Steam](https://www.ign.com/articles/steam-now-warns-customers-theyre-buying-a-license-not-a-game-before-they-continue-to-payment),
172
+
[Amazon](https://blog.the-ebook-reader.com/2025/02/22/amazon-now-openly-discloses-youre-buying-a-license-to-view-kindle-ebooks/),
173
+
and more are reminding customers at checkout that when they buy something, **it's not theirs.** And
174
+
yet, many will still click the Buy button, because these companies make it hard to realize you're
175
+
just getting a license, and they can take that away at any time. Hell, even the US FTC
176
+
[has a page](https://consumer.ftc.gov/consumer-alerts/2024/04/do-you-really-own-digital-items-you-paid)
177
+
on the fact you don't really own digital items. As consumers, we should be advocating for permanent
178
+
access to content, whether that's through the DRM-free game downloads offered by GOG, DRM-free books
179
+
from SmashWords, or any other number of companies that respect you more as a consumer.
180
+
181
+
### Repairability
182
+
183
+
I am a massive advocate for consumer right-to-repair and easily accessible repair guides for
184
+
everyone. If you own a device, you should be able to open it up and repair it if you want to, or
185
+
send it to someone to do that for you. There shouldn't be anything in the way of you doing so, and
186
+
allowing customers to repair their own devices can build trust in a brand in a way that no other
187
+
form of consumer control can do. Allowing customers to peer behind the curtain and see how their
188
+
devices work, understand how everything fits together, is to me, more powerful a statement of
189
+
customer trust than anything else. It signals that you trust your users and you want them to use
190
+
your devices however they want. It gives the customer a feeling of control, which many companies are
191
+
seeking to take away.
192
+
193
+
## Algorithms
194
+
195
+
{{ await comp.lorem_ipsum() }}
196
+
197
+
## What I use
198
+
199
+
{{ await comp.lorem_ipsum() }}
200
+
201
+
### RSS Reader
202
+
203
+
{{ await comp.lorem_ipsum() }}
204
+
205
+
### Self-Hosted Music Server
206
+
207
+
{{ await comp.lorem_ipsum() }}
208
+
209
+
### Mechanical Keyboard / Mouse
210
+
211
+
As mentioned above, tactility is one of the key aspects of older devices that I love, and
212
+
specifically, keyboards. There's a reason so many folks love old IBM Model M keyboards, and that's
213
+
because IBM designed springs that were light enough to press down quickly but heavy enough to give
214
+
feedback on whether you pressed a key. While I don't have one of those, I do use a keyboard with
215
+
tactile keys(Gazzew U4T Boba 62g switches, for the keyboard nerds), which helps replicate that
216
+
feeling but in a more budget and space-friendly way(I use a 75% keyboard).
217
+
218
+
To me, this is the ideal typing device. It allows me to do proper 10-finger touch typing, is small
219
+
enough that I don't have to move my hands much to reach every single key, even the function keys to
220
+
change music or whatever, and feels like I'm actually typing. I love my Framework Laptop so much,
221
+
but its keyboard will never compare to my mechanical. The mechanical one feels built for typing, and
222
+
gives the right amount of feedback that I can just keep typing and typing without looking at the
223
+
keyboard, while with the laptop, I look down somewhat frequently. I'm used to touch-typing, so it's
224
+
not _too big_ of a deal, but it still ruins the flow when I have to.
225
+
226
+
The same goes for my mouse. I use a Logitech MX Master 3, and it's a really nice mouse. Using it
227
+
instead of a touchpad lets my arm and wrist do the work of moving the cursor where I want it to go.
228
+
I don't have to consciously think about how to do it, my mind just works. With touchpads, I'm
229
+
constantly readjusting my fingers to make sure I can move my mouse, they can get in the way when I'm
230
+
typing, and they feel less satisfying to click than a mouse does.
231
+
232
+
A lot of this is subjective, no doubt, but having these tools allows me to work more productively
233
+
than I could without them. They help me stay in the flow of typing, coding, gaming, or anything else
234
+
I'm doing, and they do genuinely make my life better. I would not have written so much in this blog
235
+
post if I wasn't doing it on my keyboard, laptop keyboards, even ones as well-made as the
236
+
Framework's, just don't compare to a proper mechanical switch that's designed for a good typing
237
+
experience.
238
+
239
+
## Conclusion
240
+
241
+
{{ await comp.lorem_ipsum() }}
242
+
243
+
[^CSS-in-JS]: To be honest, I've never quite understood the need for CSS-in-JS. It always felt to me
244
+
like it was more trouble than it's worth. Maybe someone can explain what the benefits are?
245
+
Because to me, I would just write CSS with composable classes, like I do for this site. I can
246
+
always grep to see what classes are unused, and even if I don't, PurgeCSS/LightningCSS remove
247
+
unused styles anyways.
+1
src/blog/example-blog-post-2.md
+1
src/blog/example-blog-post-2.md
+57
src/blog/frost-fatales-2025-not-really-behind-the-scenes.md
+57
src/blog/frost-fatales-2025-not-really-behind-the-scenes.md
···
1
+
---
2
+
title: Frost Fatales 2025 (not really) Behind the Scenes
3
+
summary: "dish's experience at Frost Fatales 2025"
4
+
draft: true
5
+
published: 2025-03-15
6
+
templateEngine: [vto, md]
7
+
---
8
+
9
+
Recently, I got the opportunity to volunteer in-studio at the charity speedrunning event _Frost
10
+
Fatales 2025_, where we raised a total of **$150,675** for the
11
+
[National Women's Law Center](https://nwlc.org). This was an incredible opportunity for me
12
+
personally, so I was thrilled that I was able to volunteer. I've never done something like this
13
+
before, so I was both incredibly nervous but also super excited. I've been a member of the Frame
14
+
Fatales community for about a year now, and this was a position I hadn't expected getting. Here, I
15
+
just want to go over a few of my thoughts on the experience, and why I would highly encourage anyone
16
+
who feels femme or like a woman to join, even if they're not a gamer or speedrunner or may even feel
17
+
like they don't belong.
18
+
19
+
<!-- deno-fmt-ignore-start -->
20
+
> [!note]- One small note
21
+
> Please don't see this as me trying to force you to join, as much as I encourage it! Frame
22
+
> Fatales is a super inclusive and wonderful community, even for femme nonbinary folks, trans women,
23
+
> and of course cis women.
24
+
<!-- deno-fmt-ignore-end -->
25
+
26
+
## Frame Fatales
27
+
28
+
First, what is Frame Fatales?
29
+
30
+
To quote [its website](https://framefatales.com):
31
+
32
+
> Frame Fatales is a community of women and femmes who are interested in speedrunning, charity
33
+
> events, and gaming! It is a space for you if you identify as femme or a woman in any way that is
34
+
> meaningful to you. Cis, trans, nonbinary, and gender non-conforming individuals are all welcome to
35
+
> join the Fatales community!
36
+
37
+
And to put it more simply: If you see yourself as a woman or femme in any way that is meaningful to
38
+
you, you're welcome in the community. It's a space for anyone who feels they may belong. As a trans
39
+
woman, this space has been wonderful to help me explore my identity and find folks in the same place
40
+
as me. I was welcomed just as I am now even a year ago, when I identified as "fem-leaning
41
+
nonbinary", and you'll be welcomed the same.
42
+
43
+
## The Experience
44
+
45
+
<!-- deno-fmt-ignore-start -->
46
+
> [!info] Legal Stuff
47
+
> I am under an NDA for a lot of my experience. I'm trying to be as detailed as I can,
48
+
> but at the same time I am going to err on the side of caution when I need to.
49
+
> I can't show pictures of studio stuff, software interfaces, the address of the studio, or anything like that.
50
+
<!-- deno-fmt-ignore-end -->
51
+
52
+
With that out of the way, I will say that this has been a very good experience. The folks I worked
53
+
with were wonderful, and the atmosphere was very positive all around. GDQ has built a lot of nice
54
+
behind-the-scenes tooling that makes it really easy for beginners like me to do well and succeed,
55
+
and I genuinely think that its one of their strengths. I can do the same things that folks with 5+
56
+
years of experience can do, and in about the same amount of time, because the tooling has been
57
+
well-thought-out and is designed to make things intuitive and fast.
src/static/mocha.css
src/_includes/mocha.css
src/static/mocha.css
src/_includes/mocha.css
+1
-1
src/static/styles.css
+1
-1
src/static/styles.css
+13
src/volunteering.md
+13
src/volunteering.md
···
1
+
---
2
+
title: dish's Volunteering
3
+
summary: "Who is dish? Find out here."
4
+
layout: "layouts/volunteering.vto"
5
+
templateEngine: [vto, md]
6
+
---
7
+
8
+
I'm a very active volunteer in a lot of communities. Find out what I've done below, and feel free to
9
+
contact me if you'd like a volunteer for your event!
10
+
11
+
> [!note]+ Notice of non-endorsement I am not an official spokesperson for these communities, nor
12
+
> should my involvement in their events be seen as an endorsement of me. This page is more for my
13
+
> own tracking.