Deniz Akşimşek

Psatina: a new tiny JS framework

2026-04-16T19:06:38Z

While I was building FemtoCRM, I needed a dynamic form for entering sale line items. I could build some basic JS to add and remove rows from a table, but each row’s inputs needed to have the row index in its name (i.e. line_items[2].quantity) which seemed like a pain to manage^[1].

I reached for one of those “reactive” frameworks where you define a template and it updates itself in response to data changes. The obvious choice was Alpine.js, so that I could keep the sale form in the HTML template. I don’t like having separate JS files for extremely page-specific stuff.

Great, man. Love that for you.

Well, it’s not just that they slopped my blorbo. I’d been trying to build a JS framework for years. But so far, my efforts consisted of building a collection of tiny libraries and hoping a framework would arise out of that somehow.

Well, it didn’t, and it turns out separate tiny libraries get bigger when you put them together. Over the last week or two, built Psatina, a framework inspired by Vue and Alpine in 1.6 KiB (.min.br).

<template p:data="{ count: 1 }">
  <output>[| count |]</output>
  <button type="button" p:on:click="update(() => count++)">Increase</button>
</template>

Psatina sacrifices a lot to get its small size, mostly in performance – I haven’t tried building a DBMonster with it. I consider it the 20% of Alpine I need for 80% of usecases^[2]. I’m thinking about reviving my htmx clone whet to pair with it.

OK, it probably wouldn’t be that hard. But as mentioned, I like my JS components to be general-purpose. For this kind of use case, the generally-applicable tool is a reactive framework. ↩︎
Not actual numbers. ↩︎

Pin files & folders to your app grid on GNOME

2026-04-16T16:00:07Z

This script generates a desktop entry that opens a folder, with the same icon and all.

#!/usr/bin/env python3

import sys, textwrap
from pathlib import Path

import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gio, GLib, Gtk

def get_icon_name(path: Path):
    """Get the icon associated with a file."""
    file = Gio.File.new_for_path(path.as_posix())
    info = file.query_info('standard::icon', 0, Gio.Cancellable())
    return info.get_icon().get_names()[0]

def install_desktop_file(path: Path):
    """Generate and install desktop entry for a file or folder."""
    content = textwrap.dedent(f'''
      [Desktop Entry]
      Type=Application
      Version=1.0
      Name={path.name}
      Exec=xdg-open {path}
      Icon={get_icon_name(path)}
    ''')
    print(content)

    destpath = Path(GLib.get_user_data_dir()) / 'applications' / (path.stem + '.desktop')
    destpath.write_text(content)

if __name__ == '__main__':
    install_desktop_file(Path(sys.argv[1]))

Generative AI is not trained on "data"

2026-01-23T16:37:42Z

data

factual information (such as measurements or statistics) used as a basis for reasoning, discussion, or calculation

— Merriam Webster, “data”

Is a poem factual information?

Do not go gentle into that good night,
Old age should burn and rave at close of day;
Rage, rage against the dying of the light.

— Dylan Thomas, Do Not Go Gentle into That Good Night. TODO: replace with a more topical poem.

Doesn’t look like it. But what about this?

The first verse of “Do Not Go Gentle into That Good Night” by Dylan Thomas goes like this: “Do not go gentle into that good night, / Old age should burn and rave at close of day; / Rage, rage against the dying of the light.”

Oh dear, that’s looking pretty factual to me! See how the magical transformation is completed:

information in digital form that can be transmitted or processed

— M-W

Behold, a .txt file:

Dylan Thomas, "Do Not Go Gentle into That Good Night"
0000	D
0001	o
0002
0003	n
0004	o
0005	t
0006
0007	g
0008	o
...

Aha! Merely by saving it in a file, I have transformed Do Not Go Gentle… from poetry to data! It’s presented as a table, it must be so.

And there’s more! The advent of the multimedia computer means I can perform the same trick on paintings, songs, speeches, movies and anything else your heart desires!

Maybe we shouldn’t treat everything that can be saved on a computer like soil density

Even though an amateur rhetorician (that’s a portmanteau of “rhetoric” and “magician”, I’m still working on it) like me can trivially transmute works into data, the two have very different moral frameworks.

Depending on where you live and what your ideology is, data is either unownable, or owned by the person who collects it. Even if it’s unownable, you can still charge for the service of collecting it, you just can’t stop others from doing the same. Either way, the producer of data has no rights over it^[1] — you don’t pay the wind to measure its speed.

But with creative works, the producer has all the rights. Copyright, for one, but even if you don’t believe in that, most people still think plagiarism is bad, and artists should be able to sell their art as long as money exists.

These are sensible if you assume that data is produced involuntarily, mostly by inanimate beings, and collecting it takes effort, while works are the result of intentional human labor, and are easy to “collect” since most creatives want their works seen.

They’re also sensible if you assume that data is collected by researchers to advance science or provide reference material, and works are collected by publishers to sell for entertainment and edification.

So, when a research non-profit uses well-established resources like Common Crawl to advance the field of artificial intelligence, nobody bats an eye. But when that firm pivots to selling its research artifact as a product, it becomes the political issue of the decade.

Wait… aren’t AI models data too?

The spirit known as OpenAI and its thralls have turned all web-published works into data by saving them into a database and doing research to them (this is the same spell we just performed earlier),

But these powerful entities, through rituals like word vectorization, reinforcement learning with human feedback, and bribing politicians, are now trying to transmute the database into an ownable, sellable work without turning the data inside back into works as well.

They will, of course, be granted challenges to business models—as new technologies always are—especially for those who make their money off of gating up and charging access to data. But such practices simply aren’t tenable in the long term, legally or practically (let alone morally). Under US law, facts aren’t copyrightable (thanks to the landmark Supreme Court decision in Feist v. Rural Telephone Service) and databases are just collections of facts.

— Aaron Swartz, A Programmable Web

(Another “data is factual information”, nice! Maybe I’ll take all the works that say this and put them in a CSV so they’re data.)

I like that facts aren’t copyrightable.^[2] But “gating up and charging access to” something is sadly the only reliable way to make money off of it. And now that all digital works have been turned into data, creatives are losing their ability to do exactly that.

The ~~megacorps~~ spirits continue to make money, because they can perform the bribery rituals.

I cannot. So, instead, I’m trying to cast a counterspell upon the initial data-fication spell.

Training materials

I’m dropping the magic shtick now.

This post is not an appeal for you to stop saying “training data”. After years of wrestling with “free as in beer”, I remain unconvinced using a different word to describe the same thing makes people want to hear you out.

But the data-works distinction exists, and it’s a distinction between concepts not words. (I don’t think “works” is the best word for it anyway, anyone have a better one?) When you’re building software, everything is “data”,^[3] but we need to step back at some point and realize that this is only an illusory state that works must inhabit to fit inside the computer — they get turned into data temporarily, after the moment of creation, until being restored at the point of retrieval. For anyone who doesn’t live in the computer, a poem is not data.

So, I will be calling the inputs to an AI training process “training materials”, unless they are truly data. You can do it too. It can be our thing. It won’t make the general public interested, nobody will be begging us to explain one more time that you can pay for free software, but at least we’ll know when we’ve chanced upon one another at the slop trough.

Unless that producer is a human in a country with privacy regulations like the GDPR, but even then, the “data subject” in GDPR terminology is not a “data owner”. ↩︎
I wish they weren’t tradable either — it is absurd that information about me that I give to a business so they can provide services is an asset that can be valuated and sold. How did this ever become normal? ↩︎
or “content”, as in the information-free phrase “Content Management System”. Hey, why are we still building Thing Doers? Hasn’t anyone designed a flexible enough Thing Doer that can Do any Thing? ↩︎

how I run Tailscale on an immutable Linux system

2025-11-23T20:05:53Z

GNOME OS, to be specific. There is no package manager here, and I don’t understand how to build sysexts, so this is my solution.

You can install Tailscale without touching any files outside your home directory. This is how I did it, and it’s been serving me well for a few months.

(Instructions for systemd.)

Create systemd unit

We’re going to run tailscaled as a user service, so create a file called tailscaled.service in ~/.config/systemd/user/ with the following contents:

[Unit]
Description=Tailscale node agent -- modified to run as user service
Documentation=https://tailscale.com/kb/
After=network-online.target
Wants=network-online.target

[Service]
Type=notify
Restart=on-failure

# TODO: don't hardcode .local/bin, use $XDG_BIN_HOME
# problem: that's not set on most systems, and systemd env var expansion
# doesn't support default values
ExecStart=%h/.local/bin/tailscaled \
  --state=${STATE_DIRECTORY}/tailscaled.state \
  --socket=${RUNTIME_DIRECTORY}/tailscaled.sock \
  --tun=userspace-networking \
  --port=41641
ExecStopPost=%h/.local/bin/tailscaled --cleanup

RuntimeDirectory=tailscale
RuntimeDirectoryMode=0755
StateDirectory=tailscale
StateDirectoryMode=0700
CacheDirectory=tailscale
CacheDirectoryMode=0750

[Install]
WantedBy=default.target

I wrote this based on the unit file Tailscale ships combined with some other unit files I saw online.

Install Tailscale binaries

Go to https://pkgs.tailscale.com/stable/#static to download the latest static binary builds of Tailscale. Extract and place the tailscale and tailscaled files in ~/.local/bin/.

I wrote a script I use that does this, and starts up the service (needs systemd unit file to be created first):

#!/usr/bin/env bash
set -Eeuo pipefail

tmp=$(mktemp -d)

tarball=$(curl -sL https://pkgs.tailscale.com/stable/?mode=json | jq -r .Tarballs.amd64)

echo "Downloading Tailscale into $tmp"
curl "https://pkgs.tailscale.com/stable/$tarball" | tar -xzC "$tmp"

systemctl --user stop tailscaled.service

tsdir=$(find "$tmp" -name 'tailscale_*' -type d | head -n1)
cp "$tsdir"/{tailscale,tailscaled} ~/.local/bin/

systemctl --user enable tailscaled.service
systemctl --user start  tailscaled.service

A web developer's feed reader

2025-07-29T08:26:40Z

Introducing the <zoop> element — Chrozilla Dev Blog
How to magically improve every aspect of your website using <zoop> — Warm Color Site
Is <zoop> the next big thing in web development? — XSLT-Tricks
How to integrate <zoop> with Nẅxt.js — Vorcel
<zoop> still not supported in iOS Safari — May I Use
doop.js: a <zoop> polyfill — GitCub
New <zoop> element causes some screen readers to shout slurs at user — Aeleveny Review

Retrofuture: a blackletter-inspired pixel font

2025-07-14T19:45:05Z

IN CASE OF CONFLICT, consider users over authors over implementors over specifiers over theoretical purity.

Retrofuture sample. Quote: W3C, HTML Design Principles § 3.2 Priority of Constituencies

Download Retrofuture

Another pixel font I made. This was supposed to be a vector font. The idea was to interpret blackletter forms with no stroke variation and a limited number of angles. Sadly, I still can’t make vector fonts.

Retrofuture replaces the wonderful Jacquarda Bastarda on my website.

Hypersystem: a pixel display font for Hypermedia Systems

2025-05-22T21:40:57Z

Hypertexts: new forms of writing, appearing on computer screens, that will branch or perform at the reader’s command. A hypertext is a non-sequential piece of writing; only the computer display makes it practical.

Download Hypersystem

Hypersystem is a new font I designed for the web version of Hypermedia Systems.

Recently, I reworked the web page of our book Hypermedia Systems (https://hypermedia.systems). I was happy with the layout, but unhappy with how the book title looked. It was set in Jaro, a great free display font we also used for the print release, but I didn’t think it worked to communicate the tone of our book on the home page.

After trying out a few alternatives, Carson suggested that I adapt the lettering from the cover of the paperback edition. The pixel artist we hired did an absolutely fantastic job, but we decided to roll our own for the lettering.

My early attempts at Hypermedia Systems cover lettering.

After trying to make off-the-shelf fonts work for a while, we eventually asked the artist for the original PSD and I lettered in a custom title. Making it go behind the car was Carson’s idea.

The published cover.

The initial plan was to make an unslanted version of the lettering and put it on the landing page as an image, but I’d recently heard about Panic’s Caps font design tool for the Playdate console, so I decided to give a making a whole font a go.

Caps is great, but it can only save fonts in a Playdate-specific format — a fact I realized far too late. After much searching, I found Bits’n’Picas, a bitmap font tool that could both import the Playdate format and export to .ttf.

The font is live on https://hypermedia.systems, both on the landing page and in the content for chapter and section headings.

Right now, Hypersystem supports ASCII, rudimentary Turkish, and a few extra punctuation characters.

Download Hypersystem

A versioning scheme for end-user software

2025-01-17T10:42:50Z

The title is wrong. It should be more like "versioning scheme for software that suffers from the spacebar heating problem, i.e. software for which a “breaking change” cannot reasonably be distinguished from a non-breaking one.

Background (feel free to skip)

I was planning on publishing the first ever alpha release of Denizen. I typed git tag into my terminal and paused.

I get these long pauses a lot. It usually happens when I’m starting a new project and want a good name, always a challenge having already used up Denizen.

I was going to type v0.0.0 and push. Then I thought, “hm, should it be 0.0.0 or 0.0.1?” Then I asked myself the real question, “how and why am I planning to use semver for a project with no public API beyond its user interface?” Denizen does interact with nonhuman systems via APIs, but these are things like Webmentions that are governed by external standards – and besides, the target sites who these APIs target can’t choose which version of Denizen is contacting them, so a semantic version is no use.

I started looking around online for alternative versioning systems. My conclusion was that SemVer was the worst system, except for all the others.

I was thinking of using a single increasing version number, but it didn’t sit right with me. This post came from my attempt to figure out why.

Concepts

A software package under CoolVer has three kinds of published version: release, pre-release and hotfix.

Releases add, remove or alter features. They may or may not break your workflow based on your use case, environment, personality and vibes.
Hotfixes fix bugs in previous regular releases (and do nothing else). The existence of a hotfix declares that the preceding version is broken and this one should be used instead. Hotfixes “shouldn’t” break your workflow, if they do, it’s because they had to.
Prereleases are unstable testing releases in preparation for a regular release. Each prerelease may fix bugs or add/remove/alter features.

Scheme

REGULAR.HOTFIX[-PRERELEASE]

where REGULAR = VANITY.RELEASE

and PRERELEASE = CHANNEL.NUMBER

The CoolVer versioning scheme.

REGULAR is the regular-release identifier, either of this release (if it is a regular release) or the associated release (if it is a hotfix or prerelease).

VANITY is exactly what it sounds like. Increment it when you’ve made changes you’re excited about, or you want other people to be excited about. Incrementing VANITY resets RELEASE, which otherwise increments with each regular release.

HOTFIX is the hotfix identifier. If the release is not a hotfix, it is 0. Otherwise, it is a number that monotonically increases across the whole release history. If a hotfix H to a release R has been backported to an older release B, the hotfix ID can be reused: V.B.H is the backporting of V.R.H to V.B.0.

PRERELEASE is for prereleases – it consists of a CHANNEL like “alpha”, “beta” or “rc”, and a numerical identifier.

METADATA is build metadata as defined in SemVer.

Example

Version	Description
`0.0.0-alpha.0`	starting a new project
`0.0.0-alpha.1`	still working on it
`0.0.0-beta.0`	anyone want to try it out?
`0.1.0`	it’s stable
`1.0.0-rc.1`	i think i’m ready to start promoting this, let me know if you spot any bugs
`1.0.0`	hey everyone look at my production-ready, blazing-fast, webscale project!
`1.0.1`	oops, i broke the build
`1.1.0`	added frobinator
`1.1.2`	the frobinator had a bug
`1.2.0-rc.1`	sneak preview of barbinator
`1.2.0`	add barbinator
`1.2.3`	another frobinator bug we didn’t catch until now
`1.1.3`	backport the frobinator fix for the people who hate the barbinator

Rationale

CoolVer is syntactically compatible with SemVer and matches its sorting order. This means it can be used with most tools that expect SemVer.

Using the SemVer patch field for hotfixes, but tags for prereleases ensures that releases are sorted sensibly, and is arguably more SemVer than the -hotfix.1 convention many projects use.

How do I internationalize my CMS?

2025-01-16T11:02:39Z

Background

Denizen is a CMS for personal websites. I want to work on multi-language support – people should be able to make websites and posts in any language they want. (My own blog is in English, Turkish, and Toki Pona – so this is a blocker for eating my dog food).

Every aspect of this feels like something other people must have already solved, so I wanted to publicly ask if anyone has the secret right answers.

Language picker

Requirements: Users should be able to set their site to “any language”. I know that’s impossible to define, of course. I’m happy to settle for “every language with an ISO-639 code” including conlangs like Toki Pona (tok), which I want for my own site. However, I can’t find a good list anywhere. Wikipedia has one that only lists two-letter codes, and another that’s split across 26 pages with quite a bit of missing data. Ideally, I could just download a big JSON file of every assigned code, with each language’s native and English names, as well as labels for the macrolanguages and non-language codes like ‘zxx’.

Fallback

In addition to marking up the website and the posts in it, the language setting would be used for Denizen’s UI including phrases in the public blog like “reply to” or “last updated”. Since Denizen can’t possibly be translated to every ISO-639 language, it needs a fallback mechanism.

There’s three tiers of sophistication for language matching, all of which I’d ideally like to support:

Simple BCP 47 matching, e.g. en-US to en.
Sister language matching, e.g. Dutch nl and Afrikaans af, or Turkish tr and Azerbaijani az.
Unrelated language matching. I could swear I saw Wikipedia using Turkish as a fallback for Laz lzz, but I can’t reproduce it. Nevertheless, it would be a desirable feature. For context, Laz and Turkish are not related linguistically (beyond loanwords), but most Laz speakers are bilingual in Turkish.

Here, CLDR seems to promise a fix, but I couldn’t figure out how.

Selecting language for individual posts

The big social medias use heuristics to detect language. It’s expensive and goes wrong sometimes.

Is there an alternative? If someone uses denizen to post mixed language articles (e.g. language learning material), will they annotate it all correctly? Can I somehow do it for them? Can I help them? Can I encourage them?

Fruit Credits: a personal accounting app based on hledger

2024-11-02T20:00:51Z

I recently published the first pre-release version of Fruit Credits on Flathub. (I then immediately published two more because the reviewer discovered a bug).

why: boring life stuff

After quitting my job and realizing it would be a while before I found a new one^[1], I realized I might need to be a bit more responsible with money. Naturally, I downloaded hledger.

I’d tried to use hledger before but couldn’t make a habit of it. I was concerned that my new attempt could be a procrastination mechanism, but to my surprise, it was actually massively helpful. Even after one month, I felt more in control of my life than ever before, and it’s kept me in the black since.

It was hard for me at first to see the value of keeping your own books when banks already record and present a history of transactions. Right now, the benefits I experience are:

Everything is in one place. Most people keep multiple accounts at multiple banks. Banks are somehow all shit at application engineering, or even just providing usable data export. Before picking up hledger, I straight-up had no idea how much money I had.
The data is queryable. I’m talking super basic stuff – I’ve not even scratched the surface of what one can do with plain text accounting, yet it’s still massively valuable to ask the computer “how much did I spend on A since B?”
The usual reasons. It’s free software operating on free file formats. I can see my account balances without popups offering me loans I can’t pay back.

I started by typing transactions in the ledger format directly in a text editor. Then, I started using hledger add, which has autocompletion capabilities. Unfortunately, both of these were too clunky for me – maybe it takes getting used to, but I kept making typos in hledger add and fumbling as I tried to undo them.

I imagined a GUI for adding transactions quickly that wouldn’t require me to enter things in order. This vision would eventually feature-creep itself into a GUI version of hledger.

how: exciting computer stuff

I’d heard Tauri was Electron but good, which was an attractive proposition to a web developer. It took me about a week to give up – it turns out making a web app look good as a desktop app is harder than Discord makes it look.

Being a GNOME user, I was inspired by the many GNOME Circle apps to build something with GTK4 and libadwaita. I fired up GNOME Builder and spent about 2 days paralyzed by the language selector. After looking at code examples online, I decided Vala was the simplest option.

I used GNOME Builder to scaffold the app, and used it to develop for a while. Eventually, I figured out how to build the app without it, and went back to Zed.

It took me a while to get everything configured – for example, the default Builder template has a directory for translations with gettext, but there’s extra setup required to actually build and use them.

However, between the build headaches, the programming inner loop was quite enjoyable, especially with the new-ish Blueprint UI language.

vala is pretty cool, imo

It seems that Rust is the recommendation for new GTK apps. Unfortunately, I never got into Rust, and I don’t think adding the GObject memory management model into the mix would make it grow on me.

For the uninitiated, GObject is a subsystem that was originally part of GTK that provides object-oriented programming and reference-counted memory management features in C. Though GObject has some fun features like signals, there’s little fun to be had in writing classes in C – even with all the macro magic provided, class definitions are full of boilerplate code. In addition, the reference counting mechanism requires you to g_object_ref () and unref your objects manually.

One feature of GObject is the ability to generate bindings to other languages, including ones with actual OOP features, which allows GTK apps to be implemented in a variety of languages. However, these bindings often suffer from various impedance mismatches between GObject and the languages’ own object models.

Vala, however, is implemented with GObject in mind from the start. It has built-in syntax for features (like signals)

Though I’ve fallen in love with Vala, I can see why other people might not enjoy it. It has unfixed compiler bugs, and a standard library that was written for C. Most frustratingly though, refcounting is not as ergonomic as full tracing garbage collection, and when using C libraries (including GObject based ones!) that expect you to be comfortable with creative usage of memory, you can run into hard-to-debug segfaults.

The de facto debugger for Vala is gdb, and it has no Vala support. You have to debug through the generated C. I had no gdb experience. Thankfully, GLib has a built in logging framework that makes printf-style debugging quite comfortable.

What draws me to Vala is the feeling of consideration that it exudes from every orifice. I would constantly discover that whatever I was trying to do, the Vala designers knew I’d need to do it, and had implemented a feature to make it easier.

flatpacking haskell

A GTK app written in Vala and compiled with Meson is the happiest of happy paths for Flatpak. Unfortunately, hledger, which Fruit Credits necessarily depends on, is written in Haskell.

Flathub requires not only that everything is built from source, but also that all necessary sources can be downloaded before the build process (which is sandboxed). This is antithetical to the model used by Haskell (and npm, and cargo, and many others) where a build tool downloads dependencies and discovers transitive dependencies at the same time.

After a few days of digging through outdated resources, I understood that a tool called cabal-flatpak was the best way to generate Flatpak manifests that fetch and compile Haskell libraries in the right order. Unfortunately, despite seemingly being under active maintenance, the tool had bugs, and no discernible way to report them. Since I don’t know Haskell, I couldn’t maintain a fork, so I wrote some jq and shell to work around the bugs.

Upon submitting my app to Flathub, I found out I was something of a pioneer:

bbhtt: why are these needed and why do you need to do this manually?

dz4k: The haskell modules in the manifest are based on the output of cabal-flatpak and the article How to Flatpak a Haskell App into Flathub. Are there more up-to-date resources for bundling Haskell programs?

bbhtt: No, we don’t have haskell apps. This is probably the second or third one ever.

– Add com.dz4k.FruitCredits by dz4k · Pull Request #5731 · flathub/flathub

fun.

what: thermonuclear war stuff

Though Fruit Credits is pretty barebones compared to what hledger can do, it’s crossed from “dogfooding” to actually usable software for my use cases. Queries and transaction input work well.

I’m currently working on a setup interface to create a new ledger file from scratch, as well as making the app more beginner-friendly in general. I’d like to add some way of editing and deleting transactions, and some reporting features.

My usage of hledger is pretty limited in the grand scheme of things, so I won’t be able to cover every use case by myself. I’d love it if people gave Fruit Credits a try, even if just to tell me how it couldn’t read their journal file.

I’m fine – I live with my parents, have no dependents and still have some income via Hypermedia Systems. I would still very much like a job though, which is why I invested in highly demanded skills as Vala programming and Haskell Flatpak packaging. ↩︎

Building the new Hypermedia Systems

2024-06-25T15:54:17Z

Clickbait title: Can you write a bestselling book in Typst?

A shiny new edition of Hypermedia Systems is out! Apart from incorporating typo and grammar fixes sent in by readers, the book was completely redesigned inside with a new layout. To achieve a much higher fidelity of design, we ported the book to Typst — the hot new LaTeX replacement.

Why change what works?

The first print release of HS was written in AsciiDoc. It seemed like a natural choice at the time – after all, many publishing houses trust AsciiDoc for their books. We learned the hard way that those publishers also have teams of engineers developing proprietary toolchains to produce their books. Vanilla AsciiDoc doesn’t actually have a way to produce good print output:

asciidoctor-pdf uses a rudimentary PDF generation library, and the output is just about readable, but not good – and you don’t have any good tools to change that.
the venerable Pandoc can output AsciiDoc, but oddly can’t read it – so we can’t compile our book to LaTeX.

Your best option for producing a printable PDF, if you care at all about typesetting, is to compile to HTML, and print that to PDF. asciidoctor-web-pdf is a tool that wraps this workflow in a usable package, combined with Paged.js to polyfill the many features of CSS for print media that browsers don’t support. This is how we produced the first edition of HS, and it was a pain for multiple reasons.

Paged.js has bugs. One bug that was nasty to work around was one where using any CSS to modify the page numbers (say, resetting them after the front matter) would cause all the pages to revert to 0. I don’t know if this was fixed.
HTML with Paged.js is slow. The book has a little over 300 pages, and each page has a perceptible delay as it gets laid out. Even worse, I had to manually scroll the browser all the way to the bottom of the book before printing, or the back half of the book would be blank. Afterwards, printing would take what felt like a solid minute, though I never measured how long: Since presumably nobody at Firefox thought printing a page to PDF would be anything but instant, there’s no progress bar or any other indicator of success beyond the PDF appearing in the folder where it’s supposed to be.
The idiosyncrasies of this process meant that it only really worked on my machine, and I had to send PDFs back and forth with my co-authors and editor. The PDFs were absolutely massive and exceeded the Discord upload limit, so I uploaded each one to Google Drive.
Paged.js has more bugs – asides would refuse to break across pages while code blocks were all to eager to create widows and orphans – or disappear completely – which I had to work around in a whack-a-mole fashion. A few bugs seem to have made it into the final release.
How to set the background color of a table cell
AsciiDoc has facilities for indexing, but doesn’t support outputting them in HTML in any way. Worse, the mechanism I could have used to do it myself was deprecated and removed before the replacement was implemented. Our editor ended up creating an index by hand, which was appended to the PDF.
You go through all this effort only to be rewarded with very mediocre typesetting, since browsers use greedy algorithms for laying out text for performance reasons, yielding far worse line breaking compared to the dynamic programming algorithms of TeX.

Despite all this, we somehow produced a usable PDF. Most readers report being satisfied with the book’s design (Amazon’s failure to print a PDF consistently notwithstanding). The code that generated this PDF is not open source — initially, it was because we thought it might eat into print sales, but these days the real reason is that it might help someone else that tries to do this, and nobody should try to do this.

(If you have any “why didn’t you just” recommendations, feel free to post them in the comments on link aggregators — they might help someone else — but don’t send them directly to me. I assure you, I’ve evaluated all options available even if I didn’t mention them here.)

Speaking of link aggregators,

Typst

I first stumbled upon Typst when the author’s thesis was posted on the red site. Enthralled by its combination of quality typesetting, lightweight markup and an ergonomic scripting language tightly integrated, I knew that if I was ever part of another book project, I would use Typst.

I rewrote my CV in it, as well as some documentation for an old project. This only confirmed my initial impression — Typst is a joy to use, and the scripting language is so good I wish it was a programming language in its own right.

But I couldn’t use Typst for Hypermedia Systems, because Typst didn’t support HTML output. Imagine my excitement when a while ago, I realized Pandoc had added Typst support!

Porting the manuscript

As I mentioned before, Pandoc can’t read AsciiDoc. So how can I convert the 104537 words of HS into Typst? I was ready to do it by hand, but I decided to try something else first.

One of AsciiDoc’s primary output formats is DocBook XML. I don’t know what it is or who uses it, but Pandoc can read it! I converted the book to DocBook XML, and then to Typst. Except AsciiDoc was buggy and generated invalid XML, so I had to fix that first. And then massage the resulting Typst a bit more. And apply any future changes to the AsciiDoc source to the Typst version.

Still better than waiting for the PDF to render, though.

The code blocks

AsciiDoc has a unique style of code blocks where you can place markers in the code that refer to explanatory notes below the block – it looks like this:

AsciiDoc code block with callout

[source,python]
----
print("Hello, world!") <1>
----
<1> The canonical first program in any language.

If you’ve read Hypermedia Systems, now you know how we made those. Typst doesn’t have any such feature, so with the great help of the Typst Discord community, I reimplemented it in about 50 lines of slightly cursed Typst code.

code-callouts.typ: a Hypermedia Systems literate experience

Before implementing code callouts, define a label, which we will use to mark code blocks we have already annotated. This is to prevent an infinite loop that occurs when we use this function in a show rule.

#let processed-label = <TypstCodeCallout-was-processed>

The function code-with-callouts takes a code block and a function to render callouts. A simple default implementation returns the annotation number in square brackets in grayed-out sans-serif font.

#let code-with-callouts(
  it /*: content(raw) */,
  callout-display: default-callout /*: (str) => content */
) /*: content */ = { ... }

Begin by checking if the code block has already been processed.

) /*: content */ = {
  if it.at("label", default: none) == processed-label {
    it
  } else { ... }
}

The dance with it.at("label", default: none) is a way to access the code block’s label without throwing an error if it has none. If it doesn’t have this label, the real fun begins.

let (callouts, text: new-text) = parse-callouts(it.text)

parse-callouts is a function that extracts the callouts from the code block. We pass it the text of the code block – the plain, un-highlighted code as a string. It returns that text with the callout markers removed, and the callouts themselves in the form of an array of callout numbers for each line. This is in a way the meat of the whole operation, but it’s also pretty mundane string processing code, so I won’t dwell on it.

#let callout-pat = regex("<(\\d+)>(\\n|$)")

#let parse-callouts(
  code-text /*: str */
) /*: (callouts: array(array(int)), text: str) */ = {
  let callouts /*: array(array(int)) */ = ()
  let new-text = ""
  for text-line in code-text.split("\n") {
    let match = text-line.match(callout-pat)
    if match != none {
      callouts.push((int(match.captures.at(0)),))
      new-text += text-line.slice(0, match.start)
    } else {
      callouts.push(())
      new-text += text-line
    }
    new-text += "\n"
  }
  (callouts: callouts, text: new-text)
}

Now that we have the callouts, we can render them. We do this by abusing show rules. A raw.line (object representing a line of raw text) knows its line number, so we can use that to look up the callouts for that line. We then iterate over the callouts and render them with the provided callout-display function.

show raw.line: it => {
  it
  let callouts-of-line = callouts.at(it.number - 1, default: ())
  for callout in callouts-of-line {
    callout-display(callout)
  }
}

You might assume as I did that this would be the end of it and we could just return the code block, but there’s a catch. The code block still has the <1> markers in it, and we need to remove them. To do this, we create a new code block with the same attributes as the original, but with our new-text as the body. The fact that we create a brand new code block instead of returning the one we were given is what causes the infinite loop I mentioned earlier, so we apply the processed label.

let fields = it.fields()
let _ = fields.remove("text")
let _ = fields.remove("lines")
let _ = fields.remove("theme")
[#raw(..fields, new-text)#processed-label]

This is the code that powers the code blocks in the new edition of Hypermedia Systems. All you need to do is add a show raw.where(block: true): code-with-callouts to your Typst document, and you can have code blocks with callouts too!

The actual text of the callouts is just a list written below the code block. If I was implementing this from scratch, I might have had the code-with-callouts accept the content of the callouts as well and match them up to the code by text labels, but AsciiDoc uses numbers and makes you match them up manually, so I did too.

The index

Typst has no indexing functionality by default, but its scripting and introspection capabilities are powerful enough to implement indexing at the library level. In fact, an indexing library already exists in the form of in-dexter, which is small enough that I made a modified version of it to have full control over the index’s appearance and to add support for hierarchical terms.

The print book

So far, I’ve talked about the most technically interesting parts of the migration and not the most important part: the actual product. Using a capable typesetting system instead of Print to PDF meant I could tweak almost every aspect of the book’s design, and the software would actually cooperate.

The new Hypermedia Systems uses indented paragraphs instead of block paragraphs. That is, the first line of a paragraph is indented, and there’s no space between paragraphs. What’s so special about that? You can definitely do that in HTML and CSS, right? Not if you want to do it well. Traditional style and my own preference dictate that indentations separate paragraphs, so the first paragraph after a non-paragraph element (like a heading or a list) should not be indented. This is a common typographic convention, but to do it in CSS is impossible in the general case without dozens, maybe hundreds of selectors to handle every special case. In Typst, you just give paragraphs a first-line-indent, and they know when to use it.

It’s a similar story with emphasis. The <em> element in HTML is italicized by default, and similarly for emph in Typst. When emphasis is used in an element that’s already italicized, the emphasis is shown by reversing the italics and making the emphasized text upright. With CSS, you might restyle <em> in all those contexts (and remember to revert it as needed). Container style queries might make this easier in CSS. In Typst, it’s the default behavior.

Other than styling features, Typst is also just better at typesetting, using line breaking algorithms similar to TeX. Especially compared to browsers with their greedy algorithms and weirdly small hyphenation dictionaries, Typst prose is a joy both to look at and to read.

I want HTML and CSS to be as capable in print as they are on screens. Unfortunately, browsers don’t seem as interested – the CSS Paged Media module remains largely unimplemented. While I would love a future where the same HTML code can back both online and print books (and PDF is relegated to an archival format), building separate web and print books from a Typst manuscript seems to be the best strategy for now.

The web book

Typst can produce a wonderful PDF for us, but we also need to publish the book online. While HTML output is a planned feature for the Typst compiler, no implementation currently exists. This is why I didn’t propose Typst while we were producing the first edition, before Pandoc gained support for reading and writing Typst.

The old hypermedia.systems was built with the static site generator Lume with an AsciiDoc plugin I wrote. For the new book, I wanted to test out [Müteferrika][], an online book publishing toolkit I’m building. The advantage of Müteferrika is that it understands the structure of a book (parts, chapters, frontmatter etc.). The disadvantage is that it was and still is an unfinished mess, so I had to fix a lot of bugs to get it to work for Hypermedia Systems.

The build process had to convert the Typst source to HTML, which I planned to do with Pandoc. Unfortunately, Pandoc doesn’t have full parity with the mainline Typst compiler, and spat out many errors when I first tried to convert the book. The fix for most of these was to replace direct property accesses with at calls and add null checks as needed.

Conclusion

The migration from AsciiDoc to Typst was a resounding success. I had to fudge a lot of tooling around book production, since Typst is still a young project and focused more on research papers than books, but the ecosystem is constantly growing and improving. Shiroa is a promising project for publishing web books with Typst, for example.

The web book is now live at hypermedia.systems. It has (as far as we could tell) everything the old web book had, and more. There’s a button at the bottom of each page where you can customize the colors of the website to your liking. For the print version, we’re switching from Amazon KDP to Lulu, which will hopefully result in more consistent printing.

Making Kustom widgets that fit in with Nothing OS

2024-04-24T09:39:39Z

I’ve been using a Nothing Phone (2a) for a while now. I love the built in widgets, but there’s not enough of them, and most third-party widgets stick out like a sore thumb. Not even any of the Nothing-themed KWGT packs on the Play Store match.

So I tried my own hand at it, and with not much effort, I was able to make these two:

To my eyes, that’s an exact match! The date and next event widgets are mine.

If you just want to have these widgets, you can download them. If you want to make your own, read on:

(this is my first time using Nextcloud’s sharing links, so let me know if there’s any issues)

I’ll probably be updating these widgets and this guide, as well as making more widgets. In particular, some of the formulas in the next event widget are a bit messy.

Background

The background of the widget is a Rectangle. Use formulas for the width, height and paint color (long press each property, and tap the calculator icon). The formulas are:

Width: $si(rwidth)$
Height: $si(rheight)$
Paint: $si(syscn1, if(si(darkmode), 10, 93)$

I used a corner radius of 32, though that’s my eyeball measurement and might not be exact. For 2x1 and 1x2 widgets, you can use an absurd number like 9999 to make them pill-shaped.

Layout

The widget should have 32 points of padding.

Some Nothing widgets like the digital clock change based on their size. My date widget does the same thing. You can use these formulas to detect if the widget is wide or tall:

Wide: $si(rwidth) > 1.8 * si(rheight)$
Tall: $si(rheight) > 1.8 * si(rwidth)$

If neither of these are true, the widget is square.

Text

Kustom can access your device’s system fonts, including Nothing’s custom fonts.

Dotted: NDot (Variant: 57 for big text, 55 for small text) Monospace: Lettera Mono Serif: Ntype82 Sans-serif: Roboto (weight 300)

Nothing uses the NDot font exclusively in all caps, so I recommend matching that.

Text color: $si(syscn1, if(si(darkmode), 100, 0))

Biber's day out

2024-04-14T17:14:47Z

We went on a walk in the woods today, and Biber came with us.

We came across a cat that looks just like her.

He was a male cat. Biber soon caught up and they started to interact:

I’m not an animal behaviorist and I couldn’t tell you if they were flirting or getting ready to fight.

kill all distros

2024-03-22T00:57:02Z

so insane to me that people advocate for distro packaging over flatpak

hmm yes i love being unable to use up-and-coming software thet nobody packages

yet and making it harder for new distros to get off the ground

vertical monopolies are good when open source i guess

the concept of software package management existing is a failure

one (1) software should be expressible as one thing

Why Bamboo Paper is my favorite note taking app that I never use

2024-01-20T16:44:00Z

Bamboo Paper is an app released by Wacom in 2014, presumably to promote their Bamboo series of capacitive pens. It features 6 pens, 3 of which need to be unlocked via in-app purchases. Notes are stored in the proprietary WILL format, and can only be synced to Wacom’s own Inkspace cloud service. Otherwise, backing up notes involves exporting each notebook manually to PDF.

Due to these restrictions, I don’t use it that often to actually take notes. However, I can’t think of a single note taking app that I enjoy as much.

It’s not because of the minimalist interface, or the satisfying action of the pressure-sensitive brushes and pens, though I love both of those things. Only recently have I realized what draws me to this app.

Notebooks in Bamboo Paper have the same size as your device’s display. When you rotate the device, the UI rotates, but the notebook itself remains in the same orientation relative to the device. Zooming in is possible, but unwieldy, and you can’t zoom out beyond 100%.

All these limitations mean that writing on Bamboo Paper feels like writing on a notebook, whereas using any other app feels like playing a game where your character writes in a notebook. When penstrokes are bound to the specific location on the tablet’s front glass where I put the pen, it makes spatial reasoning more natural, and spatial reasoning is the main advantage of taking handwritten notes over textual notes using handwriting recognition.

Using Bamboo Paper with floating windows of other apps in front of it, as Samsung lets me do, is the closest feeling I’ll probably get to using a Microsoft Courier – at least, it would be if Paper had drag-and-drop support. It might be a 10 year old app but it did get an update last August, so come on Wacom…

Despite all my searching, I haven’t found another app on Android that imitates Paper’s model. Some apps like Samsung Notes zoom and scroll like Word documents, while other apps have an infinite canvas that makes me feel disoriented. Since I want to store my notes somewhere that’s not too likely to disappear next year, I put up with the Word doc, but I’m putting this out there in case someone points me to the perfect virtual notebook

Introducing Denizen

2023-10-27T13:40:38Z

I’m building Denizen (https://denizen.dz4k.com/), a personal website system that is IndieWeb and Fediverse compatible.

Source code: https://codeberg.org/dz4k/denizen

Using XPath in 2023

2023-07-16T21:10:00Z

In the latest release of htmx, you can add event listeners to elements with hx-on:

&lt;form hx-on::beforeRequest="addCsrfToken(event);">

For all the other hx- attributes, we use CSS attribute selectors. However, with hx-on, the attribute name is not fixed as it contains the event. CSS attribute selectors support wildcards on the value of attributes, but not the name:

[hx-trigger] /* common and normal */
[href^="https://dz4k.com"] /* "starts with" operator */
[^ĥx-on:] /* not a thing */

XXMLPathPath Language

XPath is a query language for extracting information from XML(-like) documents. Its main use cases are XSLT and parsing API responses.

The XPath language is significantly more expressive than CSS, making it possible to traverse the XML tree in any direction, filter nodes based on arbitrary predicates, and select any kind of node (including comments, text nodes, and individual attributes). Our non-existent CSS attribute could be written as follows:

//@*[starts-with(name(), "hx-on:")]

This post is not supposed to be an XPath tutorial, but I’ll break this one down:

//: traverse the document (in CSS, this is the default)
@*: find any attribute (mnemonic: at-tribute)
[ ... ]: where…
starts-with(name(), "hx-on:"): its name starts with "hx-on:"

CSS selectors don’t have these kinds of features, and it has good reasons not to. CSS has strict performance requirements – to the point that “CSS optimization” is generally not a thing – and selectors that offer more control could make slow selectors possible. In addition, CSS has well-defined specificity rules, whereas XPath does not.

However, while these features make CSS great for stylesheets, CSS selectors are also the most common way to find DOM elements in JavaScript code and lacking in that regard. Many libraries which extend HTML do so by traversing the entire document and finding elements manually. This is often not needed since, if you didn’t know, XPath is built into browsers.

document.evaluate

The document.evaluate API is somewhat archaic, partly because it was designed for talking to XML APIs over XMLHTTPRequest. Here’s a DOM-friendly wrapper:

function* xpath(...args) {
  let path, root = document;
  if (args.length > 1) [root, path] = args;
  else [path] = args;

  const nodeIterator = document.evaluate(
    path,
    root,
    null,
    XPathResult.UNORDERED_NODE_ITERATOR_TYPE,
    null,
  );

  for (
    let node = nodeIterator.iterateNext();
    node != null;
    node = nodeIterator.iterateNext()
  ) {
    yield node;
  }
}

// TypeScript declaration
function xpath(path: string): Iterable<Node>;
function xpath(root: Element, path: string): Iterable<Node>;

Programming on an Android tablet

2023-07-01T22:53:00Z

I recently purchased a Samsung Galaxy Tab S7 FE. I wasn’t planning on making it a laptop replacement, but I had some experience with Android’s capabilities for development (from when I only had a phone) and the possibility was irresistible.

SSH into my laptop was a no-go. I have no idea how to expose my laptop to the internet in a way that works, let alone is safe. Besides, my model didn’t have mobile data support for on-the-go. I wanted to run a Linux dev environment on the tablet itself.

Termux

Termux is an Android terminal emulator and Linux environment app that works directly with no rooting or setup required. A minimal base system is installed automatically - additional packages are available using the APT package manager.

– https://termux.dev

Termux is not a VM, container or emulator – it’s a terminal in the host system. Because the places where a Linux distro would usually install software are write-only on an Android device, Termux places software and your home directory inside its data directory (TODO) and uses the $PREFIX environment variable.

In my experience, this works until it doesn’t. Software in the Termux repositories works as expected, but anything that needs to be built locally or piped to sh from an URL will likely be confused by the odd directory structure.

In my phone-only days, this worked fine. However, I have projects now that depend on software not packaged for Termux.

Can’t I just have a container or something?

PRoot-Distro

PRoot is a user-space implementation of chroot, mount --bind, and binfmt_misc.

I’m not super clear on the details, but it seems that Android doesn’t let you do most of the things you need for a container runtime. PRoot is a solution to that.

The Termux project maintains a fork of PRoot as well as a wrapper program called PRoot-Distro. PRoot-Distro has an interface that will be familiar to anyone who has used Distrobox or toolbx:

proot-distro create fedora
proot-distro login fedora

This drops you into a fully-functional Fedora shell. After my previous failed attempts, I was surprised to see how well it works:

You can access the network (this didn’t work with another PRoot solution I tried – something to do with Android not allowing raw DNS traffic?)
You can start a server on the container and access it from the host
You can access the host Android filesystem (not the Termux home, the one that has your pictures and WhatsApp voice messages) from the container through the /storage directory

One thing to note is you are still on an ARM device. Software that is not compiled for ARM will not work. However, I only hit this once while installing Deno – and even then, ARM builds are available through a fork.

Summary

Install Termux
Install PRoot-Distro
```
pkg install proot-distro
```
Set up a container
```
proot-distro create fedora
```
Enter your container
```
proot-distro login fedora
```

Hardware

Samsung Galaxy Tab S7 FE SM-T733
Ztotop Magnetic Case
Logitech K380 Bluetooth Keyboard

You don't need a modal window

2023-05-24T05:05:00Z

Nice try

2022-12-21T19:58:01Z

<%~ await includeFile(“embed.eta”, { filters, url: “https://lobste.rs/s/22yudo/kindelia_kind_next_gen_functional” }) %>

this is a new programming language, right? and the people who made it are also making a blockchain thing for it to run on. which made some people, including me, sad. so someone laments this, and someone else comes in:

The author writes in the Kindelia Readme:

There is no native coin. It is not a cryptocurrency. It is a cryptocomputer. Which to me says they’re focusing on the decentralized application portion of blockchains instead of the scam coins.

now, i wasn’t convinced. because, i’m no expert but, a blockchain can’t work without a currency, right? it’s part of the algorithmic foundation to have some token that the chain itself can reimburse participants with…

so how did they do this? did they finally invent a Good Blockchain?

website takes me to readme, “There is no native coin” ok but how? readme takes me to whitepaper:

As for block rewards, the same principle holds. Tokens and applications can leave rewards that only the block miner can collect. For example, Kindelia’s Genesis Token, a no-premine currency which will be deployed by the Kindelia Foundation on the first block, will include a method that mints coins once per block, following Bitcoin’s emission curve. This serves as an incentive for miners that keep the network secure. In other words, Kindelia doesn’t need a built-in token to have block rewards and miner fees. Instead, it flexibly allows users to pay fees in whatever tokens they want, and miners to collect block rewards from a constellation of user-deployed tokens, rather than a single official one.

Kindelia whitepaper, revision 67f86e1 (highlighting mine)

It’s a marketing trick. “No native coin” just means that the coin is pluggable.

I’m going to commit crimes.

A Hypermedia Canvas

2022-11-01T00:00:00Z

/fileshare/2022-09-30 a hypermedia canvas 2022-10-25.pdf

Similarities between Java and JavaScript

2022-10-25T03:52:36Z

Java and JavaScript are a lot more similar than we give them credit for.

A much-maligned language.
Old, crufty APIs.
Nicer today than many people remember.
Complex build tools.
Frameworks and metaframeworks galore.
So, so much reflection.
A vast universe of libraries for everything.
Runs on very cursed places. (Java on SIM cards, JavaScript on spacecrafts)
How do I make this an executable?
Brilliant runtime.

The main difference: Java programmers pretend they’re using JavaScript, and JavaScript programmers pretend they’re using Java.

CDNs can run code now

2022-10-01T08:25:36Z

One area where htmx apps lag behind SPAs is interaction delay. While htmx apps usually have a much improved initial load time, the need for a server roundtrip for most interactions is a disadvantage.

For most apps, this doesn’t matter, as they are all frontends to databases anyway. Thus, there is always a request to the server; the difference is whether the response is HTML or a proprietary JSON-based format that needs to be converted to HTML.

The latency issue is even less of a problem thanks to… let’s call it Application on CDN (AoCDN). The common term for this technology is “edge compute”, which I refuse to say.

AoCDN is a service offered by some hosting and CDN providers. It means that your code runs on several servers all across the world, close to the user.

Resource Traversal

2022-07-19T12:49:46Z

Resource Expansion

< GET https://example.com/users/john_doe
> { "name": "John Doe", "friends": "/users/john_doe/friends" }

< GET https://example.com/users/john_doe?expand=friends
> { "name": "John Doe", "friends": { "joe_bloggs": "/users/joe_bloggs" } }

Substitute the link named friends with the resource at that link.

Resource Traversal

< DELETE https://example.com/users/john_doe?traverse=friends.joe_bloggs
> { "msg": "Removed friend joe_bloggs" }

Server will internally GET each link up to the last, and respond with a 307 redirect to the last.

Writing things down

2022-07-16T20:57:08Z

the Ideal Self looks on in and says: pakala

There are a few intersecting online communities I lurk around that revolve around writing things down:

notebook fans, r/notebooks (“I can stop buying them whenever I want.”)
plain text enjoyers (“Clearly the solution is to write a parser.”)
“productivity” communities (“look at my Notion/Org Mode/Obsidian/… setup!” / unixporn for people with jobs)
the Bullet Journal community (Plug in your own snarky comment for this one)

Why I want to do it

I want to write things down, I really do. I want to keep a diary, and todo lists, and kanban boards. Why? Any of the communities above would be happy to give you a laundry list of reasons to write things down, but there are two in particular that resonate with me.

The first: I want to get things out of my brain. I’ve always been a forgetful person, so, I rode the productivity tool carousel.

A few times, something actually worked for a bit. My best streak was keeping weekly Bullet Journal-like to-do lists throughout the last year of high school, as I was preparing for university entrance exams.

That brings me to the second reason I want to write things down: keeping a log^[1]. Having a record of things you did and thought seems useful in theory. Yet, I threw out the lovely little book I kept my to-dos in, and I don’t really miss them. I feel like I should be upset about not having it, and that does bother me, but I’m not bothered by the book itself. Why is that?

Looking upon my own works and despairing

I want to write things down quickly. I want to take notes in lectures without having to splice them with textbooks later. I want to write down an appointment before I forget, or an idea before I free-associate away from it.

But I can’t bring myself to commit anything to paper. I can’t just take notes, I have to write myself a textbook. If I write down an idea, I can’t pull away without preparing a design document. Yet every sentence of such tomes would be subject to the same fear, and the result is pages half-reserved (read: empty).

This leads to a conflict between the two motivations for writing things down.

ijo nasa li pona e mi

I’ve been keeping a journal for around a year now. I write in it pretty infrequently, but it’s still helpful and I managed to actually finish a (admittedly very thin) notebook for once!

The unique thing is that I write most of my entries in Toki Pona. I’ve heard of people using it in this way, and I gave it a try. It was initially just the novelty of the language that motivated me to keep going, but I was surprised to actually enjoy reading these back after a few months.

The trick is that the simplicity of the language (combined with my lack of actual conversation experience) means that my entries don’t have a voice, that mix of word choice, syntax, and many other things that identify a particular author. They don’t have the trace of yesterday-me’s self image, which today-me finds repugnant.

Am I genuinely going to write about cringing at my past self? Right now? This is repugnant already! Pressing through…

That’s really it — there is a stark difference between words for the public eye and words for myself, and I can’t get myself to write the second on paper. Paper seems like another person.

It dawns on me after writing (aha!) that I can’t write things that identify me — that when I write something for the public eye, I edit it down and remove any trace of myself I spot. That doesn’t seem healthy…

I think what that makes me is self-conscious, but that sounds too positive to be right. Why wouldn’t you want to be conscious of yourself? At the same time, I don’t want so spend time thinking of ways to pity myself.

Maybe this is something I’ll just get over. Then writing this post down would be pretty pointless…

But I wouldn’t care!

There is a secret third reason why I want to write things down: notebooks and text editors are fun. ↩︎

A missing.css conundrum

2022-06-27T18:54:22Z

I want to add a dark theme to missing.css out of the box using the prefers-color-scheme media query. This is a pretty straightforward thing to do, but it causes a problem when you add your own styles on top of missing.css (the expected main usage). Consider:

You install missing.css
You override the --accent variable

If the user has dark theme enabled system-wide, two things might happen depending on how we implement things:

The dark theme accent color in missing.css overrides the custom accent
The custom accent is used with missing.css’s dark theme colors, probably ugly and bad contrast

Neither of these are desirable. The only way to prevent this would be to force everyone to specify their custom colors in both light and dark theme – even if they don’t want to support dark theme.

As for solutions:

One option is to require a class to enable automatic theme switching. This will work and not be much trouble, but makes missing.css less valuable as a classless CSS library.

Thoughts?

_hyperscript Cheatsheet

2022-05-06T13:14:36Z

Event listeners

	Syntax	Meaning
	`on`	add event listener
	`every`	do not queue events
	`mousemove`	event name
	`(clientX, clientY)`	expose the event’s properties
	`[clientX > 100]`	filter events
	`3`	only respond to 3rd click
or	`3 to 10`	respond to 3rd, 4th … 10th click
or	`3 and on`	respond to all clicks except 1st and 2nd
	`from #my-form`	element to attach listeners to, (?? me)
	`debounced at 200ms`	trailing debounce (200ms delay, resets on every event)
or	`throttled at 200ms`	every 200ms at most regardless of the number of events
	`or keyup ...`	specify many events, each with its own from/debounce/…
		if events arrive while the listener is already running…
	`queue all`	add them to a FIFO queue
or	`queue none`	discard them
or	`queue first`	enqueue the first one, discard the rest
or	`queue last`	enqueue the last one, discard the rest (this is the default)

Property access

user.data.name
user’s data’s name
name of data of user
data.name of user
user’s data.name

CSS literals

#my-form: Get element by id
#{getID()}: Dynamic ID
.active: Get elements by class
.{getClass()}: Dynamic class
<em, i />: Query selector all
<ul:nth-child(${n}) />: Dynamic selector

Sigils

foo: local variable by default
:foo: element scoped variable, persisted. can be declared with top-level set. behaviors are isolated from one another
$foo: global variable
@foo: HTML attribute

Array operations

first in arr ≡ first from arr ≡ first of arr ≡ first arr

also random arr, last arr

Finding elements

closest <section/>: nearest enclosing section
previous <section/> from #sec-2: last section that comes before section 2 (?? me)
next <input, button, a/> from document.activeElement within #dialog with wrapping: element to focus when pressing Tab in a modal dialog

Other top-level features

Feature	Description
`behavior`	Define cross-cutting behaviors that are applied to many HTML elements
`def`	Defines a function
`eventsource`	Subscribe to Server Sent Events (SSE)
`js`	Embed JavaScript code at the top level
`set`	Defines a new element-scoped variable
`init`	Initialization logic to be run when the code is first loaded
`on`	Creates an event listener on click log “clicked!”
`socket`	Create a Web Socket
`worker`	Create a Web Worker for asynchrnous work

Command index

add .class to elt
add @attribute=value to elt
add { font-size: ${elt}px; } to elt: add classes/attributes/inline styles to elt (?? me)
append value to target: append to strings/arrays/elements, sets it = target (?? it)
async command | async do command… end: run commands in a non-blocking manner
call expr | get expr: sets it = expr
continue: skips to next iteration in a loop
decrement lvalue by amount: sets lvalue = lvalue - amount (?? 1)
fetch /url with option: value, …
fetch `/url/${id}/` with option: value, …: makes an HTTP request, see Fetch API docs for options
go to url /url in new window
go to url `/url/${id}/`: navigate to a URL in the browser
go to top of elt -- top/middle/bottom
go to top left of elt -- left/center/right
go to left of elt smoothly -- /instantly: scroll an element into view
halt the event’s default: prevent default behavior
halt default: same as above, and exits listener
halt the event’s bubbling: stop event bubbling
halt bubbling: same as above, and exits listener
halt the event: stop both default and bubbling
halt: all of the above
hide elt with strategy: see `show`
if cond then … else … end: if statement
increment: see decrement
js(var) … end: embed JavaScript
log value with func: logs the value to the console using func (?? console.log)
make a <tag#id.class /> called name: creates an element with the given tag, id and classes, sets name (?? it) = the created element
make a Class from args called name: calls the Class constructor with the args, sets name (?? it) = the created object
put rvalue into lvalue: see set
put content into elt -- into/before/after/at start of/at end of: insert content into various parts of the elt
remove .class from elt: see add
remove @attribute from elt: see add
remove elt: removes elt (?? me) from the document
repeat for name in iterable index i … end
for name in iterable index i … end: loop over an iterable, the loop variable is name (?? it)
repeat until event e from elt index i … end: Repeat every tick until event e is received from elt (?? me)
repeat while cond | repeat until cond … end
repeat n times index i … end
repeat forever … end: --
return value | exit: return, see also halt
send evt(args…) to elt
trigger evt(args…) on elt: dispatch a DOM event on elt (?? me)
set lvalue to rvalue: --
settle: waits for any animations/transitions to end
show elt with strategy when cond -- strategy: display:_/visibility/opacity/…: show elt (?? me) using the strategy (?? display:block) if cond (?? true) is true, else hide it
take .class from eltA for eltB: remove class from eltA (?? .class) and add it to eltB (?? me)
tell elt … end: set you = elt, default to you over me
throw exception: throws an exception
toggle .class on eltA for t s
toggle [@attr=value] until evt from eltB
toggle between .class1 and .class2 on eltA: toggle classes and attributes on eltA (?? me)
transition the elt's prop to value … over t s: Animate style properties
wait t s -- or ms: Waits for the given duration
wait for event or event2 or t s: waits for one of the events to occur, sets it=the event

TextMate Grammars

2022-04-16T16:02:47Z

Thanks to Phrogz

comment

for comments.

line

line comments, we specialize further so that the type of comment start character(s) can be extracted from the scope.

double-slash: // comment
double-dash: -- comment
number-sign: # comment
percentage: % comment
character: other types of line comments.

block

multi-line comments like /* … */ and .

documentation: embedded documentation.

constant

various forms of constants.

numeric

those which represent numbers, e.g. 42, 1.3f, 0x4AB1U.

character

those which represent characters, e.g. <, \e, \031.

escape: escape sequences like \e would be constant.character.escape.

language

constants (generally) provided by the language which are “special” like true, false, nil, YES, NO, etc.

other

other constants, e.g. colors in CSS.

entity

an entity refers to a larger part of the document, for example a chapter, class, function, or tag. We do not scope the entire entity as entity.* (we use meta.* for that). But we do use entity.* for the “placeholders” in the larger entity, e.g. if the entity is a chapter, we would use entity.name.section for the chapter title.

name

we are naming the larger entity.

function: the name of a function.
type: the name of a type declaration or class.
tag: a tag name.
section: the name is the name of a section/heading.

other

other entities.

inherited-class: the superclass/baseclass name.
attribute-name: the name of an attribute (mainly in tags).

invalid

stuff which is “invalid”.

illegal: illegal, e.g. an ampersand or lower-than character in HTML (which is not part of an entity/tag).
deprecated: for deprecated stuff e.g. using an API function which is deprecated or using styling with strict HTML.

keyword

keywords (when these do not fall into the other groups).

control: mainly related to flow control like continue, while, return, etc.
operator: operators can either be textual (e.g. or) or be characters.
other: other keywords.

markup

this is for markup languages and generally applies to larger subsets of the text.

underline

underlined text.

link: this is for links, as a convenience this is derived from markup.underline so that if there is no theme rule which specifically targets markup.underline.link then it will inherit the underline style.

bold

bold text (text which is strong and similar should preferably be derived from this name).

heading

a section header. Optionally provide the heading level as the next element, for example markup.heading.2.html for <h2>…</h2> in HTML.

italic

italic text (text which is emphasized and similar should preferably be derived from this name).

list

list items.

numbered: numbered list items.
unnumbered: unnumbered list items.

quote

quoted (sometimes block quoted) text.

raw

text which is verbatim, e.g. code listings. Normally spell checking is disabled for markup.raw.

other

other markup constructs.

meta

the meta scope is generally used to markup larger parts of the document. For example the entire line which declares a function would be meta.function and the subsets would be storage.type, entity.name.function, variable.parameter etc. and only the latter would be styled. Sometimes the meta part of the scope will be used only to limit the more general element that is styled, most of the time meta scopes are however used in scope selectors for activation of bundle items. For example in Objective-C there is a meta scope for the interface declaration of a class and the implementation, allowing the same tab-triggers to expand differently, depending on context.

storage

things relating to “storage”.

type: the type of something, class, function, int, var, etc.
modifier: a storage modifier like static, final, abstract, etc.

string

strings.

quoted

quoted strings.

single: single quoted strings: ‘foo’.
double: double quoted strings: “foo”.
triple: triple quoted strings: “”“Python”“”.
other: other types of quoting: $‘shell’, %s{…}.

unquoted

for things like here-docs and here-strings.

interpolated

strings which are “evaluated”: date, $(pwd).

regexp

regular expressions: /(\w+)/.

other

other types of strings (should rarely be used).

support

things provided by a framework or library should be below support.

function: functions provided by the framework/library. For example NSLog in Objective-C is support.function.
class: when the framework/library provides classes.
type: types provided by the framework/library, this is probably only used for languages derived from C, which has typedef (and struct). Most other languages would introduce new types as classes.
constant: constants (magic values) provided by the framework/library.
variable: variables provided by the framework/library. For example NSApp in AppKit.
other: the above should be exhaustive, but for everything else use support.other.

variable

variables. Not all languages allow easy identification (and thus markup) of these.

parameter: when the variable is declared as the parameter.
language: reserved language variables like this, super, self, etc.
other: other variables, like $some_variables.

Cloudflare Pages: Failed: an internal error occurred

2022-03-25T14:36:06Z

I deploy my website on Cloudflare Pages (at time of writing). My builds were failing with the error message:

17:24:49.795	Deploying your site to Cloudflare's global network...
17:24:50.632	Failed: an internal error occurred

No other information.

Googling yields that many things can cause this issue. In my case, it was a directory called _redirects/ in the output folder.

Cloudflare expects _redirects to be a file to read redirect information from. (Indeed, that’s what I was using it for — it was output to a directory by accident).

Intentionally Unscalable

2022-02-06T14:52:45Z

_hyperscript is intentionally unscalable. We make decisions that would be obviously inadvisable to anyone looking to make scalable software, and dismiss features like reactivity that seem to have proven themselves in this regard. To understand why, I examine and critique the concept of “scalable”.

Scalability refers to the ability of a system to handle more work given more resources. This definition matches both formal definitions and common use in application development circles. Given this definition, we can see that:

Scalability is unidirectional — it only refers to scaling up, never scaling down. In fact, I never hear “scaling down” discussed at all. Declaring it out-of-scope to ascribe this to a wider culture of growth, I’ll just speculate that perhaps scaling down is assumed to be trivial, or not necessary as a system that handles a large amount of work can necessarily handle a small amount, adequately, without modification.
When people talk about the scalability of a tool, they are usually employing metonymy. metonymy: I was excited when looking up this word on Tureng, but “metonymy” doesn’t really have the barebones simplicity of the Turkish “ad aktarması” or the weight of the Arabic loan “mecaz-ı mürsel”. They are discussing the impact of the tool on other systems’ scalability (will _hyperscript hinder us as we get more users/our app gets more complex?) and not the scalability of the tool itself (can we get hyperscript to run N lines of code in T time with better hardware?)
System, work, resources — a software development team consists of multiple systems using multiple kinds of resources to do multiple kinds of work. Which system is being discussed is usually clear through context, but we should be aware when “scalable” is used without such context.

The two main systems in a software organization

System More Work Resources

Software Serve more users. Computers.

Team Add complexity to the software and maintain it. Time, money.

The two main systems in a software organization
System	More Work	Resources
Software	Serve more users.	Computers.
Team	Add complexity to the software and maintain it.	Time, money.

Why is scalability desired?

“As our app gets more complex, X will prevent us from growing and maintaining it”.

There is an assumption that your app will get more complex and partly that complexity is an environmental factor, as opposed to a consequence of the team’s choices. Growing a codebase is adding complexity. Lamenting not being able to do that seems odd given the amount of lip service we pay to the glory of removing complexity.
“As we get more users, the app we built with X will need rewriting”.

There is an assumption that we will get more users. If this is true, and the organization containing the team has an actual monetization strategy, then it follows that we will also get more money. monetization: The way that the “we’ll need rewriting” argument assumes growth, but rejects relying on it reminds me of paying people in shares. If you can’t trust it enough to just pay me the money you’ll definitely make back, why should I? If we need to build an app that serves N users eventually, does it not make sense to do so when you have F(N-ε) dollars? epsilon: I originally said this much more pithily: “if you are certain you’ll grow to 1 billion users, and you need an app that can handle that, why build it now on a startup budget when you’re going to have the budget of a 1B-user app soon” My more business-savvy friend Ben Pate informs me that “many million-user budgets have been wasted doing that [building a million-user system before you have any users at all]”, and that “You won’t get a billion users until you first earn a thousand”.

I don’t know shit about running a company, but I reject designing our tools for startups that eat some VC money, don’t generate profit or any benefit for humanity, and get sold for the advertising value of their data.

And what’s so bad about rewriting anyway? I thought programmers liked writing code. liked writing code: I’m aware that some people do programming purely as a job. I sometimes envy the indifference I imagine they have towards our petty squabbles. We again pay lip service to how code is the easy part, and how legacy code sucks… Erlang has the famous “let it crash”, anticipating issues and focusing on recovering from failure instead of preventing it. We can apply a similar concept: “write to rewrite”.

Write to rewrite

Expect that you might need to rewrite your code, and be considerate of your future self who is doing that. _hyperscript helps you do this in two ways:

Readability over writability. The fact that _hyperscript code examples look like plain English is just as much an achievement of the author as it is _hyperscript’s. We do not do anything smart like Natural Language Processing; _hyperscript uses common and normal parsing techniques. C++, Perl, perhaps even Ruby have more complex grammars than _hyperscript. We give you tools like the prop of object and object's prop syntax. and the it variable that might seem magical but is actually little more than the accumulator register in an 8-bit processor. It is up to you the programmer to use these tools to create readable code. The burden you take upon your shoulders can include (but will not be limited to):
- Choosing between rates of the result's data, its data.rates, or result.data.rates.
- Breaking up long expressions into statements. Besides readability and English-like flow, this is also good for stepping through with a debugger (yet another tool for a rewriter to understand the code).
- Reordering statements to make efficient use of it. If we do this consistently, code that doesn’t do this will stick out as order-dependent and vulnerable to race conditions.
Locality of behavior. Ever looked through a GitHub repo, not been able to find the code you were looking for, eventually clone the repo locally and start “Jump to Definition”-ing and “Peek References”-ing your way towards your target, only to find out it’s a wrapper for yet another function? If it is a Java project, I usually give up before reaching any source code files at all. Htmx “Carson” Org has written about Locality of Behavior previously, so I’ll direct you there.

Conclusion

I recall what I now know to be an urban legend about the great architect Mimar Sinan. Supposedly, when the keystones of some arches in a mosque he built were yielding to old age, an engineer working on the restorations found a note in a bottle signed by Koca Mimar Sinan Ağa himself. It was a step-by-step guide on how to replace the keystone without disruption to the rest of the structure, complete with drawings.

Putting aside the implication that our modern architects don’t know how stone arches are built, and that Great Sinan Agha The Architect expected such architects to restore his works, this fictional Mimar Sinan clearly doesn’t know anything about scalability. If he did, he would predict when the Sultan would die and make the mosque last exactly that long.

When asked what their language is good for, many designers would say “everything” which really means “nothing”.

– Robert Nystrom, What I Learned at the Emerging Languages Camp

Nystrom said this in the context of choosing a niche for your language, but I believe it applies just as well to choosing a scale.

nanpa pi ken ala kipisi pi mute ale li lon

2022-01-14T21:47:00Z

tawa kama lon e ni, o sitelen insa e ijo jasima: nanpa pi ken ala kipisi mute pini li lon. o nimi e kulupu pi nanpa ni kepeken sitelen P.

ni la o mute e nanpa ale pi kulupu P, o namako e wan. (ni li ken tan ni: kulupu Pli suli pini). o nimi e nanpa sin ni kepeken sitelen N.

nanpa Nla ken tu li lon: ona li nanpa pi ken ala kipisi, anu ona li ijo tan mute pi nanpa ante pi ken ala kipisi.

ken nanpa wan li ken ala tan ni: nanpa N li lon ala kulupu P. (nanpa tan kulupu P, la nanpa N li suli mute). taso ,ona li nanpa pi ken ala kipisi. kulupu P li wile jo e nanpa ale pi ken ala kipisi, la ni li ken ala.

tenpo ni la o sitelen insa e ken nanpa tu. nanpa ni li wile lon: ona li nanpa pi ken ala kipisi, ona li ken kipisi e nanpa N. o nimi e ona kepeken sitelen L. o sona e ni: nanpa pi kulupu P li ken ala kipisi e nanpa N. (nanpa p li lon kulupu P la ona li lukin kipisi e nanpa N la wan li ante). tan ni, la nanpa L li ken ala lon kulupu P. taso ,ona li nanpa pi ken ala kipisi. sama tenpo pini, la ni li ken ala.

ale ni, la kulupu P li suli pini, la ale li ijo pakala pi ken ala. tan ni, la kulupu P li wile kulupu pi suli ale.

VSCode/Toolbx

2021-11-17T20:53:00Z

A GUI script to run VSCode in a toolbox container.

Recently, I switched to [Fedora Silverblue] as my desktop operating system. To give a basic summary, Silverblue is an operating system where the system files are immutable, and can be restored to a previous state at any time. This version of Fedora does not ship the package manager dnf. Instead, you are expected to install applications in one of three ways:

[Flatpak]. These are applications with Android-like isolation and permission management capabilities.

Flatpaks are nice, but there are still some rough edges (especially with less popular applications, where the packaging is not as well-maintained) and limitations (the VSCode terminal runs inside a container, and it’s pretty inconvenient to use any of your tools).
[RPM-OSTree] allows you to “layer” packages onto the immutable image. The package installation creates a new image such that you can restore to a previous state of your system at any point.

While it works, layering packages all the time is not ideal, and best reserved for things that don’t work any other way. The docs give the fish shell as an example. I used it for a package that the internet told me to install to make Eduroam work. Layered packages don’t take effect until a reboot.
[Toolboxes]! Toolbox, or Toolbx as it’s been recently renamed[^1], is a tool for setting up development containers really easily.

You type something to the effect of toolbox create my-project-container, and you have a place where you can sudo without password, install whatever package with dnf, just trash the place. The containers use your real home directory, can access USB devices, and other things that just work. If anything goes wrong, you can just create a new container and start over.

Toolbx

I set up toolboxes for a few projects to test the waters:

www: This website
_hyperscript: The hypermedia programming language
this-week-in-htmx: The weekly blog that I was running late on at the time. Sorry…

Great, I’m all set up!

So… How do I develop in here?

Some DDGing led me to the amazing [toolbox-vscode] script. It gives you a script that you can place into ~/.local/bin/code. The first time you run it, it sets up everything for connecting to the container via VSCode’s remote feature, and launches it. The setup needs to be performed once per container, which wasn’t the most convenient, but oh well.

In which I have to have my GUIs

Previously, I would launch VSCode and pick my project from the Open Recent menu. The flow of

opening a terminal
entering the toolbox
entering the project folder
code .
now I can code, but I’m left with a useless terminal open

was far too janky. What I wanted was:

launch an app
pick my project from a list
VSCode is open to the right toolbox and project directory, and the list is out of my way

After some relearning Bash and overengineering later, I have a script in my hands.

vstlbx

#!/usr/bin/env bash

# Depends on: bash zenity

set -e

Title="VS Toolbx"
Text="Select a container to open in VS Code:"

## list-containers > containers
list-containers() {
	toolbox list --containers | tail -n +2 | tr -s ' +' "\t" | cut -f 2
}

## containers | user-pick-container > container
user-pick-container() {
	zenity \
		--title "$Title" \
		--text "$Text" \
		--list \
  	--column 'Name' \
  	--hide-header \
  	2>/dev/null
}

## get-project-dir container > project
get-project-dir() {
	if [ "$1" == "hyperscript" ]; then
		echo "$HOME/Projects/_hyperscript"
	else
		echo "$HOME/Projects/$1"
	fi
}

## run-container container
run-container() {
	toolbox run --container "$1" -- $(which code) $(get-project-dir "$1")
}

## run-ui
run-ui() {
	container=$(list-containers | user-pick-container)
	run-container "$container"
}

install-desktop-file() {
	desktop_file="$HOME/.local/share/applications/com.dz4k.vstlbx.desktop"
	cat <<-EOF >"$desktop_file"
		[Desktop Entry]
		Type=Application
		Name[en_US]=VS/Toolbx
		Categories=Development;
		X-GNOME-FullName[en_US]=VS/Toolbx
		Comment[en_US.UTF-8]=Attach VSCode to toolboxes
		NoDisplay=false
		Exec=/var/home/deniz/Applications/vstlbx
		Path=.
		Terminal=false
		X-GNOME-UsesNotifications=false
  	StartupWMClass=zenity
		Name[en_US.UTF-8]=VS/Toolbx
		X-GNOME-FullName[en_US.UTF-8]=VS/Toolbx
	EOF
}

if [ "$#" == 0 ]; then
	run-ui
	exit 0
fi

while [ "$#" -gt 0 ]; do
	case "$1" in
		'install-desktop')
			install-desktop-file
		;;
		'container')
			run-container "$2"
			shift
		;;
		'ui')
			run-ui
		;;
	esac
	shift
done

who needs Gists anyway

Here’s what the UI looks like:

I’m still getting myself set up, but I’m happy that I figured this part out early on.

Sprinkle Sharing

2021-09-02T19:41:00Z

When people talk about code sharing between server and client, the usual suspects are Node.js and sharing model classes. However, there's often good reason to duplicate these.

A far more interesting type of code sharing to me is eliminating this duplication:

When you are writing a server-driven web app with "sprinkles" of JS, you want to have interactive components, but also deliver usable HTML to non-JS-enabled¹ clients. This means you are essentially writing a component with the first render and subsequent updates are written in different languages -- HTML then JS. How to make this nicer? (Existing answers follow)

Alpine and similar

Write both in one language: "HTML with JS inline in special attributes".

React and similar

Write both in one language: "JS optionally with JSX". Hard to set up sprinkle style, but wasn't this how it was originally created to be used?

"Non-JS-enabled" includes not only browsers where the user turned off JS, but also times when the JS didn't load, or errored due to use of unsupported modern features.

Sokaktaki Ankara: Tabela Tasarım Yarışması

2021-08-29T19:07:59Z

2021-09-08: Kırmızı kazandı! (twitter)

Ankara Büyükşehir Belediyesi sokak tabelalarının yenilenmesi için yarışma düzenledi. Halk oylamasına sunulmak üzere üç tasarım seçildi. Siz de Başkent Mobil uygulamasının Söz Hakkı bölümünden oy verebilirsiniz.

Ben oyumu çoktan Eser A için kullandım. Büyük yazı kullanılmasını, metro, otobüs durağı gibi yerlerin gösterilmesini ve mimari eser künyelerinin çizim içermesini beğendim. Eser B’nin fazla dikkat çektiğini ve modası geçecek tasarım ögeleri kullandığını düşünüyorum. Eser C ise gereksiz öğelerle dolu: kimsenin göremeyeceği küçük haritalar ve kocaman “ankara” yazısı. Eser C’deki gibi bir harita, Legible London tarzı bir haritada çok daha kullanışlı olabilir.

Yarışma şartnamesinde tabelaların İşçi Blokları Mahallesi, Gazi Mustafa Kemal Bulvarı, Balıkçı Caddesi, Alâ Sokak, 1923. Sokak ile test edilmesi söylenmiş. Bence Bangabandhu Şeyh Mucibur Rahman Bulvarıda eklenmeliydi.

kalama [_la_a_kute_ijo_moli_o_sona_a]

2021-08-10T01:10:17Z

tenpo ni la pilin li telo:
jan ni li kama tan ma anpa:
sewi li lawa e ona pakala.

sewi o pona e ona.
jan Jesu wawa o
pana e lape tawa ona.

Event Delegation in _hyperscript

2021-05-20T12:43:49Z

TL;DR This is how you do it:

on click
	tell the closest <li/> to the target
		remove yourself
		-- do more stuff...
		-- "you" refers to the clicked list item

Or more concisely:

on click tell closest <li/> to target
	remove yourself

I’ve seen some people use a pattern like this:

<ul>
	{% for item in items %}
		<li _="on click remove me">{{ item }}</li>
	{% endfor %}
</ul>

This is convenient to write if you have a server-side templating system, but has a few issues:

The code needs to be parsed as many times as there are items.
The resulting HTML is bloated.
If you add more items to the list dynamically on the client, you need to repeat the code there.

The pattern for resolving this is called event delegation. Here’s how you might do it in JavaScript:

ul.addEventListener('click', e => {
	const li = e.target.closest('li')
	if (!li) return
	li.remove()
})

We add a single event listener to the enclosing list, which finds the item that was clicked and manipulates it.

In _hyperscript, the tell command allows us to manipulate an element other than me conveniently, by changing the implicit target from me to you, which refers to the “element being told”.

Hypelet

2021-05-01T14:46:00Z

I made a tool to make bookmarklets in _hyperscript. You just write some code in the box and drag the bookmarklet into your bookmarks toolbar. Hypelet injects glue code to load hyperscript dynamically and run your code. You can get a permalink to share your bookmarklet.

Here’s Hypelet: Hypelet
Here’s the code for a bookmarklet to get the RSS feed of a page: Get RSS – Hypelet

The Implementation of HDB, the _hyperscript debugger

2021-03-17T00:00:00Z

Update 2021-09-02: HDB has evolved since this post was written. Though it works mostly the same way, there have been fixes and a UI redesign. Check the _hyperscript repo for the up-to-date Code:

The 0.0.6 release of the _hyperscript hypertext UI scripting language introduces HDB, an interactive debugging environment. In this article I discuss how the hyper-flexible hyperscript runtime allowed me to implement the first release of HDB with ease. But first, I will introduce you to what HDB is like:

The (Un)finished Product

The breakpoint statement stops execution and launches the HDB UI.

You can set breakpoints conditionally:

Debug Mode

Implementation

HDB lives in a single JavaScript file.

Turning the keys

In the hyperscript runtime (which is a tree walking interpreter), each command has an execute() method which either returns the next command to be executed, or a Promise thereof. The execute method for the breakpoint command creates an HDB environment and assigns it to the global scope (usually window):

var hdb = new HDB(ctx, runtime, this);
window.hdb = hdb;

The HDB object keeps hold of the current command and context as we step through. (The context is the object holding the local variables for the hyperscript code, and some other things the runtime keeps track of). We call its break() method:

HDB.prototype.break = function(ctx) {
	var self = this;
	console.log("%c=== HDB///_hyperscript/debugger ===", headingStyle);
	self.ui();
	return new Promise(function (resolve, reject) {
		self.bus.addEventListener("continue", function () {
			if (self.ctx !== ctx) {
				// Context switch
				for (var attr in ctx) {
					delete ctx[attr];
				}
				Object.assign(ctx, self.ctx);
			}
			delete window.hdb;
			resolve(self.runtime.findNext(self.cmd, self.ctx));
		}, { once: true });
	})
}

There are a few things to unpack here. We call self.ui() to start the UI, which we’ll get to later. Remember how a command can return the next method to execute as a promise? The break method resolves after the internal event bus receives a "continue" event, whether by the user pressing “Continue” or simply reaching the end of the debugged Code:

The “context switch” is the dirtiest part of it all. Because we can step out of functions, we might finish debugging session with a different context than before. In this case, we just wipe the old context and copy the current context variables over. Honestly, I thought I’d have to do a lot more of this kind of thing.

Speaking of stepping out of functions…

Stepping Over and Out

Firstly, if self.cmd is null, then the previous command was the last one, so we just stop the debug process:

HDB.prototype.stepOver = function() {
	var self = this;
	if (!self.cmd) return self.continueExec();

If not, then we do a little dance to execute the current command and get the next one:

var result = self.cmd && self.cmd.type === 'breakpointCommand' ?
	self.runtime.findNext(self.cmd, self.ctx) :
	self.runtime.unifiedEval(self.cmd, self.ctx);

We perform a useless check that I forgot to take out (self.cmd &&). Then, we special-case the breakpoint command itself and don’t execute it (nested debug sessions don’t end well…), instead finding the subsequent command ourselves with the runtime.findNext() in hyperscript core. Otherwise, we can execute the current command.

Once we have our command result, we can step onto it:

if (result.type === "implicitReturn") return self.stepOut();
if (result && result.then instanceof Function) {
	return result.then(function (next) {
		self.cmd = next;
		self.bus.dispatchEvent(new Event("step"));
		self.logCommand();
	})
} else if (result.halt_flag) {
	this.bus.dispatchEvent(new Event("continue"));
} else {
	self.cmd = result;
	self.bus.dispatchEvent(new Event("step"));
	this.logCommand();
}

If we returned from a function, we step out of it (discussed below). Otherwise, if the command returned a Promise, we await the next command, set cmd to it, notify the event bus and log it with some fancy styles. If the result was synchronous and is a HALT; we stop debugging (as I write this, I’m realizing I should’ve called continueExec() here). Finally, we commit the kind of code duplication hyperscript is meant to help you avoid, to handle a synchronous result.

To step out, we first get our hands on the context from which we were called:

HDB.prototype.stepOut = function() {
	var self = this;
	if (!self.ctx.meta.caller) return self.continueExec();
	var callingCmd = self.ctx.meta.callingCommand;
	var oldMe = self.ctx.me;
	self.ctx = self.ctx.meta.caller;

Turns out _hyperscript function calls already keep hold of the caller context (callingCommand was added by me though). After we change context, we do something a little odd:

self.cmd = self.runtime.findNext(callingCmd, self.ctx);
self.cmd = self.runtime.findNext(self.cmd, self.ctx);

Why do we call findNext twice? Consider the following hyperscript code:

transition 'color' to darkgray
set name to getName()
log the name

We can’t execute the command to set name until we have the name, so when getName() is called, the current command is still set to the transition. We call findNext once to find the set, and again to find the log.

Finally, we’re done stepping out:

self.bus.dispatchEvent(new Event('step'))

HDB UI

What did I use to make the UI for the hyperscript debugger? Hyperscript, of course!

<div class="hdb" _="--
	on load or step from hdb.bus send update to me
	on continue from hdb.bus remove #hyperscript-hdb-ui-wrapper-">

There are a lot of elements listening to load or step from hdb.bus, so I consolidated them under update from .hdb. #hyperscript-hdb-ui-wrapper- is the element whose Shadow DOM this UI lives in — using shadow DOM to isolate the styling of the panel cost me later on, as you’ll see.

We define some functions.

def highlightDebugCode
	set start to hdb.cmd.startToken.start
	set end_ to hdb.cmd.endToken.end
	set src to hdb.cmd.programSource
	set beforeCmd to escapeHTML(src.substring(0, start))
	set cmd to escapeHTML(src.substring(start, end_))
	set afterCmd to escapeHTML(src.substring(end_))
	return beforeCmd+"<u class='current'>"+cmd+"</u>"+afterCmd
end

Now, I wasn’t aware that we had template literals in hyperscript at this point, so that’s for the next release. The escapeHTML helper might disappoint some:

def escapeHTML(unsafe)
	js(unsafe) return unsafe
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;")
		.replace(/\\x22/g, "&quot;")
		.replace(/\\x27/g, "&#039;") end
	return it
end

Unfortunately, hyperscript’s regex syntax isn’t decided yet.

And we have the most broken part of HDB, the prettyPrint function. If you know how to do this better, feel free to send a PR.

Having defined our functions we have a simple toolbar and then the eval panel:

<form class="eval-form"  _="on submit
	call event.preventDefault()
	get the first <input/> in me
	call _hyperscript(its.value, hdb.ctx)
	call prettyPrint(it)
	put it into the <output/> in me">

		<input type="text" id="eval-expr" placeholder="e.g. target.innerText">
		<button type="submit">Go</button>
		<output id="eval-output"><em>The value will show up here</em></output>

Why do I use weird selectors like <input/> in me when these elements have good IDs? Because #eval-expr in hyperscript uses document.querySelector, which doesn’t reach Shadow DOM.

A panel to show the code being debugged:

<h3 _="on update from hdbUI
		put 'Debugging <code>'+hdb.cmd.parent.displayName+'</code>' into me"></h3>
<div class="code-container">
	<pre class="code" _="on update from hdbUI
							if hdb.cmd.programSource
								put highlightDebugCode() into my.innerHTML
								scrollIntoView({ block: 'nearest' }) the
								first .current in me"></pre>
</div>

Finally, a context panel that shows the local variables.

<dl class="context" _="--
	on update from hdbUI
		set my.innerHTML to ''
		repeat for var in Object.keys(hdb.ctx) if var != 'meta'
			get '<dt>'+var+'<dd>'+prettyPrint(hdb.ctx[var])
			put it at end of me
		end
	on click
		get closest <dt/> to target
		log hdb.ctx[its.innerText]"></dl>

That loop could definitely be cleaner. You can see the hidden feature where you can click a variable name to log it to the console (useful if you don’t want to rely on my super-buggy pretty printer).

Some CSS later, we’re done with the UI! To avoid CSS interference from the host page, we create a wrapper and put our UI in its shadow DOM:

HDB.prototype.ui = function () {
	var node = document.createElement('div');
	var shadow = node.attachShadow({ mode: 'open' });
	node.style = 'all: initial';
	node.id = 'hyperscript-hdb-ui-wrapper-';
	shadow.innerHTML = ui;
	document.body.appendChild(node);
	window.hdbUI = shadow.querySelector('.hdb');
	_hyperscript.processNode(hdbUI);
}

The End

In just 360 lines, we have a basic debugger. This speaks volumes to the flexibility of the hyperscript runtime, and I hope HDB serves as an example of what’s possible with the hyperscript extension API. Like the rest of hyperscript, it’s in early stages of development — feedback and contributors are always welcome!

2021-02-26T00:03:00Z

Repost: "hyperscript 0.0.4 beta is going to be out soon..."

2021-02-13T17:45:11Z

hyperscript 0.0.4 beta is going to be out soon
a sneak peek:

the wait command can now pause evaluation until an event is received

here a class is added, hyperscript waits for the transition to end, then the element is removed

feature suggested by @DenizAksimsek
<div _="on click add .fade then wait for transitionend then remove">
  This is a notice. Click to dismiss.
  </div>

HTMX Doodles

2021-01-11T00:47:00Z

Transcript

Server-Side App

Full-page reloads
HTML only has GET and POST methods
…and only link clicks & form submissions

Single-Page App

Reinvent the accessible web
Need big frameworks or complex code
Probably need a server anyway for SSR
The client is untrueted

Progressively Enhanced App

Tight coupling between server & client code
Behavior is scattered

htmx

Completing HTML with arbitrary events, replacing fragments instead of the whole page
Your code runs on the server, which you trust
htmx allows for locality of behavior

Consult your doctor to find out if htmx is right for you. Side effects may include arguing about REST on HN.

Transcript

The year is 2040.

htmx is a W3C recommendation and _hyperscript is an ECMA standard. War has long ceased, API churn is nought but a distant memory.

Iota (from Golang) in JavaScript

2021-01-10T17:57:00Z

(Skip to code)

Enums in Javascript

Currently, the ways we create enums include

String literals (see addEventListener), which can be typed with TypeScript, but look a bit ugly
```
type Direction = 'north' | 'east' | 'south' | 'west'
```

TypeScript enums

enum Direction { north, east, south, west }

Integer constants, IMO your best option if you’re not using TypeScript
```
const Directions = { north: 0, east: 1, south: 2, west: 3 }
```

Enums in Go

Initially I wasn’t going to bring Go into this at all. However, it turns out enum is a reserved word in JS, so I went with iota for the name of the function, and felt the need to explain it.

Go doesn’t have enums, but an unusual keyword iota:

type Direction int
const (
	North Direction = iota
	East
	South
	West
)

There’s something subtle going on here. The iota relies on a few Go features:

When multiple const declarations are grouped together, the right hand side is implicitly repeated
Iota is incremented every time it is evaluated, and reset with each const

My JavaScript shorthand is nowhere near as magical… but it does make use of proxies.

function iota(start = 0) {
	let count = start
	return new Proxy({}, {
		get(o, prop) {
			if (prop in o) return o[prop]
			else return o[prop] = count++
		}
	})
}

const { north, east, south, west } = iota()
console.log(north)

So, is this function any good?

For one, it lacks some of Go’s iota capabilities — you can’t create bitmasks with this the way you would in Go with 1 << iota. We could augment it a bit by accepting a callback:

function iota(cb = (i => i)) {
	let count = 0
	return new Proxy({}, {
		get(o, prop) {
			if (prop in o) return o[prop]
			else return o[prop] = cb(count++)
		}
	})
}

// flag bits
const { hasPermissionFlag, userModeFlag, useLegacyProtocolFlag } = iota(i => 1 << i)
const hasPermission = options & hasPermissionFlag

I don’t think bitmasks are very common at all in JavaScript code, though.

A more significant setback is that you can’t get a list of all the enum values — nothing we can’t fix:

function iota(start = 0) {
	let count = start
	let firstProp = true

	return new Proxy({}, {
		get(o, prop) {
			if (firstProp) {
	  			firstProp = false
	  			return { // Enum descriptor
					get values() { return o }
				}
			}
			if (prop in o) return o[prop]
			else return o[prop] = count++
		}
	})
}

const { Direction, north, east, south, west } = iota()
console.log(Direction)

This is open for extension — we could add more methods on the enum description such as converting the integer value of a Direction to its name, or validating a Direction that we parsed from a config file.

I might have a metaprogramming addiction.

Eleventy + Markdown + CoffeeScript = ❤

2020-10-16T17:12:00Z

I’ve started using CoffeeScript instead of YAML for frontmatter, and it works like a dream. Endorsed by Zach Leatherman.

Markdown with Frontmatter

As far as I know, Jekyll is the origin of using a YAML block at the top of a Markdown file for metadata. It’s not hard to imagine why this became popular — associating prose with data is a common use case, and though they have their issues, both Markdown and YAML look pretty.* “It looks pretty” is often what people really mean when they call something “human-readable”.

Eleventy Frontmatter

Eleventy uses frontmatter blocks (delimited by ---) for all kinds of files. Markdown posts, HTML partials and Nunjucks/EJS/Liquid/… templates can all have them. The data in the frontmatter can then be used in templates. In the following, title is not a reserved name:

---
title: 'A Blog Post'
---

# {title}

Lorem ipsum dolor sit amet...

We could have used name, heading or kdsad983erj33.

Eleventy’s “Computed Data” feature relies on functions in the frontmatter. As YAML doesn’t have functions, you are expected to use JS (well, you can use template strings I guess…):

---js
{
  title: "My page title",
  eleventyComputed: {
    currentDate: () => new Date().toLocaleString()
  }
}
---
<!doctype html>
<html>
--- … -->
<body>
   <p>This website was last generated on {{ currentDate }}</p>
  <!-- … -->

Computed data is cool. Among other things, it allows me to move logic away from my templates and express it in an actual programming language. However JS frontmatter is not very pretty, and I don’t want to convert my whole frontmatter just for one function.

If only there was a language that had the expressive power of JS, and the visually clean data notation of YAML…

CoffeeScript All The Time!

CoffeeScript is actually mentioned in the GitHub repo for gray-matter, the library Eleventy uses to parse frontmatter. Compared to YAML, it’s not much more verbose:

---
title: Street sign in İstanbul
date: 2020-10-10 19:27:39
tags: [place, design]
photo: /photos/img02.jpeg
türkçe: /2020/istanbul-street-sign/
---
YAML

---
title: 'Street sign in İstanbul'
date: '2020-10-10T19:27:39+03:00'
tags: ['place', 'design']
photo: '/photos/img02.jpeg'
türkçe: '/2020/istanbul-street-sign/'
---
CoffeeScript

The CoffeeScript code above is actually fully YAML-compatible! This keeps my templates portable. And with computed data:

---
layout: 'layout'
eleventyComputed:
	syndicationLinks: (data) ->
		DEV: data.devToSyndication[data.page.url]
---

<article class="h-entry">
	<!-- ... -->
	{%for silo, link in syndicationLinks%}
		<a class="u-syndication" href="{{link}}">{{silo}}</a>
		{%if not loop.last%} | {%endif%}
	{%endfor%}

I think that computed frontmatter gives a nice balance of logic-less* and logic-full templates. Logicless templates: For people who will never need to make an HTML monthly calendar!

İstanbul'da bir sokak tabelası

2020-10-10T19:27:39Z

Ordu’daki tabelanın olduğu yazıda İstanbul’a yolum düşerse oradakilerin resmini paylaşırım diye yazmıştım. Başka bir şey dileseymişim.

Pandemi yüzünden İstanbul’da gezemedim ama bu tabelaları gerçekte görme fırsatım oldu. Özel tasarım Kent yazıtipi ve ilçe renk kodlarını biliyordum ama tabelaların kabartmalı olduğu fotoğraflarda belli olmuyor.

Bu tabelalar direk üzerinde ama bir çoğu bina duvarları üzerindeydi. Ben şahsen bunun tabelaları bulmayı zorlaştırdığını düşünüyorum. En azından Samsun’daki gibi ağaçlara çakmıyorlar.

Street sign in İstanbul

2020-10-10T19:27:39Z

I mentioned these signs in my post about the ones in Ordu and said I’d post a picture if I ever went to İstanbul. I think I just wasted my wish.

While I didn’t get to explore İstanbul due to the pandemic, I had an opportunity to see one of these for myself, with the custom-made Kent typeface and the district color codes (as you can see, I was in the lime green Çekmeköy district). When I saw one IRL, I realized that the letters are embossed — this doesn’t show through in photos.

Although these two signs are on a post, many were on the sides of buildings. I don’t like this much as it makes them harder to find. At least they don’t nail them to trees like in Samsun though.

Add Syndication Links On Your Personal Site Using Dev.to API

2020-09-17T21:10:00Z

I recently started using the RSS publishing option to syndicate posts from my personal site to DEV. This allows people to post comments under my posts, many of which might contain useful info. To allow any readers to easily discover and participate in these discussions, I’ve added links to the dev.to copies under my posts.

(Skip to code)

I could, of course, add these links manually whenever I post, but being armed with such a powerful static site generator as Eleventy, I couldn’t possibly not automate it.

The API and the Data File

Eleventy users will be aware of how easy it is to gather all kinds of data from various APIs and put it in your site, all statically without client-side code. Our task here is exceptionally simple: Pick out the url and canonical_url properties for each article, and create a mapping from the latter to the former.

const fetch = require('node-fetch')

module.exports = fetch('https://dev.to/api/articles?username=dza')
    .then(res => res.json())
    .then(articles => articles.map(
        ({canonical_url, url}) => [canonical_url, url]))
    .then(Object.fromEntries)

Note: If you are copy-and-pasting this code, make sure to replace dza with your own dev.to username.

This will give us an object like this:

{
	"https://www.denizaksimsek.com/2020/css-additional-box-shadow/":
	    "https://dev.to/dza/css-adding-additional-box-shadows-2lob",
	...
}

Now let’s try using it in our templates:

{%if devToSyndication[page.url]%}
<section class="syndication-links">
This article is syndicated to <a class="u-syndication"
    href="{{devToSyndication[page.url]}}">DEV</a>, where you can comment on it.
</section>
{%endif%}

Small problem: the page.url property Eleventy provides us is a relative URL, whereas the URLs we got from DEV are absolute.

Sounds like a job for the URL class!

function makeRelativeUrl(url) {
	const urlObj = new URL(url)
	// you might want to append url.search and url.hash too
    // but it's unlikely, and a small amount of tech debt is
    // good for the soul
	return urlObj.pathname
}

...
({canonical_url, url}) => [makeRelativeUrl(canonical_url), url])

Now you should see links on any post that is syndicated to DEV.

Appendix: The Final Data File

const fetch = require('node-fetch')

function makeRelativeUrl(url) {
	const urlObj = new URL(url)
	return urlObj.pathname
}

module.exports = fetch('https://dev.to/api/articles?username=dza')
    .then(res => res.json())
    .then(articles => articles.map(
        ({canonical_url, url}) => [makeRelativeUrl(canonical_url), url]))
    .then(Object.fromEntries)

Çobanlı Pier, Samsun, Turkey

2020-09-13T19:15:08Z

Nothing gets me quite like city lights reflecting off water. Though it’s usually rainwater on asphalt.

A street sign in Ordu

2020-09-03T16:42:00Z

Street sign in Ordu. The layout seems inspired by street signs in İstanbul, but those are red and lack a garish logo at the bottom, instead featuring the names and color codes of the districts of İstanbul. I should post a photo if I end up going there for some reason. Update 06/01/2021: I did!

Ardeşen, Rize, Turkey

2020-09-02T22:40:22Z

A few pics from there.

CSS — Adding Additional Box Shadows

2020-09-02T12:54:44Z

When you want to add a box shadow to an element, but don’t want to override any it might already have. (Jump to code)

Less-than-amazing solutions

We could copy the box-shadow property from the element in question, paste it and append our additional shadow at the end. Of course, this requires us to know the box-shadow on the target element, which might not always be possible (say, making a reusable .highlight-glow class).

StackOverflow says to put the shadow on an absolutely-positioned pseudo-element. This leaves us with a similar problem to the one we started with — the element in question might already have styles on the ::before or ::after that conflicts with ours.

My solution

Use CSS variables to apply box shadows.

.shadowy-figure {
    --box-shadow: .5em .5em 1em #333;
    box-shadow: var(--box-shadow);
}

Later on, you can tack things on at the end of this variable, like so:

.highlight {
    box-shadow: var(--box-shadow), 0 0 .1em #fff inset;
}

One drawback is that we cannot use this technique in several classes and apply them to one element. We can solve this problem when parent-var() is a thing in CSS — if it already is by the time you read this post, do let me know!

Tip: Instantly Edit Your Eleventy Site on Github

2020-08-17T20:12:00Z

You’re looking at the blog post you made yesterday, when suddenly a typo catches your eye. What is the fastest way to fix it? (Skip to code).

Note: This tip assumes you use GitHub. It could likely be adapted easily for other Git providers.

Add the following to your base layout (note the {{}} and replace <username>/<repo> with the repo for the site):

<script>
  addEventListener('keyup', e => {
    if (e.shiftKey === true) {
      switch (e.keyCode) {
      case 69: // E
        window.location = 'https://github.com/<username>/<repo>/edit/main/{{page.inputPath}}'
        break
      }
    }
  })
</script>

When you press Shift+E, the GitHub editor will open to the current page! The switch statement is there because I used to have a few more hotkeys.

Eleventy — Dynamically Inlining Google Fonts

2020-07-24T14:33:00Z

Update 2021-02-07: I have learned since writing this post that this is a bad idea, since Google Fonts will serve different CSS based on the browser. If you want fast loading, vendor your fonts and use <link rel=preload>.

All in the name of Lighthouse scores.

When you add Google Fonts to your website by copying the link from the fonts.google.com website, you create a request chain. That is, after loading the HTML of your page, the browser then needs to request a bit of CSS from Google, and only then can it start loading the fonts themselves. A simple solution to this is to copy the CSS returned by Google and paste it into a <style> element in your page. However, I like to change fonts quite frequently, and I’d like to automate this process. This is easy with Eleventy.

A JavaScript data file

We simply fetch the CSS at build time.

// _data/googleFontsStylesheet.js

const fetch = require('node-fetch')

const url = 'the URL in the Google Fonts stylesheet link href'

module.exports = fetch(url).then(res => res.text())

And include it in our base layout.

<style type="text/css">{{googleFontsStylesheet|safe}}</style>

Enjoy your improved Lighthouse scores!

Eleventy — Using A Layout As A Partial (The Most Useful Things...)

2020-06-08T14:50:00Z

Update 2021-02-08: This article mentions things about my website that are no longer true. The technique explained, however, still works fine.

On this website, I have both a Notes page and pages for each individual note. I wanted to use the same template for both, but I ran into an issue: accessing frontmatter data.

In Eleventy, frontmatter data for the current page is merged into the data cascade and made available on the template global scope, whereas collection items have a data property. This made it hard to write templates that work with both the page object and collection items.

Solution

[…] the most useful things are usually cloaked in an air of nonchalance, even in documentation.

— YouTube user Bantu Tu, commenting on Missing Semester: Lecture 3: Editors (vim) (2020)

The solution to my problem was right there in the Eleventy docs, staring at me, its description phrased such that it couldn’t possibly be of use to anyone.

Also getCollectionItem

For completeness, a getCollectionItem filter is also included that fetches the current page from a collection.

— Eleventy docs

With this filter, all my problems were solved. I prepended the following to my note.njk template (similarly for post.njk):

{%set item = note | d(collections.note | getCollectionItem(page))%}

When using note.njk as a partial, the caller assigns the variable note. When using it as a layout, no such variable will exist and the default (d()) will be used… The beauty of this configuration is that in both situations, item will be a collection item with a data property.

One caveat is that because I’m using this as a partial, I can’t use frontmatter, and therefore can’t set a layout for my layout (maybe I could use template data files…). Instead, I use Nunjucks’ builtin template inheritance.

{%if not note%}
{%extends "base.njk"%}
{%endif%}
...
{%block content%}
{%set item = note | d(collections.note | getCollectionItem(page))%}
...
{%endblock%}

Stationery I like

2020-05-22T22:10:00Z

Reviews for things I used, and a wishlist I try to keep small.

Things I have used

Uni-ball Air Micro — Rollerball Pen

Has a tip made of some kind of plastic, super smooth to write, deep black ink with shading effect. The Micro ones have a nicer looking design.

Iggy Stationery Thin Notebooks

Great paper for the price — takes well to many pens. Subtle, sparse dot grid. Considerate design with lovely page size (bit wider than A5). Velvety cover does not go well with greasy hands. Most of the cover designs are not my style.

Globox Leather Design Notebooks

These are how you know it’s Back To School season in Turkey. As far as I can find, the only place you can get these is A-101 (TR supermarket chain). It takes well to a lot of pens — the paper quality is amazing for the price. The plain design is quite nice in my opinion, with vibrant colors or plain black/dark blue options available. I shouldn’t praise them too much, lest they become more expensive…