1
0
Fork 0

Compare commits

..

2 Commits

@ -0,0 +1,94 @@
Using Gleam in HTML with as little JavaScript knowledge as possible
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
:slug: using-gleam-in-html-low-js
:date: 2024-09-09 16:28
:tags: gleam, software, web
:category: programming
:keywords: javascript module, gleam, frontend
:lang: en
:translation: false
:status: published
I've been looking at the `Gleam language <https://gleam.run>`__ recently. Among other features, it can be compiled to JavaScript, and thus presumably used on web frontend. I wanted to try that. This is a short tutorial on how to do that with little idea how JavaScript is supposed to work.
My initial JS knowledge: ``alert(3)``, ``onclick`` and some basic selectors, i.e. the little stuff that is useful to add minor interactivity to HTML pages and implement trivial ViolentMonkey scripts. Namely: I have no knowledge about modules and whatnot, and this post is just a result of my trial-and-error attempt at embedding my Gleam. I succeeded, but still have no idea what I am doing :-)
My code
=======
Let's start with some trivial code, in ``src/lol.gleam`` (in a project initialised with ``gleam new lol`` and the ``repeatedly`` package added with ``gleam add repeatedly``)::
import gleam/io
import repeatedly
pub fn say_hello() {
repeatedly.call(2000, Nil, fn(_state, _call) {io.println(get_greeting())})
}
pub fn get_greeting() {
"Hello World!"
}
pub fn main() {
io.println("3, 2, 1, go!")
}
This snippet has many of the basic stuff I might need in future: it does some io, it uses another package [#stdlib-package]_, it returns data I will want to show. At first I am mostly interested in multiplatform stuff (i.e. running also on the BEAM backend), so I don't want to use any DOM frameworks at first, though I will mention some of the ways later in the post.
So, build this for JavaScript: ``gleam build --target javascript``, and *stuff happens*. It is not very clear what to do now, but ``grep``ping through the ``build/`` directory shows that the built code lives in ``build/dev/javascript/lol/lol.mjs``.
Embedding the code
==================
Here comes the fun part: the code is in JavaScript *module*, not plain code. That comes with several surprises:
- It can only be imported from other modules, not by “plain” code in global scope
- Due to CORS, imports only work with network schemes, not with the ``file://`` one
- Due to scoping, I have not found a way of using the functions from devtools console
Big wins for the platform /s, but we have to live with that, so let's try to write the respective HTML for this. I put that in ``main.html`` in the project root, but it does not probably matter. The code::
<!doctype html>
<html>
<head>
<meta charset=utf-8> <!-- firefox complains otherwise -->
<title>Buh</title>
</head>
<body>
<!-- some random elements to work with -->
<button id=butt>Klik mee</button>
<p id=uwu>
<!-- the “binding” to our Gleam code. This probably needs to be at the end of the page, since it needs to be able to use the selectors. -->
<script type=module> //It has to be a module to allow imports
import * as lol from "./build/dev/javascript/lol/lol.mjs";
// Set the text of one element to the computed stuff:
let par = document.getElementById('uwu');
par.innerText = lol.get_greeting();
// Let's have an interactive button (I love the come-from pattern, but using `onclick` would be even trickier…)
let butt = document.getElementById('butt');
butt.addEventListener('click', lol.say_hello);
// Apparently, the `main` function does not get run automatically, so call that explicitly.
lol.main();
</script>
</body>
</html>
Shoutout to `the person who asked the same question on StackOverflow <https://stackoverflow.com/questions/53630310/use-functions-defined-in-es6-module-directly-in-html>`__. From this point on, we only need a HTTP server; luckily, Python has one in stdlib, so just calling ``python3 -m http.server 12312`` in the project root lets us load ``http://localhost:12312/main.html`` and see our page.
Next steps, alternatives et cetera
==================================
When developing web frontend in Gleam, the more common way is using a framework like `Lustre <https://hexdocs.pm/lustre/index.html>`__ or at least a DOM library (there are `several <https://packages.gleam.run/?search=dom>`__, I have no idea how mature those are). I did not go this route yet, because I am more interested in using backend-agnostic Gleam code from JavaScript and don't mind writing the trivial bindings in JavaScript. [#netzpevnik-gleam]_
Also, a common thing to do is using a minifier+bundler like `esgleam <https://hexdocs.pm/esgleam/index.html>`__ (it uses `esbuild <https://esbuild.github.io/>`__ under the hood), so that the whole project is in one file. I don't think I need that now (having the JS be readable is more important to me atm and I don't want to complicate things further), but there is at least `one tutorial <https://erikarow.land/notes/esgleam-embed>`__ on how to do that.
Also, during writing of this article I realised Gleam can run all the JS code from itself, so I could have a ``js_main`` function that would bind the HTML from Gleam itself. But this is probably more readable and separated anyway.
-------
.. [#stdlib-package] Well, as far as I understand it, Gleam's stdlib is actually just another package anyway.
.. [#netzpevnik-gleam] I will probably use some kind of framework eventually as a part of `netzpevnik <https://gitea.ledoian.cz/LEdoian/netzpevnik>`__, but I am exploring the technologies that will be involved, so I want to keep stuff simple.

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>
@ -64,7 +67,8 @@
<main>
<div>
<h1>Archive</h1>
<ul> <li><a href="./hello-im-agen.html">Hello, I'm agender</a>
<ul> <li><a href="./using-gleam-in-html-low-js.html">Using Gleam in HTML with as little JavaScript knowledge as possible</a>
<li><a href="./hello-im-agen.html">Hello, I'm agender</a>
<li><a href="./masquerade-with-filter.html">Only NAT packets you can deliver responses for</a>
<li><a href="./custom-xkb-tweaks.html">Creating own XKB tweaks</a>
<li><a href="./do-not-gossip-identities.html">You sure you want to hear the gossip?</a>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -1,5 +1,88 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"><title>LEdoian's Blog</title><link href="https://blog.ledoian.cz/" rel="alternate"></link><link href="https://blog.ledoian.cz/feeds/all.atom.xml" rel="self"></link><id>https://blog.ledoian.cz/</id><updated>2024-05-21T17:03:00+02:00</updated><entry><title>Hello, I'm agender</title><link href="https://blog.ledoian.cz/hello-im-agen.html" rel="alternate"></link><published>2024-05-21T17:03:00+02:00</published><updated>2024-05-21T17:03:00+02:00</updated><author><name>LEdoian</name></author><id>tag:blog.ledoian.cz,2024-05-21:/hello-im-agen.html</id><summary type="html">&lt;p&gt;Hell yeah, a coming out!&lt;/p&gt;
<feed xmlns="http://www.w3.org/2005/Atom"><title>LEdoian's Blog</title><link href="https://blog.ledoian.cz/" rel="alternate"></link><link href="https://blog.ledoian.cz/feeds/all.atom.xml" rel="self"></link><id>https://blog.ledoian.cz/</id><updated>2024-09-09T16:28:00+02:00</updated><entry><title>Using Gleam in HTML with as little JavaScript knowledge as possible</title><link href="https://blog.ledoian.cz/using-gleam-in-html-low-js.html" rel="alternate"></link><published>2024-09-09T16:28:00+02:00</published><updated>2024-09-09T16:28:00+02:00</updated><author><name>LEdoian</name></author><id>tag:blog.ledoian.cz,2024-09-09:/using-gleam-in-html-low-js.html</id><summary type="html">&lt;p&gt;I've been looking at the &lt;a class="reference external" href="https://gleam.run"&gt;Gleam language&lt;/a&gt; recently. Among other features, it can be compiled to JavaScript, and thus presumably used on web frontend. I wanted to try that. This is a short tutorial on how to do that with little idea how JavaScript is supposed to work.&lt;/p&gt;
&lt;p&gt;My initial …&lt;/p&gt;</summary><content type="html">&lt;p&gt;I've been looking at the &lt;a class="reference external" href="https://gleam.run"&gt;Gleam language&lt;/a&gt; recently. Among other features, it can be compiled to JavaScript, and thus presumably used on web frontend. I wanted to try that. This is a short tutorial on how to do that with little idea how JavaScript is supposed to work.&lt;/p&gt;
&lt;p&gt;My initial JS knowledge: &lt;tt class="docutils literal"&gt;alert(3)&lt;/tt&gt;, &lt;tt class="docutils literal"&gt;onclick&lt;/tt&gt; and some basic selectors, i.e. the little stuff that is useful to add minor interactivity to HTML pages and implement trivial ViolentMonkey scripts. Namely: I have no knowledge about modules and whatnot, and this post is just a result of my trial-and-error attempt at embedding my Gleam. I succeeded, but still have no idea what I am doing :-)&lt;/p&gt;
&lt;div class="section" id="my-code"&gt;
&lt;h2&gt;My code&lt;/h2&gt;
&lt;p&gt;Let's start with some trivial code, in &lt;tt class="docutils literal"&gt;src/lol.gleam&lt;/tt&gt; (in a project initialised with &lt;tt class="docutils literal"&gt;gleam new lol&lt;/tt&gt; and the &lt;tt class="docutils literal"&gt;repeatedly&lt;/tt&gt; package added with &lt;tt class="docutils literal"&gt;gleam add repeatedly&lt;/tt&gt;):&lt;/p&gt;
&lt;pre class="literal-block"&gt;
import gleam/io
import repeatedly
pub fn say_hello() {
repeatedly.call(2000, Nil, fn(_state, _call) {io.println(get_greeting())})
}
pub fn get_greeting() {
&amp;quot;Hello World!&amp;quot;
}
pub fn main() {
io.println(&amp;quot;3, 2, 1, go!&amp;quot;)
}
&lt;/pre&gt;
&lt;p&gt;This snippet has many of the basic stuff I might need in future: it does some io, it uses another package &lt;a class="footnote-reference" href="#stdlib-package" id="footnote-reference-1"&gt;[1]&lt;/a&gt;, it returns data I will want to show. At first I am mostly interested in multiplatform stuff (i.e. running also on the BEAM backend), so I don't want to use any DOM frameworks at first, though I will mention some of the ways later in the post.&lt;/p&gt;
&lt;p&gt;So, build this for JavaScript: &lt;tt class="docutils literal"&gt;gleam build &lt;span class="pre"&gt;--target&lt;/span&gt; javascript&lt;/tt&gt;, and &lt;em&gt;stuff happens&lt;/em&gt;. It is not very clear what to do now, but &lt;tt class="docutils literal"&gt;&lt;span class="pre"&gt;grep``ping&lt;/span&gt; through the ``build/&lt;/tt&gt; directory shows that the built code lives in &lt;tt class="docutils literal"&gt;build/dev/javascript/lol/lol.mjs&lt;/tt&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="section" id="embedding-the-code"&gt;
&lt;h2&gt;Embedding the code&lt;/h2&gt;
&lt;p&gt;Here comes the fun part: the code is in JavaScript &lt;em&gt;module&lt;/em&gt;, not plain code. That comes with several surprises:
- It can only be imported from other modules, not by “plain” code in global scope
- Due to CORS, imports only work with network schemes, not with the &lt;tt class="docutils literal"&gt;&lt;span class="pre"&gt;file://&lt;/span&gt;&lt;/tt&gt; one
- Due to scoping, I have not found a way of using the functions from devtools console&lt;/p&gt;
&lt;p&gt;Big wins for the platform /s, but we have to live with that, so let's try to write the respective HTML for this. I put that in &lt;tt class="docutils literal"&gt;main.html&lt;/tt&gt; in the project root, but it does not probably matter. The code:&lt;/p&gt;
&lt;pre class="literal-block"&gt;
&amp;lt;!doctype html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;meta charset=utf-8&amp;gt; &amp;lt;!-- firefox complains otherwise --&amp;gt;
&amp;lt;title&amp;gt;Buh&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;!-- some random elements to work with --&amp;gt;
&amp;lt;button id=butt&amp;gt;Klik mee&amp;lt;/button&amp;gt;
&amp;lt;p id=uwu&amp;gt;
&amp;lt;!-- the “binding” to our Gleam code. This probably needs to be at the end of the page, since it needs to be able to use the selectors. --&amp;gt;
&amp;lt;script type=module&amp;gt; //It has to be a module to allow imports
import * as lol from &amp;quot;./build/dev/javascript/lol/lol.mjs&amp;quot;;
// Set the text of one element to the computed stuff:
let par = document.getElementById('uwu');
par.innerText = lol.get_greeting();
// Let's have an interactive button (I love the come-from pattern, but using `onclick` would be even trickier…)
let butt = document.getElementById('butt');
butt.addEventListener('click', lol.say_hello);
// Apparently, the `main` function does not get run automatically, so call that explicitly.
lol.main();
&amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/pre&gt;
&lt;p&gt;Shoutout to &lt;a class="reference external" href="https://stackoverflow.com/questions/53630310/use-functions-defined-in-es6-module-directly-in-html"&gt;the person who asked the same question on StackOverflow&lt;/a&gt;. From this point on, we only need a HTTP server; luckily, Python has one in stdlib, so just calling &lt;tt class="docutils literal"&gt;python3 &lt;span class="pre"&gt;-m&lt;/span&gt; http.server 12312&lt;/tt&gt; in the project root lets us load &lt;tt class="docutils literal"&gt;&lt;span class="pre"&gt;http://localhost:12312/main.html&lt;/span&gt;&lt;/tt&gt; and see our page.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="section" id="next-steps-alternatives-et-cetera"&gt;
&lt;h2&gt;Next steps, alternatives et cetera&lt;/h2&gt;
&lt;p&gt;When developing web frontend in Gleam, the more common way is using a framework like &lt;a class="reference external" href="https://hexdocs.pm/lustre/index.html"&gt;Lustre&lt;/a&gt; or at least a DOM library (there are &lt;a class="reference external" href="https://packages.gleam.run/?search=dom"&gt;several&lt;/a&gt;, I have no idea how mature those are). I did not go this route yet, because I am more interested in using backend-agnostic Gleam code from JavaScript and don't mind writing the trivial bindings in JavaScript. &lt;a class="footnote-reference" href="#netzpevnik-gleam" id="footnote-reference-2"&gt;[2]&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Also, a common thing to do is using a minifier+bundler like &lt;a class="reference external" href="https://hexdocs.pm/esgleam/index.html"&gt;esgleam&lt;/a&gt; (it uses &lt;a class="reference external" href="https://esbuild.github.io/"&gt;esbuild&lt;/a&gt; under the hood), so that the whole project is in one file. I don't think I need that now (having the JS be readable is more important to me atm and I don't want to complicate things further), but there is at least &lt;a class="reference external" href="https://erikarow.land/notes/esgleam-embed"&gt;one tutorial&lt;/a&gt; on how to do that.&lt;/p&gt;
&lt;p&gt;Also, during writing of this article I realised Gleam can run all the JS code from itself, so I could have a &lt;tt class="docutils literal"&gt;js_main&lt;/tt&gt; function that would bind the HTML from Gleam itself. But this is probably more readable and separated anyway.&lt;/p&gt;
&lt;hr class="docutils" /&gt;
&lt;table class="docutils footnote" frame="void" id="stdlib-package" rules="none"&gt;
&lt;colgroup&gt;&lt;col class="label" /&gt;&lt;col /&gt;&lt;/colgroup&gt;
&lt;tbody valign="top"&gt;
&lt;tr&gt;&lt;td class="label"&gt;&lt;a class="fn-backref" href="#footnote-reference-1"&gt;[1]&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Well, as far as I understand it, Gleam's stdlib is actually just another package anyway.&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;table class="docutils footnote" frame="void" id="netzpevnik-gleam" rules="none"&gt;
&lt;colgroup&gt;&lt;col class="label" /&gt;&lt;col /&gt;&lt;/colgroup&gt;
&lt;tbody valign="top"&gt;
&lt;tr&gt;&lt;td class="label"&gt;&lt;a class="fn-backref" href="#footnote-reference-2"&gt;[2]&lt;/a&gt;&lt;/td&gt;&lt;td&gt;I will probably use some kind of framework eventually as a part of &lt;a class="reference external" href="https://gitea.ledoian.cz/LEdoian/netzpevnik"&gt;netzpevnik&lt;/a&gt;, but I am exploring the technologies that will be involved, so I want to keep stuff simple.&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
</content><category term="programming"></category><category term="gleam"></category><category term="software"></category><category term="web"></category></entry><entry><title>Hello, I'm agender</title><link href="https://blog.ledoian.cz/hello-im-agen.html" rel="alternate"></link><published>2024-05-21T17:03:00+02:00</published><updated>2024-05-21T17:03:00+02:00</updated><author><name>LEdoian</name></author><id>tag:blog.ledoian.cz,2024-05-21:/hello-im-agen.html</id><summary type="html">&lt;p&gt;Hell yeah, a coming out!&lt;/p&gt;
&lt;p&gt;Important: Please, read this article &lt;em&gt;in full&lt;/em&gt; and do not just skim it. There
is no TL;DR, I don't think any reasonable summary of this post can be made
without me misrepresenting myself. Alternatively, please just skip this article

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>
@ -64,7 +67,8 @@
<main>
<div>
<h1>Articles tagged with software</h1>
<ul> <li><a href="../custom-xkb-tweaks.html">Creating own XKB tweaks</a>
<ul> <li><a href="../using-gleam-in-html-low-js.html">Using Gleam in HTML with as little JavaScript knowledge as possible</a>
<li><a href="../custom-xkb-tweaks.html">Creating own XKB tweaks</a>
<li><a href="../cbz-to-pdf.html">How to convert CBZ to PDF</a>
</ul>
</div>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="../category/networking.html">networking</a></li>
<li><a href="../category/programming.html">programming</a></li>
<li><a href="../category/queer.html">queer</a></li>
<li><a href="../category/talks.html">talks</a></li>
<li><a href="../category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="../tag/gleam.html">gleam</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/web.html">web</a></li>
<li><a href="../tag/gender.html">gender</a></li>
<li><a href="../tag/identity.html">identity</a></li>
<li><a href="../tag/linux.html">linux</a></li>
<li><a href="../tag/lifehack.html">lifehack</a></li>
<li><a href="../tag/software.html">software</a></li>
<li><a href="../tag/relationships.html">relationships</a></li>
<li><a href="../tag/print.html">print</a></li>
<li><a href="../tag/comics.html">comics</a></li>

@ -28,6 +28,7 @@
<h2>Categories</h2>
<ul>
<li><a href="./category/networking.html">networking</a></li>
<li><a href="./category/programming.html">programming</a></li>
<li><a href="./category/queer.html">queer</a></li>
<li><a href="./category/talks.html">talks</a></li>
<li><a href="./category/technology.html">technology</a></li>
@ -36,11 +37,13 @@
<h2>Tags</h2>
<ul>
<li><a href="./tag/gleam.html">gleam</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/web.html">web</a></li>
<li><a href="./tag/gender.html">gender</a></li>
<li><a href="./tag/identity.html">identity</a></li>
<li><a href="./tag/linux.html">linux</a></li>
<li><a href="./tag/lifehack.html">lifehack</a></li>
<li><a href="./tag/software.html">software</a></li>
<li><a href="./tag/relationships.html">relationships</a></li>
<li><a href="./tag/print.html">print</a></li>
<li><a href="./tag/comics.html">comics</a></li>

Loading…
Cancel
Save