1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
|
Document: WM-090 P. Webb
Category: Self-Host 2026-04-27
The beauty of creating your own tools
Abstract
Being the change you wish to see in the world, software-style.
Body
Late last week I was hit with a sudden need to update my GraphQL
module with QoL improvements and see if it was possible to create a
GraphiQL interface with Svelte so I could use that instead of the
React one embedded within (my module was a fork and I didn't know
enough to swap it out). I won't bury the lede, both projects are live
and work wonderfully. I'm so excited, check 'em out!
- `@eol/gq`[1]
- I intend to publish most (if not all) I build for EOL, my future
git forge/Github replacement. Glad I obtained this namespace
on JSR!
- View source[2]
- `@eeeooolll/graphiql`[3]
- I prefer Deno but JSR doesn't understand `.svelte` files so I had
to use NPM
- Someone snagged `@eol` so I had to use the obnoxious-looking
`@eeeooolll` namespace
- View source[4]
## `@eol/gq`
When I was doing exploratory work on my personal OS concept, I
rethought how I build GraphQL servers and added some niceties to my
template. Here's how I typically set them up:
For a directory listing like
```
schema
├─ api.graphql
├─ channel.graphql
├─ comment.graphql
├─ customer.graphql
├─ error.graphql
├─ guide.graphql
├─ login.graphql
├─ notification.graphql
├─ pagination.graphql
├─ playlist.graphql
├─ reaction.graphql
├─ report.graphql
├─ schema.graphql
├─ session.graphql
├─ stream.graphql
├─ subscription.graphql
├─ tag.graphql
└─ video.graphql
```
I would also have this in my `schema.graphql`
```graphql
# import from "api.graphql"
# import from "channel.graphql"
# import from "comment.graphql"
# import from "customer.graphql"
# import from "error.graphql"
# import from "guide.graphql"
# import from "login.graphql"
# import from "notification.graphql"
# import from "pagination.graphql"
# import from "playlist.graphql"
# import from "reaction.graphql"
# import from "report.graphql"
# import from "session.graphql"
# import from "stream.graphql"
# import from "subscription.graphql"
# import from "tag.graphql"
# import from "video.graphql"
```
Each SDL in those files would get combined into the full schema. This
is way too much work. Why was I doing this?!
In my new setup I look for a `# DYNAMIC_IMPORTS` comment and the
module automatically looks for other `.graphql` files. If they're in
the directory, you must want to use them, right? That was the first
QoL update.
The second was exporting `makeExecutableSchema` from
`@graphql-tools/schema` so I wouldn't have to install a second
dependency that I always need anyway. SMH
I also ran into an issue a while back where TypeScript was
complaining about two versions of `graphql` because of my original
module was using an old version.
I wasn't content with these updates though. Why not go further?!
If you wanna take a break and check out the new hotness, open your
Terminal and:
```sh
deno run -A https://code.webb.page/eol/gq.git/plain/remote-example.ts
```
Assuming you have Deno installed (`curl` the URL to check contents).
## `@eeeooolll/graphiql`
I asked Claude about the feasibility of replacing React in GraphiQL
with Svelte and it referenced a forum post from 2020 where someone
was asking for help doing that very same thing. This sounded familiar
so I checked it out and...yup, that was me[5].
Claude did a good job scaffolding and I spent the rest of the weekend
redesigning and customizing to my specifications.
Here, have some screenshots!
[📸[query and response][IMG1]](https://cdn.webb.page/blog/2026/wm-090-a.png)
[📸[history sidebar open][IMG2]](https://cdn.webb.page/blog/2026/wm-090-b.png)
[📸[history and docs sidebars open][IMG3]](https://cdn.webb.page/blog/2026/wm-090-c.png)
[📸[navigating docs][IMG4]](https://cdn.webb.page/blog/2026/wm-090-e.png)
I even made the UI responsive! Not sure why you'd ever want to input
GraphQL queries on the go but whatevs.
[📸[responsive][IMG5]](https://cdn.webb.page/blog/2026/wm-090-g.png)
When I'm coding or dealing with a Terminal, I prefer the block cursor
so after some trial and error I asked Claude for help and now we
have this!
📼[CodeMirror block cursor][VID1]
It's not perfect but I didn't want to delve too deep into the
over-engineering threshold. Here's how it works though:
```ts
const blockCaretTheme = EditorView.theme({
"&": {
caretColor: "transparent"
},
"& .cm-cursor": {
borderLeftColor: color("blue", 5),
borderLeftStyle: "solid",
borderLeftWidth: "1ch",
marginLeft: "0"
},
"& .cm-cursorLayer": {
mixBlendMode: "hard-light",
zIndex: "auto"
},
"& .cm-scroller": {
isolation: "isolate"
}
});
```
I've seen people try and guess the width of a character to make their
block cursors the perfect size when they could've just used `1ch` in
CSS (I just learned about that this year, haha)!
You'll also need `@codemirror/view`'s `drawSelection` if you go this
route, the rest of this code is here[6] (featuring the new uchū
NPM module)!
## `@inc/uchu`
I've long resisted making an NPM module for uchū because I was
convinced that I was done with them. Bun is fantastic, Deno is even
better, why do I need them? Well, Deno isn't the best for everything
so here we are.
The work I was doing on those GraphQL modules necessitated the need
for an easy way to integrate my color palette and I made things as
easy as possible while cutting down on boilerplate and repeating
myself through code.
Find it on NPM[7] and my codex[8]!
## FIN
I was having a conversation with some online friends on Discord where
we lamented the immense lack of care and craft in software these
days. It seems like lots of people are using LLMs as an excuse to not
think[9] about things like safety, security, and taste.
There was a story where a startup used an LLM IN PRODUCTION AND GOT
THEIR DATABASE WIPED[10]. Like...what the actual fuck?! People are
insane. Imagine placing blame anywhere but yourself! SMDH
Anyhoo, I don't trust "AI" tools as far as I can throw 'em and they
aren't tangible so I can't throw anything so why trust them??? I
intentionally use "LLM" because that's true to what these tools ARE.
And AS tools they're pretty damn good at helping me make tools for
the things I want to do.
There's now documented proof that I've been railing against the tech
industry's obsession with/reliance on React for more than half a
decade at least; it's wack af. React Native isn't a good excuse
anymore when excellent tools like Tauri[11] and Electrobun[12] exist.
Look at this guy, disgusted with the slowness of DuckDuckGo so he
replicated their !bangs feature and released a lil' service[13] for
others to use. Pretty sweet.
All this to say, making your own tools is fun and awesome and I enjoy
the process. 🕸️
References
[1] <https://jsr.io/@eol/gq>
[2] <https://code.webb.page/eol/gq.git/about>
[3] <https://www.npmjs.com/package/@eeeooolll/graphiql>
[4] <https://code.webb.page/eol/graphiql.git/about>
[5] <https://discuss.codemirror.net/t/graphql-grammar/2323>
[6] <https://code.webb.page/eol/graphiql.git/tree/source/library/themes/light.ts>
[7] <https://www.npmjs.com/package/@inc/uchu>
[8] <https://code.webb.page/nevercease/uchu.git/about>
[9] <https://www.koshyjohn.com/blog/ai-should-elevate-your-thinking-not-replace-it>
[10] <https://fxtwitter.com/lifeof_jer/status/2048103471019434248>
[11] <https://tauri.app>
[12] <https://blackboard.sh/electrobun/docs>
[13] <https://search.stupidtech.net>
[IMG1] <https://cdn.webb.page/blog/2026/wm-090-a.png>
[IMG2] <https://cdn.webb.page/blog/2026/wm-090-b.png>
[IMG3] <https://cdn.webb.page/blog/2026/wm-090-c.png>
[IMG4] <https://cdn.webb.page/blog/2026/wm-090-e.png>
[IMG5] <https://cdn.webb.page/blog/2026/wm-090-g.png>
[VID1] <https://nickel.video/embed/8l201Ll6k2N1>
|