💾 Archived View for bacaliu.de › 20220710-meta.html captured on 2023-07-10 at 13:39:56.
-=-=-=-=-=-=-
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2023-06-27 Di 06:24 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Meta</title>
<meta name="description" content="Why is this site so clean? Why does it need no cookies?" />
<meta name="keywords" content="Meta, Orgmode, Bacaliu.de" />
<meta name="generator" content="Org Mode" />
<meta property="og:type" content="article">
<meta property="og:site_name" content="Bacaliu.de">
<link rel="stylesheet" type="text/css" href="/css/modus.css">
<link rel="shortcut icon" href="/favicon.ico" sizes="65x65">
<script src=/static/js/htmx.min.js></script>
<link rel="stylesheet" type="text/css" href="/css/colors/auto.css"
id="ef-theme"
hx-swap="outerHTML" hx-get="/data/colorscheme"
hx-trigger="load">
</head>
<body>
<header id="preamble" class="status">
<a id='top'></a>
<pre style='text-align: left; font-size: min(2vw, 1rem); display: inline-block;'>
___ _ _ _
| _ ) __ _ __ __ _| (_)_ _ __| |___
| _ \/ _` / _/ _` | | | || |_/ _` / -_)
|___/\__,_\__\__,_|_|_|\_,_(_)__,_\___|
</pre><br>
<a href='#top'>↑</a>
- <a href='/index.html'>Home</a>
- <a href='/search.html'>Search</a>
- <a href='#bottom'>↓</a>
<br>
<div hx-get="/data/colorlist" hx-trigger="load"></div>
<hr>
</header>
<main id="content" class="content">
<header>
<h1 class="title">Meta</h1>
<p class="subtitle" role="doc-subtitle">About this page</p>
</header><nav id="table-of-contents" role="doc-toc">
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#orgmode-makes-it">1. Orgmode makes it all possible</a>
<ul>
<li><a href="#org-publish">1.1. Org-publish</a></li>
<li><a href="#why-semantics-matter">1.2. Why semantics matter</a></li>
<li><a href="#this-designed-last">1.3. Is this designed to last?</a></li>
<li><a href="#targeting-org-or">1.4. Targeting Org or HTML</a></li>
</ul>
</li>
<li><a href="#bibliography">2. Bibliography</a></li>
<li><a href="#nav">Nav</a></li>
</ul>
</div>
</nav>
<div id="outline-container-orgmode-makes-it" class="outline-2">
<h2 id="orgmode-makes-it"><span class="section-number-2">1.</span> <a href="#orgmode-makes-it">Orgmode makes it all possible</a></h2>
<div class="outline-text-2" id="text-1">
</div>
<div id="outline-container-org-publish" class="outline-3">
<h3 id="org-publish"><span class="section-number-3">1.1.</span> <a href="#org-publish">Org-publish</a></h3>
<div class="outline-text-3" id="text-1-1">
<p>
I write this website in Orgmode. It's a markup-language like Markdown, but with way more capabilities. Just consider, this entire Document is exported out of it. The text I write looks like this:<br>
</p>
<div class="org-src-container">
<label class="org-src-name"><span class="listing-number">Listing 1: </span>The org-file</label><pre class="src src-org"> <span class="org-org-drawer">:PROPERTIES:</span>
<span class="org-org-special-keyword">:ID:</span> <span class="org-org-property-value">5e5e2b79-18ab-4bce-9036-b02fa0b19c91</span>
<span class="org-org-drawer">:END:</span>
<span class="org-org-document-info-keyword"> #+title:</span> <span class="org-org-document-title">Meta</span>
<span class="org-org-document-info-keyword"> #+subtitle:</span> <span class="org-org-document-info">About this page</span>
<span class="org-org-meta-line"> #+keywords: Meta, Orgmode, Bacaliu.de</span>
<span class="org-org-meta-line"> #+filetags: Meta Orgmode</span>
<span class="org-org-meta-line"> #+description: Why is this site so clean? Why does it need no cookies?</span>
<span class="org-org-meta-line"> #+language: en</span>
<span class="org-org-meta-line"> #+bibliography: ../ref.bib</span>
<span class="org-org-meta-line"> #+cite_export: csl ~/Vorlagen/csl/rub-eng.csl</span>
* Orgmode makes it all possible
** Org-publish
I write this website in Orgmode. It's a markup-language like Markdown, but with way more capabilities. Just consider, this entire Document is exported out of it. The thig I write looks like this:
<span class="org-org-meta-line"> #+caption:</span> <span class="org-org-block">The org-file</span>
#+begin_src org
...
</pre>
</div>
<p>
Through Org-publish (<a href="#citeproc_bib_item_1">“Publishing (The Org Manual)” 2022</a>) I create HTML, txt and gemini out of it. This is sent over to the server with git (over GitLab). I can even put programm-code inside this document and run it. I just type the code-part and the results are generated automaticly!<br>
</p>
<div class="org-src-container">
<label class="org-src-name"><span class="listing-number">Listing 2: </span>for-loop</label><pre class="src src-python"><span class="org-tree-sitter-hl-faceXkeyword">for</span> <span class="org-tree-sitter-hl-faceXvariable">i</span> <span class="org-tree-sitter-hl-faceXoperator">in</span> <span class="org-tree-sitter-hl-faceXfunctionXcall"><span class="org-tree-sitter-hl-faceXfunctionXbuiltin">range</span></span>(<span class="org-tree-sitter-hl-faceXnumber">3</span>, <span class="org-tree-sitter-hl-faceXnumber">19</span>, <span class="org-tree-sitter-hl-faceXnumber">4</span>):
<span class="org-tree-sitter-hl-faceXfunctionXcall"><span class="org-tree-sitter-hl-faceXfunctionXbuiltin">print</span></span>(<span class="org-tree-sitter-hl-faceXstring">f"The number </span>{i}<span class="org-tree-sitter-hl-faceXstring"> is one more than </span>{i-1}<span class="org-tree-sitter-hl-faceXstring">"</span>)
</pre>
</div>
<pre class="example">
The number 3 is one more than 2
The number 7 is one more than 6
The number 11 is one more than 10
The number 15 is one more than 14
</pre>
</div>
</div>
<div id="outline-container-why-semantics-matter" class="outline-3">
<h3 id="why-semantics-matter"><span class="section-number-3">1.2.</span> <a href="#why-semantics-matter">Why semantics matter</a></h3>
<div class="outline-text-3" id="text-1-2">
<p>
Orgmode supports different markup:<br>
</p>
<dl class="org-dl">
<dt><code class="src src-org"><span class="org-bold">*bold*</span></code></dt><dd><b>bold</b><br></dd>
<dt><code class="src src-org"><span class="org-italic">/italics/</span></code></dt><dd><i>italics</i><br></dd>
<dt><code class="src src-org"><span class="org-org-verbatim">=keybindings=</span></code></dt><dd><kbd>keybindings</kbd><br></dd>
<dt><code class="src src-org"><span class="org-org-code">~code~</span></code></dt><dd><code>code</code><br></dd>
<dt><code class="src src-org"><span class="custom">+removed+</span></code></dt><dd><del>removed</del><br></dd>
<dt><code class="src src-org"><span class="org-underline">_underline_</span></code></dt><dd><ins>underline</ins><br></dd>
</dl>
<p>
If you see the html-verison you will notice: underlined text is green. I don't see the need of having <i>tree</i> different emphasis options. How should I decide if an important word should be bold, italic or underlined? By creating a complement to struck through text, I can correct <del>erorrs</del> <ins>errors</ins> in this intuitive way. The css and my Emacs-config makes the underlined text green. But also on other exports it is somewhat intuitive that <i>struck-through</i> text folowed by <i>underlined</i> text means first was replaced by second.<br>
</p>
<p>
This whole thing shows a problem with most modern content. Semantics and aesthetics are often very bound together. I have to write my own css to make sure the content looks like I want. By making headings bigger and colored I don't mean the words are literally big and colorful. I mean they are a heading and you should see it as a heading. At least html-tags are somewhat semantic-driven. When your browser reads a <code class="src src-web"><h1>Heading</h1></code> it can use it to mark it big by default. But it can also give this information to a screen-reader in case you are blind or something.<br>
</p>
</div>
</div>
<div id="outline-container-this-designed-last" class="outline-3">
<h3 id="this-designed-last"><span class="section-number-3">1.3.</span> <a href="#this-designed-last">Is this designed to last?</a></h3>
<div class="outline-text-3" id="text-1-3">
<p>
While reading in Karl Voids Blog I came across the concept of designing a website to last (<a href="#citeproc_bib_item_2">“This Page is Designed to Last: A Manifesto for Preserving Content on the Web” 2022</a>). In short: By removing possible failing-points like getting JavaScript via a CDN or hotlinking images the probability of a site loosing its functionality and information is strongly reduced.<br>
</p>
<p>
Is my site designed to last? At least I hate CDNs for exactly this reason: I would have to trust a third party when I could just download and serve the JS myself. And it's not much anyway. Just the interactive things like weather-forecast depend on it. Anything else is just formatted text.<br>
</p>
</div>
</div>
<div id="outline-container-targeting-org-or" class="outline-3">
<h3 id="targeting-org-or"><span class="section-number-3">1.4.</span> <a href="#targeting-org-or">Targeting Org or HTML</a></h3>
<div class="outline-text-3" id="text-1-4">
<p>
When writing Orgmode-Documents as notes, mostly for university, I write them with the knowledge that I won't search through the documents itself. Instead I export it to HTML and view it in a browser. Some upsides about this:<br>
</p>
<ul class="org-ul">
<li>no accidental editing<br></li>
<li>nicely formattet <img src="ltximg/20220710-meta_e4a635b42a7b5cdaaf5adb067983e10fdb37722a.svg" alt="$\LaTeX$" class="org-svg"> equations<br></li>
<li>dark-mode dimms images by <code class="src src-css"><span class="org-css-selector">img.invertable</span>{<span class="org-css-property">hue-rotate</span>: 180deg; <span class="org-css-property">filter</span>: invert();}</code><br></li>
</ul>
<p>
On the other hand I cut actually profit from Orgmode's capabilities when e.g. searching for something, outline foldung, and such stuff.<br>
</p>
<p>
In any case when writing <i>this</i> it would be bad to target the HTML-output, because the parallel output as<br>
</p>
<dl class="org-dl">
<dt>HTML</dt><dd><a href="https://www.bacaliu.de/index.html">https://www.bacaliu.de/index.html</a><br></dd>
<dt>txt</dt><dd><a href="https://www.bacaliu.de/index.txt">https://www.bacaliu.de/index.txt</a> - with maybe broken links<br></dd>
<dt>gmi</dt><dd>- i browse it with the cli-program <code>amfora</code><br></dd>
</dl>
<p>
For some reason Markdown made problems, I wish that would do it too.<br>
</p>
</div>
</div>
</div>
<div id="outline-container-bibliography" class="outline-2">
<h2 id="bibliography"><span class="section-number-2">2.</span> <a href="#bibliography">Bibliography</a></h2>
<div class="outline-text-2" id="text-2">
<style>.csl-entry{text-indent: -0; margin-left: 0;}</style><div class="csl-bib-body">
<div class="csl-entry"><a id="citeproc_bib_item_1"></a>“Publishing (The Org Manual),”. 2022. June 19, 2022, URL: <a href="https://orgmode.org/manual/Publishing.html">https://orgmode.org/manual/Publishing.html</a>, retrieved on July 10, 2022.</div>
<div class="csl-entry"><a id="citeproc_bib_item_2"></a>“This Page is Designed to Last: A Manifesto for Preserving Content on the Web,”. 2022. July 1, 2022, URL: <a href="https://jeffhuang.com/designed_to_last">https://jeffhuang.com/designed_to_last</a>.</div>
</div>
</div>
</div>
<div id="outline-container-nav" class="outline-2">
<h2 id="nav"><a href="#nav">Nav</a></h2>
<div class="outline-text-2" id="text-nav">
<ul class="org-ul">
<li>Tags: <a href="./tags/Meta.html">Meta</a> - <a href="./tags/Orgmode.html">Orgmode</a><br></li>
</ul>
<!-- BEGIN insert Backlinks (but there are no) -->
<ul class="org-ul">
<li>Formats: <a href="./20220710-meta.md">md</a> - <a href="./20220710-meta.txt">txt</a> - <a href="./20220710-meta.html">html</a> - <a href="./20220710-meta.gmi">gmi</a></li>
</ul>
</div>
</div>
</main>
<footer id="postamble" class="status">
<hr>
<br>
<img alt="CC BY-4.0" style="border-width:0; vertical-align: middle; height: 1em;" src="/icons/cc-by-4.0-80x15.svg">
<a rel='license' href='http://creativecommons.org/licenses/by/4.0/'>
CC BY-4.0.
</a>
<br>
running at <a href='https://www.hosting.de/'>hosting.de</a>
<br>
Creator: <a href="https://www.gnu.org/software/emacs/">Emacs</a> 28.2 (<a href="https://orgmode.org">Org</a> mode 9.5.5);
<br>
<a href='/impressum-datenschutz.html' id='impressum-dings'>
Impressum und Datenschutzerklärung
</a>
<a id='bottom'></a>
</footer>
</body>
</html>