Using VSCode "Copy as HTML" to improve loading time
I'm sure I'm not the first person to figure this out, but you can copy as HTML from VS Code instead of making screenshots.
Unfortunately, this is pretty shitty HTML code:
<meta charset='utf-8'><html><body><!--StartFragment--><pre><div style='color: #000000; background-color: #ffffff; font-family: Menlo, Monaco, 'Courier New', monospace, monospace, AppleBraille; font-size: 12px;'><div><span></span><span style='color: #cd3131;'>Resolver Error:</span><span> </span></div><div><span> </span><span style='color: #949494;'>╭─[</span><span>test.sla:6:9</span><span style='color: #949494;'>]</span><span> </span></div><div><span> </span><span style='color: #949494;'>│</span><span> </span></div><div><span> </span><span style='color: #949494;'>6 │</span><span> </span><span style='color: #b2b2b2;'> </span><span style='color: #ff00ff;'>fib(x - 1)</span><span style='color: #b2b2b2;'> + fib(x - 2)</span><span> </span></div><div><span> </span><span style='color: #585858;'> │</span><span> </span><span style='color: #ff00ff;'>─────┬────</span><span> </span></div><div><span> </span><span style='color: #585858;'> │</span><span> </span><span style='color: #ff00ff;'>╰──────</span><span> function fib not found </span></div><div><span> </span><span style='color: #585858;'> │</span><span> </span></div><div><span> </span><span style='color: #585858;'> │</span><span> </span><span style='color: #87d7af;'>Note</span><span>: This error occurred in the compiler at: src/resolver.rs:691:36 </span></div><div><span></span><span style='color: #949494;'>───╯</span><span> </span></div></div></pre><!--EndFragment--></body></html>It also doesn't look ideal...
Resolver Error:╭─[test.sla:6:9]│6 │ fib(x - 1) + fib(x - 2)│ ─────┬────│ ╰────── function fib not found││ Note: This error occurred in the compiler at: src/resolver.rs:691:36───╯
Luckily, I already have a syntax-highlighting plugin and CSS, and can reuse that CSS here, so it can look like this:
Error:
╭─[test.sla:6:9]
│
6 │ fib(x - 1) + fib(x - 2)
│ ─────┬────
│ ╰────── function fib not found
│
───╯
And the HTML manually cleaned up to be:
<style>
.g { color: #949494; }
.d { color: #585858; }
.p { color: #ff00ff; }
</style>
<pre class="language-rust" style="line-height: 1 !important;"><code class="language-rust" style="line-height: 1 !important;"><span style='color: #cd3131;'>Error:</span>
<span class="g"> ╭─[</span><span>test.sla:6:9</span><span class="g">]</span>
<span class="g"> │</span>
<span class="g"> 6 │</span></span><span class="p"> fib(x - 1)</span><span style='color: #b2b2b2;'> + fib(x - 2)</span>
<span class="d"> │</span><span class="p"> ─────┬────</span>
<span class="d"> │</span><span class="p"> ╰──────</span><span> function fib not found</span>
<span class="d"> │</span>
<span class="g">───╯</span>
</code></pre>With that, I have managed to make the post Improving Sola's errors for development work entirely without images, and thus decrease loading times significantly, because the entire page is transmitted within just the TCP/QUIC slow start window of about 14kb (the page needs to transmit about 5kb), instead of requiring multiple round-trips for the images.
On some systems, the font rendering isn't perfect, and thus, the arrows don't quite line up. This is a trade-off I am willing to accept though, as it's close enough to get the gist.