From 83e74bc2df85ef151bf6e0acddc7310200e3d2f8 Mon Sep 17 00:00:00 2001
From: Wade Mealing <wmealing@gmail.com>
Date: Sun, 8 Sep 2024 19:39:38 +1000
Subject: [PATCH] Using my new mono layout, nobody but me reads this anyway.
---
custom-software-errors.html | 128 +++++-----
index.css | 457 ++++++++++++++++++++++++++++++++++++
index.html | 157 ++++++++-----
reset.css | 48 ++++
setupfile.org | 6 +-
5 files changed, 667 insertions(+), 129 deletions(-)
create mode 100644 index.css
create mode 100644 reset.css
diff --git a/custom-software-errors.html b/custom-software-errors.html
index df63508..0972636 100644
--- a/custom-software-errors.html
+++ b/custom-software-errors.html
@@ -3,12 +3,12 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
-<!-- 2024-05-14 Tue 20:43 -->
+<!-- 2024-09-08 Sun 19:37 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Higher quality errors for custom software.</title>
<meta name="generator" content="Org Mode" />
-<style type="text/css" >
+<style>
#content { max-width: 60em; margin: auto; }
.title { text-align: center;
margin-bottom: .2em; }
@@ -192,9 +192,11 @@
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { }
</style>
-<link rel="stylesheet" href="tufte.css" type="text/css" />
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+<link rel="stylesheet" href="reset.css">
+<link rel="stylesheet" href="index.css">
<meta name="author" content="Wade Mealing" />
-<meta name="theme-color" content="#fffff8"/>
<meta name="description" content="Seriously useful error messages" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; img-src https://*; child-src 'none';" />
</head>
@@ -202,9 +204,9 @@
<div id="content" class="content">
<h1 class="title">Higher quality errors for custom software.</h1>
-<div id="outline-container-org0950217" class="outline-2">
-<h2 id="org0950217">Summary:</h2>
-<div class="outline-text-2" id="text-org0950217">
+<div id="outline-container-orgbbf0f14" class="outline-2">
+<h2 id="orgbbf0f14">Summary:</h2>
+<div class="outline-text-2" id="text-orgbbf0f14">
<p>
In-house business software is a very different beast; it is usually target-built to solve
a very specific problem. Company bean counters encourage buying off-the-shelf software when it is
@@ -219,15 +221,15 @@ <h2 id="org0950217">Summary:</h2>
</p>
<p>
-In the company I work at, these improved error helpers are called "Wilson-Hoffman" error messages.
+In the company I work at, these improved error helpers are called "Wilbert-Hofmann" error messages.
It would be great to see these error types in wider use.
</p>
</div>
</div>
-<div id="outline-container-org05dd894" class="outline-2">
-<h2 id="org05dd894">Introduction</h2>
-<div class="outline-text-2" id="text-org05dd894">
+<div id="outline-container-org748edd0" class="outline-2">
+<h2 id="org748edd0">Introduction</h2>
+<div class="outline-text-2" id="text-org748edd0">
<p>
Effective resolution of errors plays a pivotal role in shaping the user experience within
software applications. The content of the messages, along with information, should not only
@@ -243,9 +245,9 @@ <h2 id="org05dd894">Introduction</h2>
</p>
</div>
-<div id="outline-container-orga0bb089" class="outline-3">
-<h3 id="orga0bb089">The basics.</h3>
-<div class="outline-text-3" id="text-orga0bb089">
+<div id="outline-container-org6ff0daa" class="outline-3">
+<h3 id="org6ff0daa">The basics.</h3>
+<div class="outline-text-3" id="text-org6ff0daa">
<p>
Rather than re-iterate what has already been said, Google has a very good course, in the <a href="https://developers.google.com/tech-writing/error-messages/error-handling">technical writing</a>
category, which focuses on writing better error messages. It also contains excellent advice for programmers
@@ -278,9 +280,9 @@ <h3 id="orga0bb089">The basics.</h3>
</div>
</div>
-<div id="outline-container-orgfd38c5f" class="outline-2">
-<h2 id="orgfd38c5f">Improved example.</h2>
-<div class="outline-text-2" id="text-orgfd38c5f">
+<div id="outline-container-orgdbeba2b" class="outline-2">
+<h2 id="orgdbeba2b">Improved example.</h2>
+<div class="outline-text-2" id="text-orgdbeba2b">
<p>
So, let's provide a before and after. This particular example was chosen as a bland and boring
example so we wouldn't focus on the error itself.
@@ -291,10 +293,10 @@ <h2 id="orgfd38c5f">Improved example.</h2>
</p>
</div>
-<div id="outline-container-org2fa8d0d" class="outline-3">
-<h3 id="org2fa8d0d">Before:</h3>
-<div class="outline-text-3" id="text-org2fa8d0d">
-<pre class="example" id="org09ea1a9">
+<div id="outline-container-org59fc6f9" class="outline-3">
+<h3 id="org59fc6f9">Before:</h3>
+<div class="outline-text-3" id="text-org59fc6f9">
+<pre class="example" id="org515de4c">
|--------------------------------------------------------------|
| ⚠️ Error: |
| |
@@ -311,10 +313,10 @@ <h3 id="org2fa8d0d">Before:</h3>
</div>
</div>
-<div id="outline-container-orgb8f96f5" class="outline-3">
-<h3 id="orgb8f96f5">After:</h3>
-<div class="outline-text-3" id="text-orgb8f96f5">
-<pre class="example" id="org64740f7">
+<div id="outline-container-orgaea7ce1" class="outline-3">
+<h3 id="orgaea7ce1">After:</h3>
+<div class="outline-text-3" id="text-orgaea7ce1">
+<pre class="example" id="org4d8492b">
+------------------------------------------------------------------------+
| ⚠️ Error #90210C |
| |
@@ -367,9 +369,9 @@ <h3 id="orgb8f96f5">After:</h3>
</p>
<div class="org-src-container">
-<pre class="src src-html"><<span style="color: #F07010;">a</span> <span style="color: #FF4A00;">href</span>=<span style="color: #FF6A00;">"https://<organization>.com/documentation/<error-code>/"</span>>
+<pre class="src src-html"><<span style="color: #e78c45;">a</span> <span style="color: #e7c547;">href</span>=<span style="color: #70c0b1;">"https://<organization>.com/documentation/<error-code>/"</span>>
Crowdsourced Docs.
-</<span style="color: #F07010;">a</span>>
+</<span style="color: #e78c45;">a</span>>
</pre>
</div>
@@ -394,9 +396,9 @@ <h3 id="orgb8f96f5">After:</h3>
</p>
<div class="org-src-container">
-<pre class="src src-html"><<span style="color: #F07010;">a</span> <span style="color: #FF4A00;">href</span>=<span style="color: #FF6A00;">"https://<organization>.slack.com/messages/<channel>/"</span>>
+<pre class="src src-html"><<span style="color: #e78c45;">a</span> <span style="color: #e7c547;">href</span>=<span style="color: #70c0b1;">"https://<organization>.slack.com/messages/<channel>/"</span>>
Approvals Team Slack
-</<span style="color: #F07010;">a</span>>
+</<span style="color: #e78c45;">a</span>>
</pre>
</div>
@@ -405,7 +407,7 @@ <h3 id="orgb8f96f5">After:</h3>
</p>
<div class="org-src-container">
-<pre class="src src-html"><<span style="color: #F07010;">a</span> <span style="color: #FF4A00;">href</span>=<span style="color: #FF6A00;">"mailto:approvals@example.com?subject=This loan needs exposition&body=Please expedite loan id: 12345 because [insert reason here] "</span>>Email approvals</<span style="color: #F07010;">a</span>>
+<pre class="src src-html"><<span style="color: #e78c45;">a</span> <span style="color: #e7c547;">href</span>=<span style="color: #70c0b1;">"mailto:approvals@example.com?subject=This loan needs exposition&body=Please expedite loan id: 12345 because [insert reason here] "</span>>Email approvals</<span style="color: #e78c45;">a</span>>
</pre>
</div>
@@ -464,9 +466,9 @@ <h3 id="orgb8f96f5">After:</h3>
</div>
</div>
-<div id="outline-container-org436df36" class="outline-2">
-<h2 id="org436df36">Introducing change</h2>
-<div class="outline-text-2" id="text-org436df36">
+<div id="outline-container-orge2efdab" class="outline-2">
+<h2 id="orge2efdab">Introducing change</h2>
+<div class="outline-text-2" id="text-orge2efdab">
<p>
Rolling changes like this into an existing code base will likely be complicated; one possible
solution is incremental improvements.
@@ -479,9 +481,9 @@ <h2 id="org436df36">Introducing change</h2>
</p>
</div>
-<div id="outline-container-org3530f24" class="outline-3">
-<h3 id="org3530f24">Incremental Improvements</h3>
-<div class="outline-text-3" id="text-org3530f24">
+<div id="outline-container-org0c5f230" class="outline-3">
+<h3 id="org0c5f230">Incremental Improvements</h3>
+<div class="outline-text-3" id="text-org0c5f230">
<p>
Incremental improvement of error messages involves advancing beyond basic error handling. Not
all error conditions will benefit from the additional information. However, if there is an "error
@@ -491,9 +493,9 @@ <h3 id="org3530f24">Incremental Improvements</h3>
</div>
</div>
-<div id="outline-container-orgfc42d9b" class="outline-3">
-<h3 id="orgfc42d9b">Error Categories.</h3>
-<div class="outline-text-3" id="text-orgfc42d9b">
+<div id="outline-container-org4f1e6cd" class="outline-3">
+<h3 id="org4f1e6cd">Error Categories.</h3>
+<div class="outline-text-3" id="text-org4f1e6cd">
<p>
Introducing a common "error category" simplifies the initial rollout of the new error fields. By
grouping related issues, error categories provide a simplified reference point, facilitating
@@ -508,9 +510,9 @@ <h3 id="orgfc42d9b">Error Categories.</h3>
</div>
</div>
-<div id="outline-container-orgf372c46" class="outline-3">
-<h3 id="orgf372c46">Unique Error Identifier</h3>
-<div class="outline-text-3" id="text-orgf372c46">
+<div id="outline-container-orga8a1ae4" class="outline-3">
+<h3 id="orga8a1ae4">Unique Error Identifier</h3>
+<div class="outline-text-3" id="text-orga8a1ae4">
<p>
By assigning distinct identifiers to each error condition, developers establish
a standardized method for identifying, tracking, and managing errors throughout the
@@ -534,33 +536,34 @@ <h3 id="orgf372c46">Unique Error Identifier</h3>
</div>
</div>
-<div id="outline-container-orgb8b06b5" class="outline-3">
-<h3 id="orgb8b06b5">Online References (hyperlinks)</h3>
-<div class="outline-text-3" id="text-orgb8b06b5">
+<div id="outline-container-org670612a" class="outline-3">
+<h3 id="org670612a">Online References (hyperlinks)</h3>
+<div class="outline-text-3" id="text-org670612a">
<p>
This is more than just linking to a wiki page; error pages could link to specific URI's of company
-resources such as Slack, shared drives, or source repositories.
+resources such as Slack, shared drives, or source repositories. If your userbase is sufficiently
+technical it can also be a link to the source code for more capable users to self-diagnose the root cause.
</p>
</div>
</div>
-<div id="outline-container-org603d208" class="outline-3">
-<h3 id="org603d208">Extending this idea.</h3>
-<div class="outline-text-3" id="text-org603d208">
+<div id="outline-container-org5813d01" class="outline-3">
+<h3 id="org5813d01">Extending this idea.</h3>
+<div class="outline-text-3" id="text-org5813d01">
<p>
I consider these 4 basics to be the first generation of improvements. You will find new
and useful improvements; do not be afraid to use them.
</p>
<p>
-These 4 basic features are called the "wilson-hoffman" errors in the company where I work.
+These "Wilbert-Hofmann" error messages are used heavily in the group of the company where I <a href="https://gitlab.com/cki-project/kernel-workflow/">work</a>.
</p>
</div>
</div>
-<div id="outline-container-orgfb544e8" class="outline-3">
-<h3 id="orgfb544e8">Generating documentation from error conditions for support staff.</h3>
-<div class="outline-text-3" id="text-orgfb544e8">
+<div id="outline-container-org675cdd7" class="outline-3">
+<h3 id="org675cdd7">Generating documentation from error conditions for support staff.</h3>
+<div class="outline-text-3" id="text-org675cdd7">
<p>
Software should generate a list of error codes and their reasons for any of the support
staff who may be dealing with the area of code.
@@ -576,9 +579,9 @@ <h3 id="orgfb544e8">Generating documentation from error conditions for support s
</div>
</div>
-<div id="outline-container-org9325933" class="outline-3">
-<h3 id="org9325933">Error analysis.</h3>
-<div class="outline-text-3" id="text-org9325933">
+<div id="outline-container-org9ce9d2c" class="outline-3">
+<h3 id="org9ce9d2c">Error analysis.</h3>
+<div class="outline-text-3" id="text-org9ce9d2c">
<p>
Analysis of the error messages
</p>
@@ -593,9 +596,9 @@ <h3 id="org9325933">Error analysis.</h3>
</div>
</div>
-<div id="outline-container-orgbb97a74" class="outline-2">
-<h2 id="orgbb97a74">Conclusion</h2>
-<div class="outline-text-2" id="text-orgbb97a74">
+<div id="outline-container-org668f5e3" class="outline-2">
+<h2 id="org668f5e3">Conclusion</h2>
+<div class="outline-text-2" id="text-org668f5e3">
<p>
The suggestions presented in this document serve as fundamental examples of extending common error
conditions to enhance the user experience and streamline error management. However, it's essential for
@@ -611,13 +614,14 @@ <h2 id="orgbb97a74">Conclusion</h2>
</div>
</div>
-<div id="outline-container-org0513be3" class="outline-2">
-<h2 id="org0513be3">Resources:</h2>
-<div class="outline-text-2" id="text-org0513be3">
+<div id="outline-container-orge4f504c" class="outline-2">
+<h2 id="orge4f504c">Resources:</h2>
+<div class="outline-text-2" id="text-orge4f504c">
<p>
<a href="https://www.smashingmagazine.com/2022/08/error-messages-ux-design/">https://www.smashingmagazine.com/2022/08/error-messages-ux-design/</a>
<a href="https://www.linkedin.com/pulse/how-write-good-error-messages-saadia-minhas">https://www.linkedin.com/pulse/how-write-good-error-messages-saadia-minhas</a>
<a href="https://uxwritinghub.com/error-message-examples/">https://uxwritinghub.com/error-message-examples/</a>
+<a href="https://gitlab.com/cki-project/kernel-workflow/">https://gitlab.com/cki-project/kernel-workflow/</a>
</p>
</div>
</div>
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..abddf45
--- /dev/null
+++ b/index.css
@@ -0,0 +1,457 @@
+@import url('https://fonts.cdnfonts.com/css/jetbrains-mono-2');
+
+:root {
+ --font-family: "JetBrains Mono", monospace;
+ --line-height: 1.20rem;
+ --border-thickness: 2px;
+ --text-color: #000;
+ --text-color-alt: #666;
+ --background-color: #fff;
+ --background-color-alt: #eee;
+
+ --font-weight-normal: 500;
+ --font-weight-medium: 600;
+ --font-weight-bold: 800;
+
+ font-family: var(--font-family);
+ font-optical-sizing: auto;
+ font-weight: var(--font-weight-normal);
+ font-style: normal;
+ font-variant-numeric: tabular-nums lining-nums;
+ font-size: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text-color: #fff;
+ --text-color-alt: #aaa;
+ --background-color: #000;
+ --background-color-alt: #111;
+ }
+}
+
+* {
+ box-sizing: border-box;
+}
+
+
+* + * {
+ margin-top: var(--line-height);
+}
+
+html {
+ display: flex;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ flex-direction: column;
+ align-items: center;
+ background: var(--background-color);
+ color: var(--text-color);
+}
+
+body {
+ position: relative;
+ width: 100%;
+ margin: 0;
+ padding: var(--line-height) 2ch;
+ max-width: calc(min(80ch, round(down, 100%, 1ch)));
+ line-height: var(--line-height);
+ overflow-x: hidden;
+}
+
+@media screen and (max-width: 480px) {
+ :root {
+ font-size: 14px;
+ }
+ body {
+ padding: var(--line-height) 1ch;
+ }
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-weight: var(--font-weight-bold);
+ margin: calc(var(--line-height) * 2) 0 var(--line-height);
+ line-height: var(--line-height);
+}
+
+h1 {
+ font-size: 2rem;
+ line-height: calc(2 * var(--line-height));
+ margin-bottom: calc(var(--line-height) * 2);
+ text-transform: uppercase;
+}
+h2 {
+ font-size: 1rem;
+ text-transform: uppercase;
+}
+
+hr {
+ position: relative;
+ display: block;
+ height: var(--line-height);
+ margin: calc(var(--line-height) * 1.5) 0;
+ border: none;
+ color: var(--text-color);
+}
+hr:after {
+ display: block;
+ content: "";
+ position: absolute;
+ top: calc(var(--line-height) / 2 - var(--border-thickness));
+ left: 0;
+ width: 100%;
+ border-top: calc(var(--border-thickness) * 3) double var(--text-color);
+ height: 0;
+}
+
+a {
+ text-decoration-thickness: var(--border-thickness);
+}
+
+a:link, a:visited {
+ color: var(--text-color);
+}
+
+p {
+ margin-bottom: var(--line-height);
+}
+
+strong {
+ font-weight: var(--font-weight-bold);
+}
+em {
+ font-style: italic;
+}
+
+sub {
+ position: relative;
+ display: inline-block;
+ margin: 0;
+ vertical-align: sub;
+ line-height: 0;
+ width: calc(1ch / 0.75);
+ font-size: .75rem;
+}
+
+table {
+ position: relative;
+ top: calc(var(--line-height) / 2);
+ width: calc(round(down, 100%, 1ch));
+ border-collapse: collapse;
+ margin: 0 0 calc(var(--line-height) * 2);
+}
+
+th, td {
+ border: var(--border-thickness) solid var(--text-color);
+ padding:
+ calc((var(--line-height) / 2))
+ calc(1ch - var(--border-thickness) / 2)
+ calc((var(--line-height) / 2) - (var(--border-thickness)))
+ ;
+ line-height: var(--line-height);
+ vertical-align: top;
+ text-align: left;
+}
+table tbody tr:first-child > * {
+ padding-top: calc((var(--line-height) / 2) - var(--border-thickness));
+}
+
+
+th {
+ font-weight: 700;
+}
+.width-min {
+ width: 0%;
+}
+.width-auto {
+ width: 100%;
+}
+
+.header {
+ margin-bottom: calc(var(--line-height) * 2);
+}
+.header h1 {
+ margin: 0;
+}
+.header tr td:last-child {
+ text-align: right;
+}
+
+p {
+ word-break: break-word;
+ word-wrap: break-word;
+ hyphens: auto;
+}
+
+img, video {
+ display: block;
+ width: 100%;
+ object-fit: contain;
+ overflow: hidden;
+}
+img {
+ font-style: italic;
+ color: var(--text-color-alt);
+}
+
+details {
+ border: var(--border-thickness) solid var(--text-color);
+ padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
+ margin-bottom: var(--line-height);
+}
+
+summary {
+ font-weight: var(--font-weight-medium);
+ cursor: pointer;
+}
+details[open] summary {
+ margin-bottom: var(--line-height);
+}
+
+details ::marker {
+ display: inline-block;
+ content: '▶';
+ margin: 0;
+}
+details[open] ::marker {
+ content: '▼';
+}
+
+details :last-child {
+ margin-bottom: 0;
+}
+
+pre {
+ white-space: pre;
+ overflow-x: auto;
+ margin: var(--line-height) 0;
+ overflow-y: hidden;
+}
+figure pre {
+ margin: 0;
+}
+
+pre, code {
+ font-family: var(--font-family);
+}
+
+code {
+ font-weight: var(--font-weight-medium);
+}
+
+figure {
+ margin: calc(var(--line-height) * 2) 3ch;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+figcaption {
+ display: block;
+ font-style: italic;
+ margin-top: var(--line-height);
+}
+
+ul, ol {
+ padding: 0;
+ margin: 0 0 var(--line-height);
+}
+
+ul {
+ list-style-type: square;
+ padding: 0 0 0 2ch;
+}
+ol {
+ list-style-type: none;
+ counter-reset: item;
+ padding: 0;
+}
+ol ul,
+ol ol,
+ul ol,
+ul ul {
+ padding: 0 0 0 3ch;
+ margin: 0;
+}
+ol li:before {
+ content: counters(item, ".") ". ";
+ counter-increment: item;
+ font-weight: var(--font-weight-medium);
+}
+
+li {
+ margin: 0;
+ padding: 0;
+}
+
+li::marker {
+ line-height: 0;
+}
+
+::-webkit-scrollbar {
+ height: var(--line-height);
+}
+
+input, button, textarea {
+ border: var(--border-thickness) solid var(--text-color);
+ padding:
+ calc(var(--line-height) / 2 - var(--border-thickness))
+ calc(1ch - var(--border-thickness));
+ margin: 0;
+ font: inherit;
+ font-weight: inherit;
+ height: calc(var(--line-height) * 2);
+ width: auto;
+ overflow: visible;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: normal;
+ -webkit-font-smoothing: inherit;
+ -moz-osx-font-smoothing: inherit;
+ -webkit-appearance: none;
+}
+
+input[type=checkbox] {
+ display: inline-grid;
+ place-content: center;
+ vertical-align: top;
+ width: 2ch;
+ height: var(--line-height);
+ cursor: pointer;
+}
+input[type=checkbox]:checked:before {
+ content: "";
+ width: 1ch;
+ height: calc(var(--line-height) / 2);
+ background: var(--text-color);
+}
+
+button:focus, input:focus {
+ --border-thickness: 3px;
+ outline: none;
+}
+
+input {
+ width: calc(round(down, 100%, 1ch));
+}
+::placeholder {
+ color: var(--text-color-alt);
+ opacity: 1;
+}
+::-ms-input-placeholder {
+ color: var(--text-color-alt);
+}
+button::-moz-focus-inner {
+ padding: 0;
+ border: 0
+}
+
+button {
+ text-transform: uppercase;
+ font-weight: var(--font-weight-medium);
+ cursor: pointer;
+}
+
+button:hover {
+ background: var(--background-color-alt);
+}
+button:active {
+ transform: translate(2px, 2px);
+}
+
+label {
+ display: block;
+ width: calc(round(down, 100%, 1ch));
+ height: auto;
+ line-height: var(--line-height);
+ font-weight: var(--font-weight-medium);
+ margin: 0;
+}
+
+label input {
+ width: 100%;
+}
+
+.tree, .tree ul {
+ position: relative;
+ padding-left: 0;
+ list-style-type: none;
+ line-height: var(--line-height);
+}
+.tree ul {
+ margin: 0;
+}
+.tree ul li {
+ position: relative;
+ padding-left: 1.5ch;
+ margin-left: 1.5ch;
+ border-left: var(--border-thickness) solid var(--text-color);
+}
+.tree ul li:before {
+ position: absolute;
+ display: block;
+ top: calc(var(--line-height) / 2);
+ left: 0;
+ content: "";
+ width: 1ch;
+ border-bottom: var(--border-thickness) solid var(--text-color);
+}
+.tree ul li:last-child {
+ border-left: none;
+}
+.tree ul li:last-child:after {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ content: "";
+ height: calc(var(--line-height) / 2);
+ border-left: var(--border-thickness) solid var(--text-color);
+}
+
+.grid {
+ --grid-cells: 0;
+ display: flex;
+ gap: 1ch;
+ width: calc(round(down, 100%, (1ch * var(--grid-cells)) - (1ch * var(--grid-cells) - 1)));
+ margin-bottom: var(--line-height);
+}
+
+.grid > *,
+.grid > input {
+ flex: 0 0 calc(round(down, (100% - (1ch * (var(--grid-cells) - 1))) / var(--grid-cells), 1ch));
+}
+.grid:has(> :last-child:nth-child(1)) { --grid-cells: 1; }
+.grid:has(> :last-child:nth-child(2)) { --grid-cells: 2; }
+.grid:has(> :last-child:nth-child(3)) { --grid-cells: 3; }
+.grid:has(> :last-child:nth-child(4)) { --grid-cells: 4; }
+.grid:has(> :last-child:nth-child(5)) { --grid-cells: 5; }
+.grid:has(> :last-child:nth-child(6)) { --grid-cells: 6; }
+.grid:has(> :last-child:nth-child(7)) { --grid-cells: 7; }
+.grid:has(> :last-child:nth-child(8)) { --grid-cells: 8; }
+.grid:has(> :last-child:nth-child(9)) { --grid-cells: 9; }
+
+/* DEBUG UTILITIES */
+
+.debug .debug-grid {
+ --color: color-mix(in srgb, var(--text-color) 10%, var(--background-color) 90%);
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+ background-image:
+ repeating-linear-gradient(var(--color) 0 1px, transparent 1px 100%),
+ repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
+ background-size: 1ch var(--line-height);
+ margin: 0;
+}
+
+.debug .off-grid {
+ background: rgba(255, 0, 0, 0.1);
+}
+
+.debug-toggle-label {
+ text-align: right;
+}
diff --git a/index.html b/index.html
index b7df9ad..b32620a 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,12 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
-<!-- 2024-07-05 Fri 21:39 -->
+<!-- 2024-09-08 Sun 19:36 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>For when I'm gone.</title>
<meta name="generator" content="Org Mode" />
-<style type="text/css">
+<style>
#content { max-width: 60em; margin: auto; }
.title { text-align: center;
margin-bottom: .2em; }
@@ -192,9 +192,11 @@
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { }
</style>
-<link rel="stylesheet" href="tufte.css" type="text/css" />
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+<link rel="stylesheet" href="reset.css">
+<link rel="stylesheet" href="index.css">
<meta name="author" content="Wade Mealing" />
-<meta name="theme-color" content="#fffff8"/>
<meta name="description" content="Wade Mealings documentation" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; img-src https://*; child-src 'none';" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';" />
@@ -202,9 +204,11 @@
<body>
<div id="content" class="content">
<h1 class="title">For when I'm gone.</h1>
-<div id="outline-container-orgea21dd8" class="outline-2">
-<h2 id="orgea21dd8"><a href="https://wmealing.github.io/custom-software-errors.html">The best error messages ive ever seen</a></h2>
-<div class="outline-text-2" id="text-orgea21dd8">
+
+
+<div id="outline-container-orgfe6c220" class="outline-2">
+<h2 id="orgfe6c220"><a href="https://wmealing.github.io/custom-software-errors.html">The best error messages ive ever seen</a></h2>
+<div class="outline-text-2" id="text-orgfe6c220">
<p>
Writing clear and effective error messages is a crucial skill for any programmer, no matter what the language. Well-crafted error messages will
improve the usability of software by guiding users to understand and resolve issues quickly. A good error message not only informs the user about
@@ -214,9 +218,10 @@ <h2 id="orgea21dd8"><a href="https://wmealing.github.io/custom-software-errors.h
</p>
</div>
</div>
-<div id="outline-container-orga48bd08" class="outline-2">
-<h2 id="orga48bd08"><a href="http://wmealing.github.io/mac-os-midi-router-broken.html">Apple Mac OS Midi routing is broken.</a></h2>
-<div class="outline-text-2" id="text-orga48bd08">
+
+<div id="outline-container-orgd099798" class="outline-2">
+<h2 id="orgd099798"><a href="http://wmealing.github.io/mac-os-midi-router-broken.html">Apple Mac OS Midi routing is broken.</a></h2>
+<div class="outline-text-2" id="text-orgd099798">
<p>
I have some new music making hardware, and wanted to try to get them to talk together. Use a Mac they
say 'everything just works', No clearly it doesnt. I did however find a work around. If anyone
@@ -224,9 +229,10 @@ <h2 id="orga48bd08"><a href="http://wmealing.github.io/mac-os-midi-router-broken
</p>
</div>
</div>
-<div id="outline-container-org4b3c430" class="outline-2">
-<h2 id="org4b3c430"><a href="http://wmealing.github.io/minimise.html">Minimise</a></h2>
-<div class="outline-text-2" id="text-org4b3c430">
+
+<div id="outline-container-org0b8dec0" class="outline-2">
+<h2 id="org0b8dec0"><a href="http://wmealing.github.io/minimise.html">Minimise</a></h2>
+<div class="outline-text-2" id="text-org0b8dec0">
<p>
In the interest of not polluting the internet with my ill-informed opinion and staying
away from the madness that is modern culture, I've deleted a bunch of social media and
@@ -234,9 +240,11 @@ <h2 id="org4b3c430"><a href="http://wmealing.github.io/minimise.html">Minimise</
</p>
</div>
</div>
-<div id="outline-container-org4e14570" class="outline-2">
-<h2 id="org4e14570"><a href="./reverse-engineering-teenage-engineering.html">Downloading the EP133 firmware from Teenage Engineering</a></h2>
-<div class="outline-text-2" id="text-org4e14570">
+
+
+<div id="outline-container-org4652631" class="outline-2">
+<h2 id="org4652631"><a href="./reverse-engineering-teenage-engineering.html">Downloading the EP133 firmware from Teenage Engineering</a></h2>
+<div class="outline-text-2" id="text-org4652631">
<p>
Teenage Engineering released the EP-133, a mid range sampler/synth, I looked into the updater
to find out as much as I can before I buy one. The firmware provided from teenage engineering
@@ -244,9 +252,10 @@ <h2 id="org4e14570"><a href="./reverse-engineering-teenage-engineering.html">Dow
</p>
</div>
</div>
-<div id="outline-container-org6e2267e" class="outline-2">
-<h2 id="org6e2267e"><a href="https://wmealing.github.io/atomic-operations-in-common-lisp.html">Atom(ic) Operations in Common Lisp</a> [2023]</h2>
-<div class="outline-text-2" id="text-org6e2267e">
+
+<div id="outline-container-org1b4448a" class="outline-2">
+<h2 id="org1b4448a"><a href="https://wmealing.github.io/atomic-operations-in-common-lisp.html">Atom(ic) Operations in Common Lisp</a> [2023]</h2>
+<div class="outline-text-2" id="text-org1b4448a">
<p>
So, the headline is a bit of a lie. This entry talks about using clojure like "atoms" to simplify
management of shared, synchronous, independent state. Common lisp being the all-singing all-dancing
@@ -255,9 +264,11 @@ <h2 id="org6e2267e"><a href="https://wmealing.github.io/atomic-operations-in-com
</p>
</div>
</div>
-<div id="outline-container-orgf7f2abc" class="outline-2">
-<h2 id="orgf7f2abc"><a href="https://wmealing.github.io/lfe-github-actions.html">Setting up GitHub Actions for LFE CI/CD</a> [2023]</h2>
-<div class="outline-text-2" id="text-orgf7f2abc">
+
+
+<div id="outline-container-org942cabe" class="outline-2">
+<h2 id="org942cabe"><a href="https://wmealing.github.io/lfe-github-actions.html">Setting up GitHub Actions for LFE CI/CD</a> [2023]</h2>
+<div class="outline-text-2" id="text-org942cabe">
<p>
I'm involved in 'competing' with <a href="https://spawnfest.org/">spawnfest</a> this weekend, I figured its time to setup <a href="lfe-github-actions.html">LFE for CI/CD with GitHub Actions</a>.
Its a pretty simple setup that runs the test, i'll expand on this in the future to include creating containers and
@@ -265,27 +276,30 @@ <h2 id="orgf7f2abc"><a href="https://wmealing.github.io/lfe-github-actions.html"
</p>
</div>
</div>
-<div id="outline-container-org7d1bad0" class="outline-2">
-<h2 id="org7d1bad0"><a href="https://wmealing.github.io/htmx-common-lisp.html">Common Lisp and HTMX</a> [2023]</h2>
-<div class="outline-text-2" id="text-org7d1bad0">
+
+<div id="outline-container-org2c1f0a6" class="outline-2">
+<h2 id="org2c1f0a6"><a href="https://wmealing.github.io/htmx-common-lisp.html">Common Lisp and HTMX</a> [2023]</h2>
+<div class="outline-text-2" id="text-org2c1f0a6">
<p>
Common lisp and HTMX provide a sane platform to develop basic applications. I <a href="https://wmealing.github.io/htmx-common-lisp.html">outline the reasons</a> that I have chosen them.
This post also marks the new voice I plan to use while blogging. I no longer care to engage in debate with people without being paid.
</p>
</div>
</div>
-<div id="outline-container-orge658833" class="outline-2">
-<h2 id="orge658833"><a href="./emacs-org-babel-analysis.html ">Supercharge your workflow with emacs and org-babel</a>.</h2>
-<div class="outline-text-2" id="text-orge658833">
+
+<div id="outline-container-org31e6287" class="outline-2">
+<h2 id="org31e6287"><a href="./emacs-org-babel-analysis.html ">Supercharge your workflow with emacs and org-babel</a>.</h2>
+<div class="outline-text-2" id="text-org31e6287">
<p>
I do kernel flaw analysis for a living, someone asked me to do a short write up on how I use org-babel to
do my work. I've documented it <a href="./emacs-org-babel-analysis.html">in this rant</a>.
</p>
</div>
</div>
-<div id="outline-container-orga7c72e1" class="outline-2">
-<h2 id="orga7c72e1">Lisp flavored erlang (gen_server)</h2>
-<div class="outline-text-2" id="text-orga7c72e1">
+
+<div id="outline-container-org39325f0" class="outline-2">
+<h2 id="org39325f0">Lisp flavored erlang (gen_server)</h2>
+<div class="outline-text-2" id="text-org39325f0">
<p>
I decided to collapse two of my interests, lisp and erlang. Lisp flavored erlang isnt going to win
any popularity contests, but it is something that I dont entirely hate working on. Ive written
@@ -293,9 +307,10 @@ <h2 id="orga7c72e1">Lisp flavored erlang (gen_server)</h2>
</p>
</div>
</div>
-<div id="outline-container-orgadec979" class="outline-2">
-<h2 id="orgadec979">Choosing the wrong roads.</h2>
-<div class="outline-text-2" id="text-orgadec979">
+
+<div id="outline-container-org16714dd" class="outline-2">
+<h2 id="org16714dd">Choosing the wrong roads.</h2>
+<div class="outline-text-2" id="text-org16714dd">
<p>
I've spent the last week reflecting on some poor programming life choices that I've made.
disagree with the majority, perhaps you are wrong. I'm not stupid enough to think that i'm smarter
@@ -304,9 +319,10 @@ <h2 id="orgadec979">Choosing the wrong roads.</h2>
</p>
</div>
</div>
-<div id="outline-container-orgd504efc" class="outline-2">
-<h2 id="orgd504efc">COBOL - Simple "Curses" like screen to get keyboard input.</h2>
-<div class="outline-text-2" id="text-orgd504efc">
+
+<div id="outline-container-org9ac7134" class="outline-2">
+<h2 id="org9ac7134">COBOL - Simple "Curses" like screen to get keyboard input.</h2>
+<div class="outline-text-2" id="text-org9ac7134">
<p>
On of the simple but effectively powerful things that gnuCOBOL can do is a TUI. Its not
fancy (when it implements UTF8 correctly, it will be fancy-af) but it gets the job
@@ -318,18 +334,20 @@ <h2 id="orgd504efc">COBOL - Simple "Curses" like screen to get keyboard input.</
</p>
</div>
</div>
-<div id="outline-container-org0df487e" class="outline-2">
-<h2 id="org0df487e">Python Range function in lisp [Aug 2022]</h2>
-<div class="outline-text-2" id="text-org0df487e">
+
+<div id="outline-container-orgf3b504d" class="outline-2">
+<h2 id="orgf3b504d">Python Range function in lisp [Aug 2022]</h2>
+<div class="outline-text-2" id="text-orgf3b504d">
<p>
I have wanted a quick way to something similar to the python range function (range n y) in common lisp.
Sometimes I just want to have some kind of immediate list creation. <a href="http://wmealing.github.io/lisp-range">See my drivel on this topic.</a>
</p>
</div>
</div>
-<div id="outline-container-org4e3055c" class="outline-2">
-<h2 id="org4e3055c">Simple WX example in erlang [July 2022]</h2>
-<div class="outline-text-2" id="text-org4e3055c">
+
+<div id="outline-container-org31bcdfc" class="outline-2">
+<h2 id="org31bcdfc">Simple WX example in erlang [July 2022]</h2>
+<div class="outline-text-2" id="text-org31bcdfc">
<p>
I don't always write a gui for my apps, but when I do, I use wx because I'm not one for complaining about pixel perfect pedantry.
</p>
@@ -339,9 +357,10 @@ <h2 id="org4e3055c">Simple WX example in erlang [July 2022]</h2>
</p>
</div>
</div>
-<div id="outline-container-orgcccc78f" class="outline-2">
-<h2 id="orgcccc78f">MIRAI analysis - evasion - deleting the executing code [Nov 2020]</h2>
-<div class="outline-text-2" id="text-orgcccc78f">
+
+<div id="outline-container-org5acc137" class="outline-2">
+<h2 id="org5acc137">MIRAI analysis - evasion - deleting the executing code [Nov 2020]</h2>
+<div class="outline-text-2" id="text-org5acc137">
<p>
The MIRAI malware deletes itself from disk in an attempt to make it
harder to analyse. <a href="https://wmealing.github.io/mirai-delete-yourself">This post</a> goes into detail on how it works, a rust
@@ -349,18 +368,20 @@ <h2 id="orgcccc78f">MIRAI analysis - evasion - deleting the executing code [Nov
</p>
</div>
</div>
-<div id="outline-container-org7c4e46e" class="outline-2">
-<h2 id="org7c4e46e">MIRAI analysis - watchdog access in rust [Nov 2020]</h2>
-<div class="outline-text-2" id="text-org7c4e46e">
+
+<div id="outline-container-orgdbc6fb9" class="outline-2">
+<h2 id="orgdbc6fb9">MIRAI analysis - watchdog access in rust [Nov 2020]</h2>
+<div class="outline-text-2" id="text-orgdbc6fb9">
<p>
The MIRAI malware uses an technique intended to prevent the systems
watchdog from rebooting the machine when its too busy. <a href="https://wmealing.github.io/watchdog-in-rust">I share what I learned about this and ported it to rust.</a>
</p>
</div>
</div>
-<div id="outline-container-org251d497" class="outline-2">
-<h2 id="org251d497">Userspace eBPF [Sep 2 2020]</h2>
-<div class="outline-text-2" id="text-org251d497">
+
+<div id="outline-container-org6cbba10" class="outline-2">
+<h2 id="org6cbba10">Userspace eBPF [Sep 2 2020]</h2>
+<div class="outline-text-2" id="text-org6cbba10">
<p>
A few distros have users allowed to insert eBPF programs. This is disabled in
some distributions. <a href="./ebpf-disabled-for-users.html">I've documented my findings</a> after talking to different
@@ -368,9 +389,10 @@ <h2 id="org251d497">Userspace eBPF [Sep 2 2020]</h2>
</p>
</div>
</div>
-<div id="outline-container-org9e8ecff" class="outline-2">
-<h2 id="org9e8ecff">Anatomy of kernel module signing [Aug 20 2020]</h2>
-<div class="outline-text-2" id="text-org9e8ecff">
+
+<div id="outline-container-orgb5c10ff" class="outline-2">
+<h2 id="orgb5c10ff">Anatomy of kernel module signing [Aug 20 2020]</h2>
+<div class="outline-text-2" id="text-orgb5c10ff">
<p>
I decided to take a look at the Linux kernel modules signing process. It seems
that the recent drovorub malware has some interesting misinformation regarding
@@ -378,9 +400,10 @@ <h2 id="org9e8ecff">Anatomy of kernel module signing [Aug 20 2020]</h2>
</p>
</div>
</div>
-<div id="outline-container-org909acab" class="outline-2">
-<h2 id="org909acab">Encrypting a disk to only boot in a specific system. [Aug 9 2020]</h2>
-<div class="outline-text-2" id="text-org909acab">
+
+<div id="outline-container-orga3472e5" class="outline-2">
+<h2 id="orga3472e5">Encrypting a disk to only boot in a specific system. [Aug 9 2020]</h2>
+<div class="outline-text-2" id="text-orga3472e5">
<p>
Recent research papers related to flaws in thunderbolt and secureboot have
piqued my interest in learning more about what can be done to prevent a system
@@ -389,9 +412,10 @@ <h2 id="org909acab">Encrypting a disk to only boot in a specific system. [Aug 9
</p>
</div>
</div>
-<div id="outline-container-orgd4c2693" class="outline-2">
-<h2 id="orgd4c2693">Toshiba Toughpad FZ-G1-3 [Jul 25 2020]</h2>
-<div class="outline-text-2" id="text-orgd4c2693">
+
+<div id="outline-container-org3465e43" class="outline-2">
+<h2 id="org3465e43">Toshiba Toughpad FZ-G1-3 [Jul 25 2020]</h2>
+<div class="outline-text-2" id="text-org3465e43">
<p>
I have recently purchased one of these machines in an auction, and I am -very-
impressed with its build quality. While this one is not its current purchase
@@ -400,9 +424,12 @@ <h2 id="orgd4c2693">Toshiba Toughpad FZ-G1-3 [Jul 25 2020]</h2>
</p>
</div>
</div>
-<div id="outline-container-org0759259" class="outline-2">
-<h2 id="org0759259">Kernel SecuriTea</h2>
-<div class="outline-text-2" id="text-org0759259">
+
+
+
+<div id="outline-container-org14cbf9c" class="outline-2">
+<h2 id="org14cbf9c">Kernel SecuriTea</h2>
+<div class="outline-text-2" id="text-org14cbf9c">
<p>
I work on a small youtube channel where I talk about kernel security issues
that interest me. I work on quite a lot of these in my work so i'm limited to
@@ -412,7 +439,7 @@ <h2 id="org0759259">Kernel SecuriTea</h2>
</div>
</div>
<div id="postamble" class="status">
-<p class="date">Created: 2024-07-05 Fri 21:39</p>
+<p class="date">Created: 2024-09-08 Sun 19:36</p>
</div>
</body>
</html>
diff --git a/reset.css b/reset.css
new file mode 100644
index 0000000..aabd759
--- /dev/null
+++ b/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ /*margin: 0;*/
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/setupfile.org b/setupfile.org
index 6eb6a96..0e8970a 100644
--- a/setupfile.org
+++ b/setupfile.org
@@ -3,7 +3,9 @@
#+OPTIONS: date:nil
#+OPTIONS: author:nil date:nil
-#+HTML_HEAD: <link rel="stylesheet" href="tufte.css" type="text/css" />
+#+HTML_HEAD: <meta charset="utf-8">
+#+HTML_HEAD: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+#+HTML_HEAD: <link rel="stylesheet" href="reset.css">
+#+HTML_HEAD: <link rel="stylesheet" href="index.css">
#+HTML_HEAD: <meta name="author" content="Wade Mealing" />
-#+HTML_HEAD: <meta name="theme-color" content="#fffff8"/>
#+HTML_HEAD_EXTRA: <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; img-src https://*; child-src 'none';" />