firehose/app/priv/blog/engineering/2026/06-26-an-example-would-be-handy-right-now.html
2026-06-27 10:20:53 +02:00

109 lines
6.5 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>06-26-an-example-would-be-handy-right-now.html</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/github.min.css" /><meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'><style> body { box-sizing: border-box; max-width: 740px; width: 100%; margin: 40px auto; padding: 0 10px; } </style><script id='MathJax-script' async src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'></script><script src='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js'></script><script>document.addEventListener('DOMContentLoaded', () => { document.body.classList.add('markdown-body'); document.querySelectorAll('pre[lang] > code').forEach((code) => { code.classList.add(code.parentElement.lang); }); document.querySelectorAll('pre > code').forEach((code) => { hljs.highlightBlock(code); }); });</script>
</head>
<body>
<h2 id="section">}</h2>
<p>Would I recommend Emacs as a writing environment? I dont know. It
works for me, mostly thanks to org-roam. And after 5 years of <em>thou
shalt not lose weeks of configuring Emacs</em>, I am occasionally making
small tweaks.</p>
<p>Admittedly, these tweaks sometimes are things that <em>should just
work out of the box (TM)</em>. For instance, I can drag and drop an
image (on my mac, at least) in an org-mode file, and then I get to
choose how the image should be linked to the document. And then I can
see it.</p>
<p>But <em>of course</em> I mean <em>for some reason</em> this does not
work in markdown-mode. Luckily <a
href="https://oxal.org/blog/powerful-emacs-hacks-paste-images-markdown/">someone
else solved this problem before me.</a>. And found that markdown mode is
extensible in how it looks for files.</p>
<p>But what does this have to do with shaving yaks, you wonder? Well, I
was annoyed that I could not drag and drop images, displaying images was
something the author figured out first, and used as part of a solution
in dropping images.</p>
<p>I have been muddling through, and was reminded I have that problem
too. But then I was stuck. I hate thinking about paths on my computer.
And for some silly reason, I made this blog in the same way as Jekyll
and other static site generators - the images are nowhere near the blog
posts. I should fix that, but not on a hot friday when Im recovering
from successful, but intensive, new work.</p>
<p><a
href="https://oxal.org/blog/powerful-emacs-hacks-image-markdown/">This
post helpfully explains how to find the right function, and what to
do</a>. And I have a link to an image <a
href="https://willemvandenende.com/blog/engineering/enabling-a-local-model-to-explain-images-in-pidev">in
my previous post</a> that will of course not show in
<code>markdown-mode</code>. Staring at the screen for a while, it hit
me.</p>
<p>## An example would be handy right about now</p>
<p>So I copied the image link, had a look at my directory structure,
enabled images (yes, that is disabled by default. I guess a
distraction-free writing environment requires the purity of no man-made
images). And then still saw nothing, because I forgot the
<code>static</code> part of the path. But this was quick iteration, no
code or tests were harmed in the making of this example:</p>
<pre><code>![Hand drawn state diagram, transcribed below in &#39;Inline session transcript&#39; as tables and part mermaid diagram.](/images/blog/2026/tdd-state-diagram-john-jagger.jpeg)
![what inline image location should be](../../../static/images/blog/2026/tdd-state-diagram-john-jagger.jpeg)</code></pre>
<p>Now I can go back to the joy of copy-paste-modifying the code from
the blogpost with my very own path.</p>
<h2 id="a-test-would-be-handy-right-about-now">A test would be handy
right about now</h2>
<p>I figured I could hack this path <em>only</em> for my blog, and use a
local configuration. After copy-pasting the code, it was time, for,
<em>le sigh</em> <em>modify</em>. I could let my animatronic rubber duck
do it, but I have decided to better understand my emacs mods, so doing
it by hand today.</p>
<p>There is a <code>substring</code> call that I dont need - my example
shows that blog post and images are both under <code>priv</code>. So I
need a bunch of <code>..</code> or be clever and use the git project
root. Since my example with <code>..</code> works, well make it work
and then maybe make it right.</p>
<p>But I dont often write tests. And there was an error in it, so going
straight to an emacs lisp file was too big a step.</p>
<h2 id="taking-a-step-back-literate-programming-to-the-rescue">Taking a
step back, literate programming to the rescue</h2>
<p>In org mode I can have my function and a call for an example in a
code block, and see the error right there. I had a wrong number of
arguments somewhere. But I cant understand the
<code>ert-deftest</code> error message.</p>
<h2 id="another-step-back">Another step back</h2>
<p>Running the function in an org-mode code block worked. the function
doesnt. I needed my rubber duck. Thank you dear reader.</p>
<p>I dont know why emacs <code>ert-deftest</code> test framework needs
so many keystrokes. I need to evaluate the buffer (the place where you
edit files) and then run the test runner separately. Org-mode worked but
also this is not where the code should end up.</p>
<p>The example code in the blogpost used <code>message</code>, so I
added that to my emacs lisp file. Now I can evaluate the buffer with a
changed function, and see the output (in the messages buffer, and in
the status line below)</p>
<figure>
<img src="/images/blog/2026/tdd-state-diagram-john-jagger.jpeg"
alt="Hand drawn state diagram, transcribed below in Inline session transcript as tables and part mermaid diagram." />
<figcaption aria-hidden="true">Hand drawn state diagram, transcribed
below in Inline session transcript as tables and part mermaid
diagram.</figcaption>
</figure>
<figure>
<img
src="../../../static/images/blog/2026/tdd-state-diagram-john-jagger.jpeg"
alt="what inline image location should be" />
<figcaption aria-hidden="true">what inline image location should
be</figcaption>
</figure>
</body>
</html>