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

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

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”. ↩︎
\n
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? ↩︎
\n
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? ↩︎
\n

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

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

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

\n \n

Building the new Hypermedia Systems

\n \n\n \n \n

\n\n \n

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:

\n
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.
\n
\n
the venerable Pandoc can output AsciiDoc, but oddly can’t read it – so we can’t compile our book to LaTeX.
\n

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.

\n
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.
\n
\n
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.
\n
\n
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.
\n
\n
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.
\n
\n
How to set the background color of a table cell
\n
\n
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.
\n
\n
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.
\n

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]\n----\nprint("Hello, world!") <1>\n----\n<1> The canonical first program in any language.\n

\n\n

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.

$\"A$

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>\n

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(\n  it /*: content(raw) */,\n  callout-display: default-callout /*: (str) => content */\n) /*: content */ = { ... }\n

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

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

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)\n

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

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 => {\n  it\n  let callouts-of-line = callouts.at(it.number - 1, default: ())\n  for callout in callouts-of-line {\n    callout-display(callout)\n  }\n}\n

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()\nlet _ = fields.remove("text")\nlet _ = fields.remove("lines")\nlet _ = fields.remove("theme")\n[#raw(..fields, new-text)#processed-label]\n

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$

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.

\n\n\n

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.

\n\n \n\n \n

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

	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)

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 \ton click log “clicked!”
`socket`	Create a Web Socket
`worker`	Create a Web Worker for asynchrnous work

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.

\n \n

The Implementation of HDB, the _hyperscript debugger

\n \n\n \n \n

\n\n \n

\n \n\n

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.

\n\n

You can set breakpoints conditionally:

\n\n\n Debug Mode\n\n\n\n

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):

\n\n

var hdb = new HDB(ctx, runtime, this);\nwindow.hdb = hdb;\n

\n\n

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:

\n\n

HDB.prototype.break = function(ctx) {\n\tvar self = this;\n\tconsole.log("%c=== HDB///_hyperscript/debugger ===", headingStyle);\n\tself.ui();\n\treturn new Promise(function (resolve, reject) {\n\t\tself.bus.addEventListener("continue", function () {\n\t\t\tif (self.ctx !== ctx) {\n\t\t\t\t// Context switch\n\t\t\t\tfor (var attr in ctx) {\n\t\t\t\t\tdelete ctx[attr];\n\t\t\t\t}\n\t\t\t\tObject.assign(ctx, self.ctx);\n\t\t\t}\n\t\t\tdelete window.hdb;\n\t\t\tresolve(self.runtime.findNext(self.cmd, self.ctx));\n\t\t}, { once: true });\n\t})\n}\n

\n\n

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:

\n\n

HDB.prototype.stepOver = function() {\n\tvar self = this;\n\tif (!self.cmd) return self.continueExec();\n

\n\n

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

\n\n

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

\n\n

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:

\n\n

if (result.type === "implicitReturn") return self.stepOut();\nif (result && result.then instanceof Function) {\n\treturn result.then(function (next) {\n\t\tself.cmd = next;\n\t\tself.bus.dispatchEvent(new Event("step"));\n\t\tself.logCommand();\n\t})\n} else if (result.halt_flag) {\n\tthis.bus.dispatchEvent(new Event("continue"));\n} else {\n\tself.cmd = result;\n\tself.bus.dispatchEvent(new Event("step"));\n\tthis.logCommand();\n}\n

\n\n

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:

\n\n

HDB.prototype.stepOut = function() {\n\tvar self = this;\n\tif (!self.ctx.meta.caller) return self.continueExec();\n\tvar callingCmd = self.ctx.meta.callingCommand;\n\tvar oldMe = self.ctx.me;\n\tself.ctx = self.ctx.meta.caller;\n

\n\n

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:

\n\n

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

\n\n

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

\n\n

transition 'color' to darkgray\nset name to getName()\nlog the name\n

\n\n

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:

\n\n

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

\n\n

HDB UI

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

\n\n

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

\n\n

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.

\n\n

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

\n\n

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:

\n\n

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

\n\n

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:

\n\n

<form class="eval-form"  _="on submit\n\tcall event.preventDefault()\n\tget the first <input/> in me\n\tcall _hyperscript(its.value, hdb.ctx)\n\tcall prettyPrint(it)\n\tput it into the <output/> in me">\n\n\t\t<input type="text" id="eval-expr" placeholder="e.g. target.innerText">\n\t\t<button type="submit">Go</button>\n\t\t<output id="eval-output"><em>The value will show up here</em></output>\n

\n\n

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:

\n\n

<h3 _="on update from hdbUI\n\t\tput 'Debugging <code>'+hdb.cmd.parent.displayName+'</code>' into me"></h3>\n<div class="code-container">\n\t<pre class="code" _="on update from hdbUI\n\t\t\t\t\t\t\tif hdb.cmd.programSource\n\t\t\t\t\t\t\t\tput highlightDebugCode() into my.innerHTML\n\t\t\t\t\t\t\t\tscrollIntoView({ block: 'nearest' }) the\n\t\t\t\t\t\t\t\tfirst .current in me"></pre>\n</div>\n

\n\n

Finally, a context panel that shows the local variables.

\n\n

<dl class="context" _="--\n\ton update from hdbUI\n\t\tset my.innerHTML to ''\n\t\trepeat for var in Object.keys(hdb.ctx) if var != 'meta'\n\t\t\tget '<dt>'+var+'<dd>'+prettyPrint(hdb.ctx[var])\n\t\t\tput it at end of me\n\t\tend\n\ton click\n\t\tget closest <dt/> to target\n\t\tlog hdb.ctx[its.innerText]"></dl>\n

\n\n

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:

\n\n

HDB.prototype.ui = function () {\n\tvar node = document.createElement('div');\n\tvar shadow = node.attachShadow({ mode: 'open' });\n\tnode.style = 'all: initial';\n\tnode.id = 'hyperscript-hdb-ui-wrapper-';\n\tshadow.innerHTML = ui;\n\tdocument.body.appendChild(node);\n\twindow.hdbUI = shadow.querySelector('.hdb');\n\t_hyperscript.processNode(hdbUI);\n}\n

\n\n

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!

\n\n \n\n \n \n

\n\t\n\t{%for silo, link in syndicationLinks%}\n\t\t{{silo}}\n\t\t{%if not loop.last%} | {%endif%}\n\t{%endfor%}\n~~~\n\nI think that computed frontmatter gives a nice balance of logic-less* and\nlogic-full templates. :sidenote[Logicless templates: For people who will never\nneed to make an HTML monthly calendar!]\n\n[endorsed]: https://twitter.com/zachleat/status/1340057504567488513\n[computed-data-docs]:\thttps://www.11ty.dev/docs/data-computed/\n[js-frontmatter-docs]:\thttps://www.11ty.dev/docs/data-frontmatter/#javascript-front-matter\n","url":"https://denizaksimsek.com/2020/coffeescript-frontmatter/","date_published":"2020-10-16T17:12:00Z"},{"id":"/2020/istanbul-sokak-tabelasi/","title":"İstanbul'da bir sokak tabelası","content_html":"\n\n\n\n\n\nİstanbul'da bir sokak tabelası\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \t\n \n \n \n\nİstanbul'da bir sokak tabelası\n\n\n\n

\n \n

İstanbul'da bir sokak tabelası

\n 🌐\n \n English\n

\n \n\n \n \n

\n\n \n

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.

$\"Bir$

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.

\n\n \n\n \n

\n\n\n","content_text":"[Ordu'daki tabelanın olduğu yazıda][ordu-street-sign] İstanbul'a yolum düşerse oradakilerin resmini paylaşırım diye yazmıştım. Başka bir şey dileseymişim.\n\n[![<%= it.photo.alt %>](<%= it.photo.src %>)](<%= it.photo.src %>)\n\nPandemi 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.\n\nBu 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.\n\n[ordu-street-sign]:\t\t/2020/ordu-street-sign/\n","url":"https://denizaksimsek.com/2020/istanbul-sokak-tabelasi/","image":"https://denizaksimsek.com/assets/photos/IMG20201007085906-02.jpeg","date_published":"2020-10-10T19:27:39Z"},{"id":"/2020/istanbul-street-sign/","title":"Street sign in İstanbul","content_html":"\n\n\n\n\n\nStreet sign in İstanbul\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \t\n \n \n \n\nStreet sign in İstanbul\n\n\n\n

\n \n

Street sign in İstanbul

\n 🌐\n \n Türkçe\n

\n \n\n \n \n

\n\n \n

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.

$\"A$

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.

\n\n \n\n \n

\n\n\n","content_text":"I mentioned these signs in [my post about the ones in Ordu][ordu-street-sign] and said I'd post a picture if I ever went to İstanbul. I think I just wasted my wish.\n\n[![<%= it.photo.alt %>](<%= it.photo.src %>)](<%= it.photo.src %>)\n\nWhile 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_{lang=tr} 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.\n\nAlthough 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.\n\n[ordu-street-sign]:\t\t/2020/ordu-street-sign/\n","url":"https://denizaksimsek.com/2020/istanbul-street-sign/","image":"https://denizaksimsek.com/assets/photos/IMG20201007085906-02.jpeg","date_published":"2020-10-10T19:27:39Z"},{"id":"/2020/devto-syndication-links/","title":"Add Syndication Links On Your Personal Site Using Dev.to API","content_html":"\n\n\n\n\n\nAdd Syndication Links On Your Personal Site Using Dev.to API\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n \n \n\nAdd Syndication Links On Your Personal Site Using Dev.to API\n\n\n\n

\n \n

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

\n \n\n \n \n

\n\n \n

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')\n\nmodule.exports = fetch('https://dev.to/api/articles?username=dza')\n    .then(res => res.json())\n    .then(articles => articles.map(\n        ({canonical_url, url}) => [canonical_url, url]))\n    .then(Object.fromEntries)\n

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:

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

Now let’s try using it in our templates:

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

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) {\n\tconst urlObj = new URL(url)\n\t// you might want to append url.search and url.hash too\n    // but it's unlikely, and a small amount of tech debt is\n    // good for the soul\n\treturn urlObj.pathname\n}\n\n...\n({canonical_url, url}) => [makeRelativeUrl(canonical_url), url])\n

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

Appendix: The Final Data File

const fetch = require('node-fetch')\n\nfunction makeRelativeUrl(url) {\n\tconst urlObj = new URL(url)\n\treturn urlObj.pathname\n}\n\nmodule.exports = fetch('https://dev.to/api/articles?username=dza')\n    .then(res => res.json())\n    .then(articles => articles.map(\n        ({canonical_url, url}) => [makeRelativeUrl(canonical_url), url]))\n    .then(Object.fromEntries)\n

\n\n \n\n \n \n

\n\n\n","content_text":"I recently started using the [RSS publishing][rsspub] 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.\n\n([Skip to code](#the-code))\n\nI 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.\n\n## The API and the Data File\n\nEleventy 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.\n\n~~~js\nconst fetch = require('node-fetch')\n\nmodule.exports = fetch('https://dev.to/api/articles?username=dza')\n .then(res => res.json())\n .then(articles => articles.map(\n ({canonical_url, url}) => [canonical_url, url]))\n .then(Object.fromEntries)\n~~~\n\n**Note:** If you are copy-and-pasting this code, make sure to replace `dza` with your own dev.to username.\n\nThis will give us an object like this:\n\n~~~json\n{\n\t\"https://www.denizaksimsek.com/2020/css-additional-box-shadow/\":\n\t \"https://dev.to/dza/css-adding-additional-box-shadows-2lob\",\n\t...\n}\n~~~\n\nNow let's try using it in our templates:\n\n~~~liquid\n{%if devToSyndication[page.url]%}\n

\nThis article is syndicated to DEV, where you can comment on it.\n

\n{%endif%}\n~~~\n\nSmall problem: the `page.url` property Eleventy provides us is a relative URL, whereas the URLs we got from DEV are absolute.\n\nSounds like a job for the `URL` class!\n\n~~~js\nfunction makeRelativeUrl(url) {\n\tconst urlObj = new URL(url)\n\t// you might want to append url.search and url.hash too\n // but it's unlikely, and a small amount of tech debt is\n // good for the soul\n\treturn urlObj.pathname\n}\n\n...\n({canonical_url, url}) => [makeRelativeUrl(canonical_url), url])\n~~~\n\nNow you should see links on any post that is syndicated to DEV.\n\n## Appendix: The Final Data File {#the-code}\n\n~~~js\nconst fetch = require('node-fetch')\n\nfunction makeRelativeUrl(url) {\n\tconst urlObj = new URL(url)\n\treturn urlObj.pathname\n}\n\nmodule.exports = fetch('https://dev.to/api/articles?username=dza')\n .then(res => res.json())\n .then(articles => articles.map(\n ({canonical_url, url}) => [makeRelativeUrl(canonical_url), url]))\n .then(Object.fromEntries)\n~~~\n\n[rsspub]: https://dev.to/settings/publishing-from-rss\n","url":"https://denizaksimsek.com/2020/devto-syndication-links/","date_published":"2020-09-17T21:10:00Z"},{"id":"/2020/cobanli-pier/","title":"Çobanlı Pier, Samsun, Turkey","content_html":"\n\n\n\n\n\nÇobanlı Pier, Samsun, Turkey\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \t\n \n \n \n\nÇobanlı Pier, Samsun, Turkey\n\n\n\n

\n \n

Çobanlı Pier, Samsun, Turkey

\n \n\n \n \n

\n\n \n

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

$\"Late$

\n\n \n\n \n

\n\n\n","content_text":"Nothing gets me quite like city lights reflecting off water. Though it's usually rainwater on asphalt.\n\n[![<%= it.photo.alt %>](<%= it.photo.src %>)](<%= it.photo.src %>)\n","url":"https://denizaksimsek.com/2020/cobanli-pier/","image":"https://denizaksimsek.com/assets/photos/IMG20200913191508.jpg","date_published":"2020-09-13T19:15:08Z"},{"id":"/2020/ordu-street-sign/","title":"A street sign in Ordu","content_html":"\n\n\n\n\n\nA street sign in Ordu\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \t\n \n \n \n\nA street sign in Ordu\n\n\n\n

\n \n

A street sign in Ordu

\n \n\n \n \n

\n\n \n

$\"Old,$

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!

\n\n \n\n \n

\n\n\n","content_text":"[![<%= it.photo.alt %>](<%= it.photo.src %>)](<%= it.photo.src %>)\n\nStreet 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!](https://denizaksimsek.com/2020/istanbul-street-sign/)\n","url":"https://denizaksimsek.com/2020/ordu-street-sign/","image":"https://denizaksimsek.com/assets/photos/IMG20200903164220.jpeg","date_published":"2020-09-03T16:42:00Z"},{"id":"/2020/ardesen-rize-tr/","title":"Ardeşen, Rize, Turkey","content_html":"\n\n\n\n\n\nArdeşen, Rize, Turkey\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \t\n \n \n \n\nArdeşen, Rize, Turkey\n\n\n\n

\n \n

Ardeşen, Rize, Turkey

\n \n\n \n \n

\n\n \n

A few pics from there.

$\"Sunset$

$\"The$

\n\n \n\n \n

\n\n\n","content_text":"A few pics from there.\n\n[![<%= it.photo.alt %>](<%= it.photo.src %>)](<%= it.photo.src %>)\n\n[![The dark clouds are painted yellow by the sun, the sea is set ablaze](/assets/photos/IMG20200902180736.jpg)](/assets/photos/IMG20200902180736.jpg)\n\n[![The beach is covered in rocks as far as the eyes can see, and even further](/assets/photos/IMG20200902184220.jpg)](/assets/photos/IMG20200902184220.jpg)\n","url":"https://denizaksimsek.com/2020/ardesen-rize-tr/","image":"https://denizaksimsek.com/assets/photos/IMG20200825184721.jpg","date_published":"2020-09-02T22:40:22Z"},{"id":"/2020/css-additional-box-shadow/","title":"CSS — Adding Additional Box Shadows","content_html":"\n\n\n\n\n\nCSS — Adding Additional Box Shadows\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n \n \n\nCSS — Adding Additional Box Shadows\n\n\n\n

\n \n

CSS — Adding Additional Box Shadows

\n \n\n \n \n

\n\n \n

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 {\n    --box-shadow: .5em .5em 1em #333;\n    box-shadow: var(--box-shadow);\n}\n

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

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

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!

\n\n \n\n \n \n

\n\n\n","content_text":"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](#the-code))\n\n## Less-than-amazing solutions\n\nWe 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).\n\n[StackOverflow says to put the shadow on an absolutely-positioned pseudo-element](stackoverflow-says). 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.\n\n## My solution {#the-code}\n\nUse CSS variables to apply box shadows.\n\n~~~css\n.shadowy-figure {\n --box-shadow: .5em .5em 1em #333;\n box-shadow: var(--box-shadow);\n}\n~~~\n\nLater on, you can tack things on at the end of this variable, like so:\n\n~~~css\n.highlight {\n box-shadow: var(--box-shadow), 0 0 .1em #fff inset;\n}\n~~~\n\nOne 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()`](parent-var) is a thing in CSS --- if it already is by the time you read this post, do let me know!\n\n[stackoverflow-says]: https://stackoverflow.com/a/11486224\n[parent-var]: https://lists.w3.org/Archives/Public/www-style/2012Aug/0891.html\n","url":"https://denizaksimsek.com/2020/css-additional-box-shadow/","date_published":"2020-09-02T12:54:44Z"},{"id":"/2020/instant-edit-11ty/","title":"Tip: Instantly Edit Your Eleventy Site on Github","content_html":"\n\n\n\n\n\nTip: Instantly Edit Your Eleventy Site on Github\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n \n \n\nTip: Instantly Edit Your Eleventy Site on Github\n\n\n\n

\n \n

Tip: Instantly Edit Your Eleventy Site on Github

\n \n\n \n \n

\n\n \n

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

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.

\n\n \n\n \n \n

\n\n\n","content_text":"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](#the-code)).\n\n**Note:** This tip assumes you use GitHub. It could likely be adapted easily for other Git providers.\n\nAdd the following to your base layout (note the `{{}}` and replace `/` with the repo for the site):\n\n~~~html\n\n~~~\n\nWhen 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.\n","url":"https://denizaksimsek.com/2020/instant-edit-11ty/","date_published":"2020-08-17T20:12:00Z"},{"id":"/2020/11ty-inline-google-fonts/","title":"Eleventy — Dynamically Inlining Google Fonts","content_html":"\n\n\n\n\n\nEleventy — Dynamically Inlining Google Fonts\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n \n \n\nEleventy — Dynamically Inlining Google Fonts\n\n\n\n

\n \n

Eleventy — Dynamically Inlining Google Fonts

\n \n\n \n \n

\n\n \n

\n \n

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>.

\n\n

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\n\nconst fetch = require('node-fetch')\n\nconst url = 'the URL in the Google Fonts stylesheet link href'\n\nmodule.exports = fetch(url).then(res => res.text())\n

And include it in our base layout.

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

Enjoy your improved Lighthouse scores!

\n\n \n\n \n \n

\n\n\n","content_text":"::: Warning :::\n**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 ``{.language-html}.\n:::::::::::::::\n\nAll in the name of Lighthouse scores.\n\nWhen 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 `\n~~~\n\nEnjoy your improved Lighthouse scores!\n","url":"https://denizaksimsek.com/2020/11ty-inline-google-fonts/","date_published":"2020-07-24T14:33:00Z"},{"id":"/2020/11ty-layout-as-partial/","title":"Eleventy — Using A Layout As A Partial (The Most Useful Things...)","content_html":"\n\n\n\n\n\nEleventy — Using A Layout As A Partial (The Most Useful Things...)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n \n \n\nEleventy — Using A Layout As A Partial (The Most Useful Things...)\n\n\n\n

\n \n

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

\n \n\n \n \n

\n\n \n

\n \n

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

\n\n

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

\n\n

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

\n\t— YouTube user\n\tBantu Tu,\n\tcommenting on\n\tMissing Semester: Lecture 3: Editors (vim) (2020)\n\t\n

\n\n

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.

\n\n

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

— Eleventy docs

\n\n

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))%}\n

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%}\n{%extends "base.njk"%}\n{%endif%}\n...\n{%block content%}\n{%set item = note | d(collections.note | getCollectionItem(page))%}\n...\n{%endblock%}\n

\n\n \n\n \n \n

\n\n\n","content_text":"::: Warning ::: \n**Update 2021-02-08:** This article mentions things about my website that are no longer true. The technique explained, however, still works fine.\n:::::::::::::::\n\nOn 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.\n\nIn 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.\n\n## Solution\n\n::: fig\n> [...] the most useful things are usually cloaked in an air of nonchalance, even in documentation.\n\n

\n\t— YouTube user\n\tBantu Tu,\n\tcommenting on\n\tMissing Semester: Lecture 3: Editors (vim) (2020)\n\t\n

\n:::\n\nThe 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.\n\n::: fig\n> ### Also `getCollectionItem`\n>\n> For completeness, a `getCollectionItem` filter is also included that fetches the current page from a collection.\n\n

— Eleventy docs

\n:::\n\nWith this filter, all my problems were solved. I prepended the following to my `note.njk` template (similarly for `post.njk`):\n\n~~~liquid\n{%set item = note | d(collections.note | getCollectionItem(page))%}\n~~~\n\nWhen 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.\n\nOne 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][].\n\n~~~liquid\n{%if not note%}\n{%extends \"base.njk\"%}\n{%endif%}\n...\n{%block content%}\n{%set item = note | d(collections.note | getCollectionItem(page))%}\n...\n{%endblock%}\n~~~\n\n[data cascade]: https://www.11ty.dev/docs/data-cascade/\n[Bantu Tu]: https://www.youtube.com/channel/UCjknfwYaYZvv94AjL10NO0Q\n[missing-semester]: https://www.youtube.com/watch?v=a6Q8Na575qc\n[Eleventy docs]: https://www.11ty.dev/docs/filters/collection-items/#also-getcollectionitem\n[also-getcollectionitem]: https://www.11ty.dev/docs/filters/collection-items/\\#also-getcollectionitem\n[template inheritance]: https://mozilla.github.io/nunjucks/templating.html#template-inheritance\n","url":"https://denizaksimsek.com/2020/11ty-layout-as-partial/","date_published":"2020-06-08T14:50:00Z"},{"id":"/2020/stationery-i-like/","title":"Stationery I like","content_html":"\n\n\n\n\n\nStationery I like\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n \n \n\nStationery I like\n\n\n\n

\n \n

Stationery I like

\n \n\n \n \n

\n\n \n

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…

\n \n

Things I want (curse you, JetPens)

Pen

Notebooks

Sorta Notebinder

Pen Cases

Miscellaneous

Raymay Pencut Mini Scissors

\n\n \n\n \n

\n\n\n","content_text":"Reviews for things I used, and a wishlist I try to keep small.\n\n## Things I have used\n\n\n### [Uni-ball Air Micro --- Rollerball Pen](https://www.uniball.com.tr/urunler/roller/uniball-air/uba-188-m)\n\nHas 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.\n\n### [Iggy Stationery Thin Notebooks](https://www.studioiggy.com/collections/i%CC%87nce-defterler)\n\nGreat 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.\n\n### [Globox Leather Design Notebooks](http://www.smartofis.com.tr/kagit-grubu/Suni-deri-not-defteri)\n\nThese 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...\n\n \n\n## Things I want (curse you, JetPens)\n\n\n### Pen\n\n- [Pilot Multi Ball](https://www.jetpens.com/Pilot-Multi-Ball-Rollerball-Pen-Fine-Black/pd/2760)\n- [Kuretake Fudegokochi Brush Pen](https://www.jetpens.com/Kuretake-Fudegokochi-Brush-Pen-Extra-Fine-Black/pd/2659)\n- [Pentel Artist Brush Sign Pen](https://www.wellappointeddesk.com/2019/11/pen-review-pentel-artist-brush-sign-pen/)\n\n### Notebooks\n\n- [Sorta Notebinder](https://www.sorta.la/)\n\n### Pen Cases\n\n- [Sonic Sma Sta Standing Pen Case](https://www.jetpens.com/Sonic-Sma-Sta-Standing-Pen-Cases/ct/4885)\n- [Lihit Lab Smart Fit Carrying Pouch --- A6](https://www.wellappointeddesk.com/2019/03/review-lihit-lab-smart-fit-carrying-pouch-a6/)\n- [Nakabayashi Lifestyle Tool Wall Box](https://www.jetpens.com/Nakabayashi-Lifestyle-Tool-Wall-Box-S-Kraft/pd/22304)\n\n### Miscellaneous\n\n- [Raymay Pencut Mini Scissors](https://www.jetpens.com/Raymay-Pencut-Mini-Scissors/ct/1623)\n","url":"https://denizaksimsek.com/2020/stationery-i-like/","date_published":"2020-05-22T22:10:00Z"}]}

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

Wait… aren’t AI models data too?

Training materials

Create systemd unit

Install Tailscale binaries

Background (feel free to skip)

Concepts

Scheme

Example

Rationale

Background

Language picker

Fallback

Selecting language for individual posts

why: boring life stuff

how: exciting computer stuff

vala is pretty cool, imo

flatpacking haskell

what: thermonuclear war stuff

Why change what works?

Typst

Porting the manuscript

The code blocks

code-callouts.typ: a Hypermedia Systems literate experience

The index

The print book

The web book

Conclusion

Background

Layout

Text

XXMLPathPath Language

document.evaluate

Termux

PRoot-Distro

Summary

Hardware

Resource Expansion

Resource Traversal

Why I want to do it

Looking upon my own works and despairing

ijo nasa li pona e mi

Event listeners

Property access

CSS literals

Sigils

Array operations

Finding elements

Other top-level features

Command index

…

Why is scalability desired?

Write to rewrite

Conclusion

Toolbx

In which I have to have my GUIs

Alpine and similar

React and similar

Alpine and similar

React and similar

The (Un)finished Product

Implementation

Turning the keys

Stepping Over and Out

HDB UI

The End

'+hdb.cmd.parent.displayName+'' into me\">

Server-Side App

Single-Page App

Progressively Enhanced App

htmx

Enums in Javascript

Enums in Go

Markdown with Frontmatter

Eleventy Frontmatter

CoffeeScript All The Time!

The API and the Data File

Appendix: The Final Data File

Less-than-amazing solutions

My solution

Also `getCollectionItem`