diff options
Diffstat (limited to 'blog')
| -rw-r--r-- | blog/8seg/index.html | 49 | ||||
| -rw-r--r-- | blog/css-only-code-blocks/index.html | 259 | ||||
| -rw-r--r-- | blog/hsm-basics/index.html | 42 | ||||
| -rw-r--r-- | blog/ihsm-worlds-first-diy-hsm/index.html | 39 | ||||
| -rw-r--r-- | blog/index.html | 150 | ||||
| -rw-r--r-- | blog/index.xml | 52 | ||||
| -rw-r--r-- | blog/jupyterlab-notebook-file-oneliner/index.html | 85 | ||||
| -rw-r--r-- | blog/kicad-mesh-plugin/index.html | 71 | ||||
| -rw-r--r-- | blog/led-characterization/index.html | 65 | ||||
| -rw-r--r-- | blog/multichannel-led-driver/index.html | 67 | ||||
| -rw-r--r-- | blog/private-contact-discovery/index.html | 43 | ||||
| -rw-r--r-- | blog/serial-protocols/index.html | 39 | ||||
| -rw-r--r-- | blog/telekom-gpon-sfp/index.html | 49 | ||||
| -rw-r--r-- | blog/thors-hammer/index.html | 45 | ||||
| -rw-r--r-- | blog/wifi-led-driver/index.html | 45 | ||||
| -rw-r--r-- | blog/wsdiff-static-html-diffs/index.html | 169 |
16 files changed, 1063 insertions, 206 deletions
diff --git a/blog/8seg/index.html b/blog/8seg/index.html index 05f6fd0..793b338 100644 --- a/blog/8seg/index.html +++ b/blog/8seg/index.html @@ -1,12 +1,17 @@ <!DOCTYPE html> <html><head> <meta charset="utf-8"> - <title>8seg | Home</title> + <title>8seg Technical Overview | Home</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -25,16 +33,16 @@ </nav> <header> - <h1>8seg</h1> + <h1>8seg Technical Overview</h1> <ul class="breadcrumbs"> <li><a href="/">jaseg.de</a></li> - <li><a href="/blog/">Blog</a></li><li><a href="/blog/8seg/">8seg</a></li> + <li><a href="/blog/">Blog</a></li><li><a href="/blog/8seg/">8seg Technical Overview</a></li> </ul> <strong>2023-12-26</strong> </header> - <main> - <div class="document" id="seg-technical-overview"> -<h1 class="title">8seg Technical Overview</h1> + <main data-pagefind-body> + <div class="document"> + <div class="section" id="prologue"> <h2>Prologue</h2> @@ -204,17 +212,30 @@ set of pre-programmed waveform transitions.</p> </div> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/css-only-code-blocks/index.html b/blog/css-only-code-blocks/index.html new file mode 100644 index 0000000..5b15937 --- /dev/null +++ b/blog/css-only-code-blocks/index.html @@ -0,0 +1,259 @@ +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>Code listings with nice line wrapping and line numbers from plain CSS | Home</title> + <meta name="description" content=""> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="mobile-web-app-capable" content="yes"> + <meta name="color-scheme" content="dark light"> + <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> +</head> +<body><nav> + <div class="internal"> + + <a href="/" title="Home">Home</a> + <a href="/blog/" title="Blog">Blog</a> + <a href="/projects/" title="Projects">Projects</a> + <a href="/about/" title="About">About</a> + </div> + <div class="search"> + <div id="search"></div> + </div> + <div class="external"> + <a href="https://git.jaseg.de/" title="cgit">cgit</a> + <a href="https://github.com/jaseg" title="Github">Github</a> + <a href="https://gitlab.com/neinseg" title="Gitlab">Gitlab</a> + <a href="https://chaos.social/@jaseg" title="Mastodon">Mastodon</a> + </span> +</nav> + + <header> + <h1>Code listings with nice line wrapping and line numbers from plain CSS</h1> +<ul class="breadcrumbs"> + <li><a href="/">jaseg.de</a></li> + <li><a href="/blog/">Blog</a></li><li><a href="/blog/css-only-code-blocks/">Code listings with nice line wrapping and line numbers from plain CSS</a></li> +</ul> + <strong>2025-07-23</strong> + </header> + <main data-pagefind-body> + <div class="document"> + + +<p>Code listings in web pages are often a bit of a pain to use. Often, they don't wrap on small screens. Also, copy-pasting +code from a code listing often copies the line numbers along with the code. Finally, many implementations use +heavyweight HTML and/or javascript, making them slow to render (looking at you, gitlab).</p> +<p>For this blog, I wrote an implementation that renders HTML code listings entirely without JavaScript, renders line +numbers using plain CSS such that they don't get selected with the code, and that works with the browser to wrap in a +natural way while still supporting the little line continuation arrows that are used to show that a line was soft +wrapped in text editors.</p> +<p>This blog is rendered as a static site using <a class="reference external" href="https://gohugo.io/">Hugo</a> from a pile of <a class="reference external" href="https://www.sphinx-doc.org/en/master/usage/restructuredtext/index.html">RestructuredText</a> documents. RestructuredText renders +code listings using <a class="reference external" href="https://pygments.org/">Pygments</a> by default. Pygments hard-bakes the line numbers into the generated HTML, so I am using a +<a class="reference external" href="https://en.wikipedia.org/wiki/Monkey_patch">monkey-patched</a> hook that changes the line number rendering to just a bunch of empty <tt class="docutils literal"><span></tt> elements. The resulting +HTML for a code block then looks like this:</p> +<pre class="code html literal-block"> +<span class="lineno"></span><span class="line"><span class="p"><</span><span class="nt">pre</span> <span class="na">class</span><span class="o">=</span><span class="s">"code [language] literal-block"</span><span class="p">></span></span> +<span class="lineno"></span><span class="line"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"lineno"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span></span> +<span class="lineno"></span><span class="line"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"line"</span><span class="p">></span></span> +<span class="lineno"></span><span class="line"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"[syntax highlight token]"</span><span class="p">></span>The <span class="p"></</span><span class="nt">span</span><span class="p">><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"[other syntax highlight token]"</span><span class="p">></span>code!<span class="p"><</span><span class="nt">span</span><span class="p">></span></span> +<span class="lineno"></span><span class="line"> <span class="p"></</span><span class="nt">span</span><span class="p">></span></span> +<span class="lineno"></span><span class="line"> <span class="cm"><!-- ... repeat once for each source line. --></span></span> +<span class="lineno"></span><span class="line"><span class="p"></</span><span class="nt">pre</span><span class="p">></span> +</span></pre> +<p>You can find the (rather short) source of the <tt class="docutils literal">rst2html</tt> wrapper <a class="reference external" href="#rst2html-wrapper">below</a>.</p> +<div class="section" id="the-css"> +<h2>The CSS</h2> +<p>This modified HTML structure of the code listing gets accompanied by some CSS to make it flow nicely. Here is a listing +of the complete CSS controlling the listing. The only bit that isn't included here is the actual syntax styling rules +for the pygments tokens.</p> +<pre class="code css literal-block"> +<span class="lineno"></span><span class="line"><span class="c">/*****************************************************/</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="c">/* Code block formatting / syntax highlighting rules */</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="c">/*****************************************************/</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">.</span><span class="nc">code</span><span class="w"> </span><span class="p">{</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="s2">"Fira Code"</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">13</span><span class="kt">px</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">left</span><span class="p">;</span><span class="w"> </span><span class="c">/* Override default content "justify" alignment */</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">white-space</span><span class="p">:</span><span class="w"> </span><span class="kc">pre-wrap</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">word-wrap</span><span class="p">:</span><span class="w"> </span><span class="kc">break-word</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">overflow-x</span><span class="p">:</span><span class="w"> </span><span class="kc">auto</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="k">grid</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">start</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">grid-template-columns</span><span class="p">:</span><span class="w"> </span><span class="n">min-content</span><span class="w"> </span><span class="mi">1</span><span class="n">fr</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">}</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">.</span><span class="nc">code</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="p">.</span><span class="nc">line</span><span class="w"> </span><span class="p">{</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">padding-left</span><span class="p">:</span><span class="w"> </span><span class="nb">calc</span><span class="p">(</span><span class="mi">2</span><span class="kt">em</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">text-indent</span><span class="p">:</span><span class="w"> </span><span class="mi">-2</span><span class="kt">em</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">padding-top</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="kt">px</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">min-width</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">em</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">}</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="c">/* Make individual syntax tokens wrap anywhere */</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">.</span><span class="nc">code</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="p">.</span><span class="nc">line</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="nt">span</span><span class="w"> </span><span class="p">{</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">overflow-wrap</span><span class="p">:</span><span class="w"> </span><span class="n">anywhere</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">white-space</span><span class="p">:</span><span class="w"> </span><span class="kc">pre-wrap</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">}</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="c">/* We render line numbers in CSS! */</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">.</span><span class="nc">code</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="p">.</span><span class="nc">lineno</span><span class="w"> </span><span class="p">{</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">counter-increment</span><span class="p">:</span><span class="w"> </span><span class="n">lineno</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">word-break</span><span class="p">:</span><span class="w"> </span><span class="n">keep-all</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">padding-left</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">padding-right</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">overflow</span><span class="p">:</span><span class="w"> </span><span class="kc">clip</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">right</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--c-text-muted</span><span class="p">);</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">border-right</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--c-fg-highlight</span><span class="p">);</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">align-self</span><span class="p">:</span><span class="w"> </span><span class="kc">stretch</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">}</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="c">/* We also handle line continuation markers in CSS. */</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">.</span><span class="nc">code</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="p">.</span><span class="nc">lineno</span><span class="p">::</span><span class="nd">after</span><span class="w"> </span><span class="p">{</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">right</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">"\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳"</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">white-space</span><span class="p">:</span><span class="w"> </span><span class="kc">pre</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--c-text-muted</span><span class="p">);</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">}</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="c">/* Insert the actual line number */</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">.</span><span class="nc">code</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="p">.</span><span class="nc">lineno</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="nb">counter</span><span class="p">(</span><span class="n">lineno</span><span class="p">);</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">}</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">.</span><span class="nc">code</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"> </span><span class="k">counter-reset</span><span class="p">:</span><span class="w"> </span><span class="n">lineno</span><span class="p">;</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">}</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">.</span><span class="nc">code</span><span class="w"> </span><span class="p">.</span><span class="nc">hll</span><span class="w"> </span><span class="p">{}</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="c">/* Following are about 50 lines that define the styling of each kind of pygments syntax highlight token. These lines</span></span> +<span class="lineno"></span><span class="line"><span class="c"> all look like the following: */</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="p">.</span><span class="nc">code</span><span class="w"> </span><span class="p">.</span><span class="nc">c</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--c-text</span><span class="p">);</span><span class="w"> </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="mi">400</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* Comment */</span> +</span></pre> +<p>This CSS does a few things:</p> +<blockquote> +<ol class="arabic simple"> +<li>It renders the <tt class="docutils literal"><pre></tt> code listing element using a two-column CSS <tt class="docutils literal">display: grid</tt> layout. The left column is +used for the line numbers, and the right column is used for the code lines.</li> +<li>It numbers the lines using a <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter">CSS Counter</a>. CSS counters are meant for things like numbering headings and such, but +they are a perfect fit for our purpose.</li> +<li>It inserts the counter value as the line number into the <tt class="docutils literal"><span <span class="pre">class="lineno"></span></tt> element's <tt class="docutils literal">::before</tt> +pseudo-element. A side effect of using the <tt class="docutils literal">::before</tt> pseudo-element is that without doing anything extra, the +line numbers will remain outside of the normal text selection so they will neither be highlighted when selecting +listing content, nor will they be copied when copy/pasting the listing content.</li> +<li>It inserts a string of <tt class="docutils literal"><span class="pre">"\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳"</span></tt> into the line number span's +<tt class="docutils literal">::after</tt> pseudo-element. This string evaluates to a sequence of unicode arrows separated by line breaks, and +starting with an empty line. The <tt class="docutils literal">::after</tt> pseudo-element is positioned using <tt class="docutils literal">position: absolute</tt>, and the +parent <tt class="docutils literal"><span <span class="pre">class="lineno"></span></tt> has <tt class="docutils literal">position: relative</tt> set. This way, the arrow pseudo-element gets placed on +top of the lineno span without affecting the layout at all. By setting <tt class="docutils literal">overflow: clip</tt> on the parent <tt class="docutils literal"><span +<span class="pre">class="lineno"></span></tt>, the arrow pseudo-element gets cut off vertically wherever the parent lineno element naturally +ends.</li> +</ol> +</blockquote> +<p>The line number span is inserted into the parent <tt class="docutils literal"><pre></tt> element's CSS grid using <tt class="docutils literal"><span class="pre">align-self:</span> stretch</tt>, which +causes it to vertically stretch to fill the available space. Since the line number span only contains the line number, +its minimum height is a single line. As a result, it will stretch higher only when the corresponding code line in the +right grid column stretches vertically because of line wrapping. When that happens, part of the arrow pseudo-element +starts showing through from behind the <tt class="docutils literal">overflow: clip</tt> of the line number span, and one arrow gets rendered for each +wrapped listing line.</p> +<p>When the page is too narrow, we don't want the code listing's lines to wrapp into a column of single characters. To +prevent that, we simply set a <tt class="docutils literal"><span class="pre">min-width</span></tt> on the <tt class="docutils literal"><span <span class="pre">class="line"></span></tt> in the right column, and set <tt class="docutils literal"><span class="pre">overflow-x:</span> +auto</tt> on the listing <tt class="docutils literal"><pre></tt>. This results in a horizontal scroll bar appearing whenever the listing gets too narrow.</p> +<p>You can try out the line wrapping by resizing this page!</p> +</div> +<div class="section" id="rst2html-wrapper"> +<h2>rst2html wrapper</h2> +<p>Here is the python <tt class="docutils literal">rst2html</tt> wrapper that monkey-patches code rendering. I made hugo invoke this while building the +page by simply overriding the <tt class="docutils literal">PATH</tt> environment variable.</p> +<pre class="code python literal-block"> +<span class="lineno"></span><span class="line"><span class="ch">#!/usr/bin/env python3</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="c1"># Based on https://gist.github.com/mastbaum/2655700 for the basic plugin scaffolding</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="kn">import</span><span class="w"> </span><span class="nn">sys</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="kn">import</span><span class="w"> </span><span class="nn">re</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="kn">import</span><span class="w"> </span><span class="nn">docutils.core</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="kn">from</span><span class="w"> </span><span class="nn">docutils.transforms</span><span class="w"> </span><span class="kn">import</span> <span class="n">Transform</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="kn">from</span><span class="w"> </span><span class="nn">docutils.nodes</span><span class="w"> </span><span class="kn">import</span> <span class="n">TextElement</span><span class="p">,</span> <span class="n">Inline</span><span class="p">,</span> <span class="n">Text</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="kn">from</span><span class="w"> </span><span class="nn">docutils.parsers.rst</span><span class="w"> </span><span class="kn">import</span> <span class="n">Directive</span><span class="p">,</span> <span class="n">directives</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="kn">from</span><span class="w"> </span><span class="nn">docutils.writers.html4css1</span><span class="w"> </span><span class="kn">import</span> <span class="n">Writer</span><span class="p">,</span> <span class="n">HTMLTranslator</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="k">class</span><span class="w"> </span><span class="nc">UnfuckedHTMLTranslator</span><span class="p">(</span><span class="n">HTMLTranslator</span><span class="p">):</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">def</span><span class="w"> </span><span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="o">*</span><span class="n">args</span><span class="p">,</span> <span class="o">**</span><span class="n">kwargs</span><span class="p">):</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">(</span><span class="o">*</span><span class="n">args</span><span class="p">,</span> <span class="o">**</span><span class="n">kwargs</span><span class="p">)</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="bp">self</span><span class="o">.</span><span class="n">in_literal_block</span> <span class="o">=</span> <span class="kc">False</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">def</span><span class="w"> </span><span class="nf">visit_literal_block</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">node</span><span class="p">):</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="c1"># Insert an empty "lineno" span before each line. We insert the line numbers using pure CSS in a ::before</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="c1"># pseudo-element. This has the added advantage that the line numbers don't get included in text selection.</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="c1"># These line number spans are also used to show line continuation markers when a line is wrapped.</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="bp">self</span><span class="o">.</span><span class="n">in_literal_block</span> <span class="o">=</span> <span class="kc">True</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="bp">self</span><span class="o">.</span><span class="n">body</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">starttag</span><span class="p">(</span><span class="n">node</span><span class="p">,</span> <span class="s1">'pre'</span><span class="p">,</span> <span class="n">CLASS</span><span class="o">=</span><span class="s1">'literal-block'</span><span class="p">))</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="bp">self</span><span class="o">.</span><span class="n">body</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="s1">'<span class="lineno"></span><span class="line">'</span><span class="p">)</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">def</span><span class="w"> </span><span class="nf">depart_literal_block</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">node</span><span class="p">):</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="bp">self</span><span class="o">.</span><span class="n">in_literal_block</span> <span class="o">=</span> <span class="kc">False</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="bp">self</span><span class="o">.</span><span class="n">body</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="s1">'</span><span class="se">\n</span><span class="s1"></span></pre></span><span class="se">\n</span><span class="s1">'</span><span class="p">)</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">def</span><span class="w"> </span><span class="nf">visit_Text</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">node</span><span class="p">):</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">if</span> <span class="bp">self</span><span class="o">.</span><span class="n">in_literal_block</span><span class="p">:</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">for</span> <span class="n">match</span> <span class="ow">in</span> <span class="n">re</span><span class="o">.</span><span class="n">finditer</span><span class="p">(</span><span class="s1">'([^</span><span class="se">\n</span><span class="s1">]*)(</span><span class="se">\n</span><span class="s1">|$)'</span><span class="p">,</span> <span class="n">node</span><span class="o">.</span><span class="n">astext</span><span class="p">()):</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="n">text</span><span class="p">,</span> <span class="n">end</span> <span class="o">=</span> <span class="n">match</span><span class="o">.</span><span class="n">groups</span><span class="p">()</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">if</span> <span class="n">text</span><span class="p">:</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="n">visit_Text</span><span class="p">(</span><span class="n">Text</span><span class="p">(</span><span class="n">text</span><span class="p">))</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">if</span> <span class="n">end</span> <span class="o">==</span> <span class="s1">'</span><span class="se">\n</span><span class="s1">'</span><span class="p">:</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">if</span> <span class="nb">isinstance</span><span class="p">(</span><span class="n">node</span><span class="o">.</span><span class="n">parent</span><span class="p">,</span> <span class="n">Inline</span><span class="p">):</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="bp">self</span><span class="o">.</span><span class="n">depart_inline</span><span class="p">(</span><span class="n">node</span><span class="o">.</span><span class="n">parent</span><span class="p">)</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="bp">self</span><span class="o">.</span><span class="n">body</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="sa">f</span><span class="s1">'</span></span><span class="se">\n</span><span class="s1"><span class="lineno"></span><span class="line">'</span><span class="p">)</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">if</span> <span class="nb">isinstance</span><span class="p">(</span><span class="n">node</span><span class="o">.</span><span class="n">parent</span><span class="p">,</span> <span class="n">Inline</span><span class="p">):</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="bp">self</span><span class="o">.</span><span class="n">visit_inline</span><span class="p">(</span><span class="n">node</span><span class="o">.</span><span class="n">parent</span><span class="p">)</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="k">else</span><span class="p">:</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span> <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="n">visit_Text</span><span class="p">(</span><span class="n">node</span><span class="p">)</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="n">html_writer</span> <span class="o">=</span> <span class="n">Writer</span><span class="p">()</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="n">html_writer</span><span class="o">.</span><span class="n">translator_class</span> <span class="o">=</span> <span class="n">UnfuckedHTMLTranslator</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="n">docutils</span><span class="o">.</span><span class="n">core</span><span class="o">.</span><span class="n">publish_cmdline</span><span class="p">(</span><span class="n">writer</span><span class="o">=</span><span class="n">html_writer</span><span class="p">)</span> +</span></pre> +</div> +</div> + </main><footer> + Copyright © 2025 Jan Sebastian Götte + / <a href="/about/">About</a> + / <a href="/imprint/">Imprint</a> +</footer> +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } + </script> + </body> +</html> diff --git a/blog/hsm-basics/index.html b/blog/hsm-basics/index.html index 0c9a062..cfa72b9 100644 --- a/blog/hsm-basics/index.html +++ b/blog/hsm-basics/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,12 +40,10 @@ </ul> <strong>2019-05-17</strong> </header> - <main> + <main data-pagefind-body> <div class="document"> -<div class="section" id="hardware-security-modules-and-security-research-and-cryptography"> -<h2>Hardware Security Modules and Security Research and Cryptography</h2> <p>On May 17 2019 I gave a short presentation on the fundamentals of hardware security modules at the weekly seminar of Prof. Mori's security research working group at Waseda University. The motivation for this was that outside of low-level hardware security people and people working in the financial industry HSMs are not thought about that often. In @@ -45,7 +51,6 @@ particular most network or systems security people would not consider them an op really interesting to think about what could be done with an HSM in conjunction with modern cryptography (instead of just plain old RSA-OAEP and AES-CBC).</p> <p><a class="reference external" href="mori_semi_hsm_talk_web.pdf">Click here to download a PDF with the slides for this talk.</a></p> -</div> <div class="section" id="ideas-for-research-in-hsms"> <h2>Ideas for research in HSMs</h2> <p>Preparing for this talk brought me back to some research ideas I've been working on for a while now. Since I'm not sure @@ -224,17 +229,30 @@ while not providing better sensitivity.</p> </div> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/ihsm-worlds-first-diy-hsm/index.html b/blog/ihsm-worlds-first-diy-hsm/index.html index 67a3732..b393484 100644 --- a/blog/ihsm-worlds-first-diy-hsm/index.html +++ b/blog/ihsm-worlds-first-diy-hsm/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,7 +40,7 @@ </ul> <strong>2021-11-23</strong> </header> - <main> + <main data-pagefind-body> <div class="document" id="world-s-first-diy-hsm"> <h1 class="title">World's First DIY HSM</h1> @@ -65,17 +73,30 @@ could go out and build. We are planning to release this sort of documentation at focusing our effort on the next iteration of the design instead. Stay tuned for updates ;)</p> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/index.html b/blog/index.html index d8947b2..f50aa1b 100644 --- a/blog/index.html +++ b/blog/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,17 +40,50 @@ </header> <main class="cards"> - <div class="intro"> - <div class="document"> + <div class="card"><h3><a href="/blog/wsdiff-static-html-diffs/">wsdiff: Responsive diffs in plain HTML</a></h3><strong>2025-07-25</strong> + + <div class="summary"> + <div class="document"> + + +<p>There's many tools that render diffs on the web, but almost none that work well on small screens such as phones. I fixed this by publishing wsdiff, a diffing tool written in Python that produces diffs as beautiful, responsive, static, self-contained HTML pages. wsdiffs wrap text to fit the window, and dynamically switch between unified and split diffs based on screen size using only CSS.</p> +</div> + <a href="http://jaseg.de/blog/wsdiff-static-html-diffs/">Read more</a> + </div> +</div> + + <div class="card"><h3><a href="/blog/css-only-code-blocks/">Code listings with nice line wrapping and line numbers from plain CSS</a></h3><strong>2025-07-23</strong> + + <div class="summary"> + <div class="document"> + + +<p>Code listings in web pages are often a bit of a pain to use. Usually, they don't wrap on small screens. Also, copy-pasting code from a code listing often copies the line numbers along with the code. Finally, many implementations use heavyweight HTML and/or javascript, making them slow to render. For this blog, I wrote a little CSS hack that renders nice, wrapping code blocks with line continuation markers in plain CSS without any JS.</p> +</div> + <a href="http://jaseg.de/blog/css-only-code-blocks/">Read more</a> + </div> +</div> + <div class="card"><h3><a href="/blog/jupyterlab-notebook-file-oneliner/">Getting the .ipynb Notebook File Location From a Running Jupyter Lab Notebook</a></h3><strong>2025-06-29</strong> + <div class="summary"> + <div class="document"> + +<p>If you need to get the path of the ipynb file in a running #Jupyter notebook, this one-liner will do the trick. It seems chatgpt is confused, and a bunch of other approaches on the web look fragile and/or unnecessarily complex to me.</p> +</div> + <a href="http://jaseg.de/blog/jupyterlab-notebook-file-oneliner/">Read more</a> + </div> </div> - </div> - <div class="card"><h3><a href="/blog/8seg/">8seg</a></h3><strong>2023-12-26</strong> + + <div class="card"><h3><a href="/blog/8seg/">8seg Technical Overview</a></h3><strong>2023-12-26</strong> <div class="summary"> - 8seg Technical Overview Prologue German hacker culture has this intense love for things that light up in colorful ways. Like for many others in this community, I have always been fascinated by LEDs. One of the first things on my pile of unfinished projects was to build my own LED matrix and use it to display text. When I started that project, I was still new to electronics. Back then, commercial LED matrices were limited to red or green color only, and were very expensive, so there was an incentive to build your own. + <div class="document"> + + +<p>8seg is a large-scale LED light art installation that displays text on a 1.5 meter high, 30 meter wide 8-segment display made from cheap LED tape.</p> +</div> <a href="http://jaseg.de/blog/8seg/">Read more</a> </div> </div> @@ -50,7 +91,11 @@ <div class="card"><h3><a href="/blog/telekom-gpon-sfp/">Ubiquiti EdgeRouter on Deutsche Telekom GPON Fiber</a></h3><strong>2022-02-21</strong> <div class="summary"> - Disclaimer I provide this guide as a reference for other knowledgeable users without any warranty. Please feel free to use this as a resource but do not hold me responsible if this does not work for you. There is a significant chance that due to an error on my side or due to Telekom changing their setup this guide will not work for you, and you may end up having to pay for an unsuccessful Telekom technician visit. + <div class="document"> + + +<p>Short tutorial on getting a Deutsche Telekom GPON internet connection running using a SFP ONU unit in an Ubiquiti EdgeRouter.</p> +</div> <a href="http://jaseg.de/blog/telekom-gpon-sfp/">Read more</a> </div> </div> @@ -58,7 +103,11 @@ <div class="card"><h3><a href="/blog/ihsm-worlds-first-diy-hsm/">New Paper on Inertial Hardware Security Modules</a></h3><strong>2021-11-23</strong> <div class="summary"> - World's First DIY HSM Last week, Prof. Dr. Björn Scheuermann and I have published our first joint paper on Hardware Security Modules. In our paper, we introduce Inertial Hardware Security Modules (IHSMs), a new way of building high-security HSMs from basic components. I think the technology we demonstrate in our paper might allow some neat applications where some civil organization deploys a service that no one, not even they themselves, can snoop on. + <div class="document"> + + +<p>Paper announcement: We have published a paper on how you can DIY a tamper-sensing hardware security module from any single-board computer using a moving tamper-sensing mesh made from cheap PCBs.</p> +</div> <a href="http://jaseg.de/blog/ihsm-worlds-first-diy-hsm/">Read more</a> </div> </div> @@ -66,7 +115,11 @@ <div class="card"><h3><a href="/blog/kicad-mesh-plugin/">Kicad Mesh Plugin</a></h3><strong>2020-08-18</strong> <div class="summary"> - Tamper Detection Meshes Cryptography is at the foundation of our modern, networked world. From email to card payment infrastructure in brick and mortar stores, cryptographic keys secure almost every part of our digital lives againts cybercriminals or curious surveillance capitalists. Without cryptography, many of the things we routinely do in our lives such as paying for groceries with a credit card, messaging a friend on Signal or unlocking a car with its keyfob would not be possible. + <div class="document"> + + +<p>I wrote a little KiCad plugin that you can use to create security meshes, heaters and other things where you need one or more traces cover the entire surface of a PCB. The plugin supports arbitrary PCB shapes, cutouts, and can route around existing footprints and traces on the PCB.</p> +</div> <a href="http://jaseg.de/blog/kicad-mesh-plugin/">Read more</a> </div> </div> @@ -74,7 +127,11 @@ <div class="card"><h3><a href="/blog/private-contact-discovery/">Private Contact Discovery</a></h3><strong>2019-06-22</strong> <div class="summary"> - Private Contact Discovery Private Contact Discovery (PCD) is the formal name for the problem modern smartphone messenger applications have on installation: Given a user's address book, find out which of their contacts also use the same messenger without the messenger's servers learning anything about the user's address book. The widespread non-private way to do this is to simply upload the user's address book to the app's operator's servers and do an SQL JOIN keyed on the phone number field against the database of registered users. + <div class="document"> + + +<p>I gave a short introduction into Private Contact Discovery protocols at our university workgroup.</p> +</div> <a href="http://jaseg.de/blog/private-contact-discovery/">Read more</a> </div> </div> @@ -82,7 +139,11 @@ <div class="card"><h3><a href="/blog/hsm-basics/">Hardware Security Module Basics</a></h3><strong>2019-05-17</strong> <div class="summary"> - Hardware Security Modules and Security Research and Cryptography On May 17 2019 I gave a short presentation on the fundamentals of hardware security modules at the weekly seminar of Prof. Mori's security research working group at Waseda University. The motivation for this was that outside of low-level hardware security people and people working in the financial industry HSMs are not thought about that often. In particular most network or systems security people would not consider them an option. + <div class="document"> + + +<p>I gave a short introduction into Hardware Security Modules at our university workgroup, including an overview on interesting research directions.</p> +</div> <a href="http://jaseg.de/blog/hsm-basics/">Read more</a> </div> </div> @@ -90,9 +151,18 @@ <div class="card"><h3><a href="/blog/serial-protocols/">How to talk to your microcontroller over serial</a></h3><strong>2018-05-19</strong> <div class="summary"> - Scroll to the end for the TL;DR. -In this article I will give an overview on the protocols spoken on serial ports, highlighting common pitfalls. I will summarize some points on how to design a serial protocol that is simple to implement and works reliably even under error conditions. -If you have done low-level microcontroller firmware you will regularly have had to stuff some data up a serial port to another microcontroller or to a computer. + <div class="document"> + + +<p>Scroll to the end for the <a class="reference internal" href="#conclusion">TL;DR</a>.</p> +<p>In this article I will give an overview on the protocols spoken on serial ports, highlighting common pitfalls. I will +summarize some points on how to design a serial protocol that is simple to implement and works reliably even under error +conditions.</p> +<p>If you have done low-level microcontroller firmware you will regularly have had to stuff some data up a serial port to +another microcontroller or to a computer. In the age of USB, an old-school serial port is still the simplest and +quickest way to get communication to a control computer up and running. Integrating a ten thousand-line USB stack into +your firmware and writing the necessary low-level drivers on the host side might take days. Poking a few registers to +set up your UART to talk to an external hardware USB to serial converter is a matter of minutes.</p></div> <a href="http://jaseg.de/blog/serial-protocols/">Read more</a> </div> </div> @@ -100,8 +170,11 @@ If you have done low-level microcontroller firmware you will regularly have had <div class="card"><h3><a href="/blog/thors-hammer/">Thor's Hammer</a></h3><strong>2018-05-03</strong> <div class="summary"> - In case you were having an inferiority complex because your friends' IBM Model M keyboards are so much louder than the shitty rubber dome freebie you got with your pc... Here's the solution: Thor's Hammer, a simple typing cadence enhancer for PS/2 keyboards. -Your browser does not support the HTML5 video tag. A demonstration of the completed project. h264 download / webm download The connects to the keyboard's PS/2 clock line and briefly actuates a large solenoid on each key press. + <div class="document"> + + +<p>In case you were having an inferiority complex because your friends' IBM Model M keyboards are so much louder than the shitty rubber dome freebie you got with your pc... Here's the solution: Thor's Hammer, a simple typing cadence enhancer for PS/2 keyboards.</p> +</div> <a href="http://jaseg.de/blog/thors-hammer/">Read more</a> </div> </div> @@ -109,7 +182,11 @@ Your browser does not support the HTML5 video tag. A demonstration of the comple <div class="card"><h3><a href="/blog/multichannel-led-driver/">32-Channel LED tape driver</a></h3><strong>2018-05-02</strong> <div class="summary"> - Theoretical basics Together, a friend and I outfitted the small staircase at Berlin's Chaos Computer Club with nice, shiny RGB-WW LED tape for ambient lighting. This tape is like regular RGB tape but with an additional warm white channel, which makes for much more natural pastels and whites. There are several variants of RGBW tape. Cheap ones have separate RGB and white LEDs, which is fine for indirect lighting but does not work for direct lighting. + <div class="document"> + + +<p>Together, a friend and I outfitted the small staircase at Berlin's Chaos Computer Club with nice, shiny RGB-WW LED tape for ambient lighting. For this installation, I made a 32-channel LED driver that achieves high dynamic range on all 32 channels using a cheap microcontroller by using Binary Code Modulation.</p> +</div> <a href="http://jaseg.de/blog/multichannel-led-driver/">Read more</a> </div> </div> @@ -117,7 +194,11 @@ Your browser does not support the HTML5 video tag. A demonstration of the comple <div class="card"><h3><a href="/blog/wifi-led-driver/">Wifi Led Driver</a></h3><strong>2018-05-02</strong> <div class="summary"> - Project motivation The completed driver board installed in the 3D-printed case. This device can now be connected to 12V and two segments of LED tape that can then be controlled trough Wifi. The ESP8266 module goes on the pin header on the left and was removed for this picture. After the multichannel LED driver was completed, I was just getting used to controlling LEDs at 14-bit resolution. I liked the board we designed in this project, but at 32 channels it was a bit large for most use cases. + <div class="document"> + + +<p>After the multichannel LED driver was completed, I was just getting used to controlling LEDs at 14-bit resolution. I liked the board we designed in this project, but at 32 channels it was a bit large for most use cases. Sometimes I just want to pop a piece of LED tape or two somewhere, but I don't need a full 32 channels of control. I ended up thinking that a smaller version of the 32-channel driver that didn't require a separate control computer would be handy. So I sat down and designed a variant of the design with only 8 channels instead of 32 and an on-board ESP8266 module instead of the RS485 transceiver for WiFi connectivity.</p> +</div> <a href="http://jaseg.de/blog/wifi-led-driver/">Read more</a> </div> </div> @@ -125,23 +206,40 @@ Your browser does not support the HTML5 video tag. A demonstration of the comple <div class="card"><h3><a href="/blog/led-characterization/">LED Characterization</a></h3><strong>2018-05-02</strong> <div class="summary"> - Preface Recently, I have been working on a small driver for ambient lighting using 12V LED strips like you can get inexpensively from China. I wanted to be able to just throw one of these somewhere, stick down some LED tape, hook it up to a small transformer and be able to control it through Wifi. When I was writing the firmware, I noticed that when fading between different colors, the colors look all wrong! + <div class="document"> + + +<p>Recently, I have been working on a small driver for ambient lighting using 12V LED strips like you can get inexpensively from China. I wanted to be able to just throw one of these somewhere, stick down some LED tape, hook it up to a small transformer and be able to control it through Wifi. When I was writing the firmware, I noticed that when fading between different colors, the colors look <em>all wrong</em>! This observation led me down a rabbit hole of color perception and LED peculiarities.</p> +</div> <a href="http://jaseg.de/blog/led-characterization/">Read more</a> </div> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/index.xml b/blog/index.xml index 5054ab1..718b0d0 100644 --- a/blog/index.xml +++ b/blog/index.xml @@ -4,90 +4,108 @@ <title>Blog on Home</title> <link>http://jaseg.de/blog/</link> <description>Recent content in Blog on Home</description> - <generator>Hugo -- gohugo.io</generator> + <generator>Hugo</generator> <language>en-us</language> <copyright>Jan Sebastian Götte</copyright> - <lastBuildDate>Tue, 26 Dec 2023 15:26:00 +0100</lastBuildDate> + <lastBuildDate>Fri, 25 Jul 2025 23:42:00 +0100</lastBuildDate> <atom:link href="http://jaseg.de/blog/index.xml" rel="self" type="application/rss+xml" /> <item> - <title>8seg</title> + <title>wsdiff: Responsive diffs in plain HTML</title> + <link>http://jaseg.de/blog/wsdiff-static-html-diffs/</link> + <pubDate>Fri, 25 Jul 2025 23:42:00 +0100</pubDate> + <guid>http://jaseg.de/blog/wsdiff-static-html-diffs/</guid> + <description><div class="document">


<p>There's many tools that render diffs on the web, but almost none that work well on small screens such as phones. I fixed this by publishing wsdiff, a diffing tool written in Python that produces diffs as beautiful, responsive, static, self-contained HTML pages. wsdiffs wrap text to fit the window, and dynamically switch between unified and split diffs based on screen size using only CSS.</p>
</div></description> + </item> + <item> + <title>Code listings with nice line wrapping and line numbers from plain CSS</title> + <link>http://jaseg.de/blog/css-only-code-blocks/</link> + <pubDate>Wed, 23 Jul 2025 23:42:00 +0100</pubDate> + <guid>http://jaseg.de/blog/css-only-code-blocks/</guid> + <description><div class="document">


<p>Code listings in web pages are often a bit of a pain to use. Usually, they don't wrap on small screens. Also, copy-pasting code from a code listing often copies the line numbers along with the code. Finally, many implementations use heavyweight HTML and/or javascript, making them slow to render. For this blog, I wrote a little CSS hack that renders nice, wrapping code blocks with line continuation markers in plain CSS without any JS.</p>
</div></description> + </item> + <item> + <title>Getting the .ipynb Notebook File Location From a Running Jupyter Lab Notebook</title> + <link>http://jaseg.de/blog/jupyterlab-notebook-file-oneliner/</link> + <pubDate>Sun, 29 Jun 2025 23:42:00 +0100</pubDate> + <guid>http://jaseg.de/blog/jupyterlab-notebook-file-oneliner/</guid> + <description><div class="document">


<p>If you need to get the path of the ipynb file in a running #Jupyter notebook, this one-liner will do the trick. It seems chatgpt is confused, and a bunch of other approaches on the web look fragile and/or unnecessarily complex to me.</p>
</div></description> + </item> + <item> + <title>8seg Technical Overview</title> <link>http://jaseg.de/blog/8seg/</link> <pubDate>Tue, 26 Dec 2023 15:26:00 +0100</pubDate> <guid>http://jaseg.de/blog/8seg/</guid> - <description>8seg Technical Overview Prologue German hacker culture has this intense love for things that light up in colorful ways. Like for many others in this community, I have always been fascinated by LEDs. One of the first things on my pile of unfinished projects was to build my own LED matrix and use it to display text. When I started that project, I was still new to electronics. Back then, commercial LED matrices were limited to red or green color only, and were very expensive, so there was an incentive to build your own.</description> + <description><div class="document">


<p>8seg is a large-scale LED light art installation that displays text on a 1.5 meter high, 30 meter wide 8-segment display made from cheap LED tape.</p>
</div></description> </item> <item> <title>Ubiquiti EdgeRouter on Deutsche Telekom GPON Fiber</title> <link>http://jaseg.de/blog/telekom-gpon-sfp/</link> <pubDate>Mon, 21 Feb 2022 20:00:00 +0100</pubDate> <guid>http://jaseg.de/blog/telekom-gpon-sfp/</guid> - <description>Disclaimer I provide this guide as a reference for other knowledgeable users without any warranty. Please feel free to use this as a resource but do not hold me responsible if this does not work for you. There is a significant chance that due to an error on my side or due to Telekom changing their setup this guide will not work for you, and you may end up having to pay for an unsuccessful Telekom technician visit.</description> + <description><div class="document">


<p>Short tutorial on getting a Deutsche Telekom GPON internet connection running using a SFP ONU unit in an Ubiquiti EdgeRouter.</p>
</div></description> </item> <item> <title>New Paper on Inertial Hardware Security Modules</title> <link>http://jaseg.de/blog/ihsm-worlds-first-diy-hsm/</link> <pubDate>Tue, 23 Nov 2021 23:42:20 +0100</pubDate> <guid>http://jaseg.de/blog/ihsm-worlds-first-diy-hsm/</guid> - <description>World's First DIY HSM Last week, Prof. Dr. Björn Scheuermann and I have published our first joint paper on Hardware Security Modules. In our paper, we introduce Inertial Hardware Security Modules (IHSMs), a new way of building high-security HSMs from basic components. I think the technology we demonstrate in our paper might allow some neat applications where some civil organization deploys a service that no one, not even they themselves, can snoop on.</description> + <description><div class="document">


<p>Paper announcement: We have published a paper on how you can DIY a tamper-sensing hardware security module from any single-board computer using a moving tamper-sensing mesh made from cheap PCBs.</p>
</div></description> </item> <item> <title>Kicad Mesh Plugin</title> <link>http://jaseg.de/blog/kicad-mesh-plugin/</link> <pubDate>Tue, 18 Aug 2020 13:15:39 +0200</pubDate> <guid>http://jaseg.de/blog/kicad-mesh-plugin/</guid> - <description>Tamper Detection Meshes Cryptography is at the foundation of our modern, networked world. From email to card payment infrastructure in brick and mortar stores, cryptographic keys secure almost every part of our digital lives againts cybercriminals or curious surveillance capitalists. Without cryptography, many of the things we routinely do in our lives such as paying for groceries with a credit card, messaging a friend on Signal or unlocking a car with its keyfob would not be possible.</description> + <description><div class="document">


<p>I wrote a little KiCad plugin that you can use to create security meshes, heaters and other things where you need one or more traces cover the entire surface of a PCB. The plugin supports arbitrary PCB shapes, cutouts, and can route around existing footprints and traces on the PCB.</p>
</div></description> </item> <item> <title>Private Contact Discovery</title> <link>http://jaseg.de/blog/private-contact-discovery/</link> <pubDate>Sat, 22 Jun 2019 10:30:00 +0800</pubDate> <guid>http://jaseg.de/blog/private-contact-discovery/</guid> - <description>Private Contact Discovery Private Contact Discovery (PCD) is the formal name for the problem modern smartphone messenger applications have on installation: Given a user's address book, find out which of their contacts also use the same messenger without the messenger's servers learning anything about the user's address book. The widespread non-private way to do this is to simply upload the user's address book to the app's operator's servers and do an SQL JOIN keyed on the phone number field against the database of registered users.</description> + <description><div class="document">


<p>I gave a short introduction into Private Contact Discovery protocols at our university workgroup.</p>
</div></description> </item> <item> <title>Hardware Security Module Basics</title> <link>http://jaseg.de/blog/hsm-basics/</link> <pubDate>Fri, 17 May 2019 15:29:20 +0800</pubDate> <guid>http://jaseg.de/blog/hsm-basics/</guid> - <description>Hardware Security Modules and Security Research and Cryptography On May 17 2019 I gave a short presentation on the fundamentals of hardware security modules at the weekly seminar of Prof. Mori's security research working group at Waseda University. The motivation for this was that outside of low-level hardware security people and people working in the financial industry HSMs are not thought about that often. In particular most network or systems security people would not consider them an option.</description> + <description><div class="document">


<p>I gave a short introduction into Hardware Security Modules at our university workgroup, including an overview on interesting research directions.</p>
</div></description> </item> <item> <title>How to talk to your microcontroller over serial</title> <link>http://jaseg.de/blog/serial-protocols/</link> <pubDate>Sat, 19 May 2018 08:09:46 +0200</pubDate> <guid>http://jaseg.de/blog/serial-protocols/</guid> - <description>Scroll to the end for the TL;DR. -In this article I will give an overview on the protocols spoken on serial ports, highlighting common pitfalls. I will summarize some points on how to design a serial protocol that is simple to implement and works reliably even under error conditions. -If you have done low-level microcontroller firmware you will regularly have had to stuff some data up a serial port to another microcontroller or to a computer.</description> + <description><div class="document">


<p>Scroll to the end for the <a class="reference internal" href="#conclusion">TL;DR</a>.</p>
<p>In this article I will give an overview on the protocols spoken on serial ports, highlighting common pitfalls. I will
summarize some points on how to design a serial protocol that is simple to implement and works reliably even under error
conditions.</p>
<p>If you have done low-level microcontroller firmware you will regularly have had to stuff some data up a serial port to
another microcontroller or to a computer. In the age of USB, an old-school serial port is still the simplest and
quickest way to get communication to a control computer up and running. Integrating a ten thousand-line USB stack into
your firmware and writing the necessary low-level drivers on the host side might take days. Poking a few registers to
set up your UART to talk to an external hardware USB to serial converter is a matter of minutes.</p></div></description> </item> <item> <title>Thor's Hammer</title> <link>http://jaseg.de/blog/thors-hammer/</link> <pubDate>Thu, 03 May 2018 11:59:37 +0200</pubDate> <guid>http://jaseg.de/blog/thors-hammer/</guid> - <description>In case you were having an inferiority complex because your friends' IBM Model M keyboards are so much louder than the shitty rubber dome freebie you got with your pc... Here's the solution: Thor's Hammer, a simple typing cadence enhancer for PS/2 keyboards. -Your browser does not support the HTML5 video tag. A demonstration of the completed project. h264 download / webm download The connects to the keyboard's PS/2 clock line and briefly actuates a large solenoid on each key press.</description> + <description><div class="document">


<p>In case you were having an inferiority complex because your friends' IBM Model M keyboards are so much louder than the shitty rubber dome freebie you got with your pc... Here's the solution: Thor's Hammer, a simple typing cadence enhancer for PS/2 keyboards.</p>
</div></description> </item> <item> <title>32-Channel LED tape driver</title> <link>http://jaseg.de/blog/multichannel-led-driver/</link> <pubDate>Wed, 02 May 2018 11:31:14 +0200</pubDate> <guid>http://jaseg.de/blog/multichannel-led-driver/</guid> - <description>Theoretical basics Together, a friend and I outfitted the small staircase at Berlin's Chaos Computer Club with nice, shiny RGB-WW LED tape for ambient lighting. This tape is like regular RGB tape but with an additional warm white channel, which makes for much more natural pastels and whites. There are several variants of RGBW tape. Cheap ones have separate RGB and white LEDs, which is fine for indirect lighting but does not work for direct lighting.</description> + <description><div class="document">


<p>Together, a friend and I outfitted the small staircase at Berlin's Chaos Computer Club with nice, shiny RGB-WW LED tape for ambient lighting. For this installation, I made a 32-channel LED driver that achieves high dynamic range on all 32 channels using a cheap microcontroller by using Binary Code Modulation.</p>
</div></description> </item> <item> <title>Wifi Led Driver</title> <link>http://jaseg.de/blog/wifi-led-driver/</link> <pubDate>Wed, 02 May 2018 11:31:03 +0200</pubDate> <guid>http://jaseg.de/blog/wifi-led-driver/</guid> - <description>Project motivation The completed driver board installed in the 3D-printed case. This device can now be connected to 12V and two segments of LED tape that can then be controlled trough Wifi. The ESP8266 module goes on the pin header on the left and was removed for this picture. After the multichannel LED driver was completed, I was just getting used to controlling LEDs at 14-bit resolution. I liked the board we designed in this project, but at 32 channels it was a bit large for most use cases.</description> + <description><div class="document">


<p>After the multichannel LED driver was completed, I was just getting used to controlling LEDs at 14-bit resolution. I liked the board we designed in this project, but at 32 channels it was a bit large for most use cases. Sometimes I just want to pop a piece of LED tape or two somewhere, but I don't need a full 32 channels of control. I ended up thinking that a smaller version of the 32-channel driver that didn't require a separate control computer would be handy. So I sat down and designed a variant of the design with only 8 channels instead of 32 and an on-board ESP8266 module instead of the RS485 transceiver for WiFi connectivity.</p>
</div></description> </item> <item> <title>LED Characterization</title> <link>http://jaseg.de/blog/led-characterization/</link> <pubDate>Wed, 02 May 2018 11:18:38 +0200</pubDate> <guid>http://jaseg.de/blog/led-characterization/</guid> - <description>Preface Recently, I have been working on a small driver for ambient lighting using 12V LED strips like you can get inexpensively from China. I wanted to be able to just throw one of these somewhere, stick down some LED tape, hook it up to a small transformer and be able to control it through Wifi. When I was writing the firmware, I noticed that when fading between different colors, the colors look all wrong!</description> + <description><div class="document">


<p>Recently, I have been working on a small driver for ambient lighting using 12V LED strips like you can get inexpensively from China. I wanted to be able to just throw one of these somewhere, stick down some LED tape, hook it up to a small transformer and be able to control it through Wifi. When I was writing the firmware, I noticed that when fading between different colors, the colors look <em>all wrong</em>! This observation led me down a rabbit hole of color perception and LED peculiarities.</p>
</div></description> </item> </channel> </rss> diff --git a/blog/jupyterlab-notebook-file-oneliner/index.html b/blog/jupyterlab-notebook-file-oneliner/index.html new file mode 100644 index 0000000..9eb93a2 --- /dev/null +++ b/blog/jupyterlab-notebook-file-oneliner/index.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>Getting the .ipynb Notebook File Location From a Running Jupyter Lab Notebook | Home</title> + <meta name="description" content=""> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="mobile-web-app-capable" content="yes"> + <meta name="color-scheme" content="dark light"> + <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> +</head> +<body><nav> + <div class="internal"> + + <a href="/" title="Home">Home</a> + <a href="/blog/" title="Blog">Blog</a> + <a href="/projects/" title="Projects">Projects</a> + <a href="/about/" title="About">About</a> + </div> + <div class="search"> + <div id="search"></div> + </div> + <div class="external"> + <a href="https://git.jaseg.de/" title="cgit">cgit</a> + <a href="https://github.com/jaseg" title="Github">Github</a> + <a href="https://gitlab.com/neinseg" title="Gitlab">Gitlab</a> + <a href="https://chaos.social/@jaseg" title="Mastodon">Mastodon</a> + </span> +</nav> + + <header> + <h1>Getting the .ipynb Notebook File Location From a Running Jupyter Lab Notebook</h1> +<ul class="breadcrumbs"> + <li><a href="/">jaseg.de</a></li> + <li><a href="/blog/">Blog</a></li><li><a href="/blog/jupyterlab-notebook-file-oneliner/">Getting the .ipynb Notebook File Location From a Running Jupyter Lab Notebook</a></li> +</ul> + <strong>2025-06-29</strong> + </header> + <main data-pagefind-body> + <div class="document"> + + +<p>If you need to get the path of the ipynb file in a running #Jupyter notebook, this one-liner will do the trick. It seems +chatgpt is confused, and a bunch of other approaches on the web look fragile and/or unnecessarily complex to me.</p> +<pre class="code python literal-block"> +<span class="lineno"></span><span class="line"><span class="kn">import</span><span class="w"> </span><span class="nn">sys</span><span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span><span class="n">Path</span><span class="p">(</span><span class="n">json</span><span class="o">.</span><span class="n">loads</span><span class="p">(</span><span class="n">Path</span><span class="p">(</span><span class="n">sys</span><span class="o">.</span><span class="n">argv</span><span class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">])</span><span class="o">.</span><span class="n">read_bytes</span><span class="p">())[</span><span class="s1">'jupyter_session'</span><span class="p">])</span> +</span></pre> +<p>The way this works is that for each notebook, jupyter starts a python "kernel" process that actually runs the notebook's +code. That kernel gets a json file with info on the notebook's location on the disk passed through its command line. +Since we're running code in that exact python process, we can just grab that json file from sys.argv, and read it +ourselves.</p> +</div> + </main><footer> + Copyright © 2025 Jan Sebastian Götte + / <a href="/about/">About</a> + / <a href="/imprint/">Imprint</a> +</footer> +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } + </script> + </body> +</html> diff --git a/blog/kicad-mesh-plugin/index.html b/blog/kicad-mesh-plugin/index.html index 4c0315d..2119817 100644 --- a/blog/kicad-mesh-plugin/index.html +++ b/blog/kicad-mesh-plugin/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,12 +40,12 @@ </ul> <strong>2020-08-18</strong> </header> - <main> + <main data-pagefind-body> <div class="document"> -<figure> -<img src="images/anim.webp" style="max-width: 20em"> +<figure data-pagefind-ignore> + <img src="images/anim.webp" style="max-width: 20em"> </figure><div class="section" id="tamper-detection-meshes"> <h2>Tamper Detection Meshes</h2> <p>Cryptography is at the foundation of our modern, networked world. From email to card payment infrastructure in brick and @@ -61,7 +69,7 @@ One of the core cryptographic components in financial applications are smartcard most countries nowadays. These smartcards contain a small, specialized cryptographic microcontroller that is designed to be hard to tamper with. Though one of the design goals of the system is to reduce the amount of sensitive information stored on the card, things such as copying of a card can only be hindered by making the chip hard to read out.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/modern_art.svg" style="max-width: 20em"> </figure><p>With smartcards being the means of choice on one side of the counter in electronic payments, on the other side of the counter a different technology prevails. Attacks on payment terminals are bound to have much more dire consequences than @@ -105,14 +113,14 @@ into grid cells that are fully inside the set boundaries. All cells outside or g this step.</p> <p>I decided to implement this auto-router in a KiCAD plugin. Though KiCADs plugin API is not the best, it was just about usable for this task.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/kicad-mesh-outline.png" alt="KiCAD showing an irregular board shape with rounded corners and indents. In the middle of the board there is a footprint for a 4-pin surface-mount pin header."> <figcaption>The process starts out with the mesh shape being defined inside KiCAD. The mesh's outline is drawn onto one of the graphical "Eco" layers. A footprint is placed to serve as a placeholder for the mesh's connections to the outside world. This footprint is later used as the starting point for the mesh generation algorithm.</figcaption> -</figure><figure> +</figure><figure data-pagefind-ignore> <img src="images/grid-vis-plain.svg" alt="A vizualization of the grid fitting process. Over the mesh's irregular outline a grid is drawn. In this picture, all grid cells that are fully inside the grid are shown. Grid cells that overlap the mesh border are highlighted. Grid cells outside of the mesh border are not drawn."> @@ -128,7 +136,7 @@ algorithm it yields more or less organized-looking results. Below are five examp levels of randomness with the cells colored according to their distance from the tree root. 0% randomness means that the algorithm is going to try cells in forward direction first on every step, and only then try out left and right. 100% means that on every step, the algorithm is choosing a new direction at random.</p> -<div class="subfigure"> +<div class="subfigure" data-pagefind-ignore> <figure> <img src="images/cells-0.svg" alt="a completely organized looking grid with spiral patterns all over."> <figcaption>0%</figcaption> @@ -155,34 +163,34 @@ it. The core observation here is that there is only 16 possible ways a cell can each of which it can either be connected to or not, which results in 2^4 options. If you consider rotations and mirroring, this works out to rotations or mirrored versions of only six base tiles: The empty tile, a tile with all four sides connected, a straight through, a 90 degree bend, and a "T"-junction—see the illustration below.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/maze_tiles_plain.svg" style="max-width: 20em"> <figcaption> There are six possible tile types in our connectivity graph inside its square tiling. This graphic illustrates all sixteen rotations of these with how they would look in a two-conductor mesh. </figcaption> </figure><p>After tiling the grid according to the key above, we get the result below.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/tiles-25-small.svg"> <figcaption> An auto-routed mesh with traces colored according to tile types. </figcaption> -</figure><figure> +</figure><figure data-pagefind-ignore> <img src="images/traces-25-small.svg"> <figcaption> The same mesh, but with traces all black. </figcaption> </figure><p>Putting it all together got me the KiCAD plugin you can see in the screenshot below.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/kicad-mesh-settings2.png"> <figcaption> The plugin settings window open. </figcaption> -</figure><figure> -<img src="images/kicad-mesh-result-large.png"> -<figcaption> - After runing the plugin, the generated mesh looks like this in pcbnew. -</figcaption> +</figure><figure data-pagefind-ignore> + <img src="images/kicad-mesh-result-large.png"> + <figcaption> + After runing the plugin, the generated mesh looks like this in pcbnew. + </figcaption> </figure><p>I am fairly happy with the result, but getting there was a medium pain. Especially KiCAD's plugin API is still very unfinieshed. It is hard to use, most parts are completely undocumented and if you use anything but its most basic parts things tend to break. One particular pain point for me was that after generating the mesh, the traces have been added to @@ -194,24 +202,37 @@ making a copy of the board file first and treating mesh generation as a non-reve .. raw:: html - <figure> + <figure data-pagefind-ignore> <img src="images/grid-vis-plain.svg" alt=""> <figcaption></figcaption> </figure> --> </div> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/led-characterization/index.html b/blog/led-characterization/index.html index 294b090..96fe4ea 100644 --- a/blog/led-characterization/index.html +++ b/blog/led-characterization/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,7 +40,7 @@ </ul> <strong>2018-05-02</strong> </header> - <main> + <main data-pagefind-body> <div class="document"> @@ -47,7 +55,7 @@ perception and LED peculiarities.</p> interesting, with up to two RGB or RGBW (red-green-blue-white) LED tapes. For ambient lighting high color resolution was really important so you could dim it down a lot without flickering. I ended up using the same driver stage I used in the <a class="reference external" href="http://jaseg.de/blog/multichannel-led-driver/">multichannel LED driver</a> project for its great color resolution and low hardware requirements.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/rgb_cube.svg" alt="An illustration of the RGB color cube."> <figcaption>An illustration of the RGB color cube. <a href="https://commons.wikimedia.org/wiki/File:RGB_color_cube.svg">Picture</a> by @@ -68,7 +76,7 @@ color. <a class="reference external" href="https://en.wikipedia.org/wiki/HSL_and <em>perceptual</em> color spaces such as <a class="reference external" href="https://en.wikipedia.org/wiki/CIE_1931_color_space">XYZ (CIE 1931)</a> and <a class="reference external" href="https://en.wikipedia.org/wiki/Lab_color_space">CIE Lab/LCh</a> were born, further improving this alignment. In this mathematical model, mapping a color from one color space into another color space is just a coordinate transformation.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/hsv_cylinder.png" alt="An illustration of the HSV color space as a cylinder."> <figcaption>An illustration of the HSV color space as a cylinder. <a href="https://commons.wikimedia.org/wiki/File:HSV_color_solid_cylinder.png">Picture</a> by @@ -83,7 +91,7 @@ XYZ. The fat white curve is a projection of the <em>monochromatic spectral locus XYZ for pure visible wavelengths.</p> <p>As you can see, sRGB is <em>much</em> smaller than XYZ or even the part within the monochromatic locus that we can perceive. In particular in the blues and greens we loose <em>a lot</em> of colors to sRGB.</p> -<figure> +<figure data-pagefind-ignore> <video controls loop> <source src="video/sRGB.mkv" type="video/h264"> <source src="video/sRGB.webm" type="video/webm"> @@ -108,7 +116,7 @@ In practice, the blue channel of my RGB tape to me <em>looks</em> much brighter may be of a slightly different hue compared to the reference red used in <a class="reference external" href="https://en.wikipedia.org/wiki/SRGB">sRGB</a> which would also skew the RGB color space.</li> </ul> -<div class="subfigure"> +<div class="subfigure" data-pagefind-ignore> <figure> <img src="images/driver_ringing_strong.jpg" alt="Strong ringing on the LED voltage waveform edge at about 100% overshoot during about 70% of the cycle time."> @@ -160,7 +168,7 @@ specific to the semiconductor used and is quite precise. White LEDs are in fact and re-emits a broader spectrum of more yellow-ish wavelengths instead. The final LED spectrum is a superposition of both spectra, with some of the original blue light leaking through the phosphor mixing with the broadband yellow spectrum of the phosphor.</p> -<div class="subfigure"> +<div class="subfigure" data-pagefind-ignore> <figure> <img src="images/spectrograph_step1_parts.jpg"> <figcaption>The ingredients. The cup of coffee and Madoka Magica DVD set are essential to the eventual @@ -188,7 +196,7 @@ spectrum of the phosphor.</p> flaw: I wanted to acquire quantitative measurements of brightness across the spectrum. Since I don't have a precise technical datasheet specifying the spectral response of any of my cameras I can't compare the absolute brightness of different colors on their pictures. Some other sensor was needed.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/daylight_spectrum_dvd.jpg"> <figcaption>The daylight spectrum as seen using a DVD as a grating. <a href="https://commons.wikimedia.org/wiki/File:SpectresSolaires-DVD.jpg">Picture</a> by @@ -219,7 +227,7 @@ rejection and a regular non-inverting amplifier using another op-amp from the sa transimpedance amplifier output. I put all the passives setting amplifier response (the gain-setting resistors and the filter resistor and capacitors) on a small removable adapter so I could easily change them if necessary. I put a small trimpot on the virtual ground both amplifers use as a reference so I could trim that if necessary.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/preamp_schematic.jpg" alt="A drawing of the photodiode preamplifier's schematic"> <figcaption>The photodiode preamplifier schematic. Schematic drawn with an unlicensed copy of DaveCAD.</figcaption> @@ -232,7 +240,7 @@ SMD-to-DIP adapter.</p> <p>Flying-wire construction is just fine for this low-frequency circuit. In a high-speed photodiode preamp, the transimpedance amplifier circuit would be highly sensitive to stray capacitance, but we're not aiming at high speed here.</p> -<div class="subfigure"> +<div class="subfigure" data-pagefind-ignore> <figure> <img src="images/preamp_front.jpg"> <figcaption>The front side of the preamplifier board.</figcaption> @@ -258,7 +266,7 @@ this wire does not put too much strain on it.</p> the linear stage in front of the spectrometer viewing window. A line on the screen paper points to the photodiode die in parallel to the linear stage allowing precise alignment.</p> <p>The whole unit with photodiode preamplifier, linear stage, photodiode and stepper motor driver finally looks like this:</p> -<figure> +<figure data-pagefind-ignore> <img src="images/electronics_whole.jpg" alt="The complete electronics setup of the spectrograph. In the back there is the DVD drive stepper stage. In front of it, mounted on a piece of wood are a small USB-to-12V switching-regulator module to power the stepper motor in the top left, below on the bottom left is the @@ -295,7 +303,7 @@ notebook is capable of live-updating a graph with the in-progress spectrum's dat check for when I made some mistake easy to spot in the resulting data.</p> <p>After one color channel is captured, the LED tape has to be manually set to the next color and the next measurement can begin.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/raw_plot_cheap_rgb.svg" alt="A plot with three wide peaks, two large peaks on both sides and one smaller one in the middle. The middle one overlaps the two on the sides. The large ones are about 2.5V in amplitude. Overall, the plot is about 300 stepper steps wide with each peak being around 130 steps wide."> @@ -324,7 +332,7 @@ estimate of the three colors' peaks' locations and widths.</p> <p>The photodiode's response is strongly wavelength-dependent. In particular in the blue band, the photodiode's sensitivity gets very poor down to about 20% at the edge to ultraviolet. This effect is strong enough to move the apparent location of the blue peak towards red.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/photodiode_sensitivity.svg" alt="A plot of photodiode sensitivity against wavelength relative to peak sensitivity at 820nm. The sensitivity rises from 20% at 380nm approximately linearly to 80% at 620nm, then the rise rolls off."> @@ -338,7 +346,7 @@ using this coarse measurement. Then all three channel peaks are measured in the estimate is produced by a least-squares fit of a linear function. This fine estimate is then used for a second sensitivity correction of all original measurements and the scale is changed from stepper motor step count to wavelength in nanometers.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/processed_plot_cheap_rgb.svg" alt="A plot with three wide peaks, all three of different heights. The leftmost peak is highest at 6nA, the middle peak lowest at 1.6nA and the rightmost peak in between at 4nA. The middle one overlaps the two on the sides. Overall, the plot spans about 300nm on its x axis with @@ -365,7 +373,7 @@ space (colorful) as well as sRGB (white) for comparison plotted within CIE 1931 both so for this illustration the LED color space has been scaled to fit. These figures were made with blender and a few lines of python. The blender project file including all settings and the python script to generate the color space models can be found in the <a class="reference external" href="https://github.com/jaseg/led_drv">project repo</a>.</p> -<figure> +<figure data-pagefind-ignore> <video controls loop> <source src="video/led_within_srgb_scale=1.0.mkv" type="video/h264"> <source src="video/led_within_srgb_scale=1.0.webm" type="video/webm"> @@ -415,17 +423,30 @@ can view the Jupyter notebook most of the analysis above <a class="reference ext </div> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/multichannel-led-driver/index.html b/blog/multichannel-led-driver/index.html index 22fa408..0077335 100644 --- a/blog/multichannel-led-driver/index.html +++ b/blog/multichannel-led-driver/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,7 +40,7 @@ </ul> <strong>2018-05-02</strong> </header> - <main> + <main data-pagefind-body> <div class="document"> @@ -64,7 +72,7 @@ and it looks like it's off to your eye. If you turn it off right at the end, it' super bright to your eye. Now, if you turn it off halfway into the cycle, it's on half the time and it will look to your eye as half as bright as before. This means that you can control the LED's brightness with only a digital signal and good timing.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/pwm_schema.jpg" alt="A visualization of PWM at different duty cycles."> <figcaption>Waveforms of two PWM cycles at different duty cycles.</figcaption> </figure><p>PWM works great if you have a dedicated PWM output on your microcontroller. It's extremely simple in both hardware and @@ -104,7 +112,7 @@ channel's duty cycle into chunks the size of these bit periods. The amazingly el can guess from the name these bit periods are weighted in powers of two. Say the shortest bit period lasts 1 microsecond. Then the second-shortest bit period is 2 microseconds and the third is 4, the fifth 8, the sixth 16 and so on.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/bcm_schema.jpg" alt="A visualization of BCM at different duty cycles."> <figcaption>Waveforms of a single 4-bit BCM cycle at different duty cycles. This BCM can produce 16 different levels.</figcaption> @@ -139,7 +147,7 @@ drive a couple of amps into the LED tape from the weak outputs of the shift regi <em>reset</em> inputs. We set the timer to PWM mode so we can generate pulses with precise timing. At the beginning of each bit period, a pulse will strobe the data for this bit period that we shifted in previously. At the end of the bit period, one pulse will reset the shift register and one will strobe the freshly-reset zeros into the outputs.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/olsndot_output_schematic.jpg" alt="From left to right, we see the STM32, one of the shift registers, and the LEDs and MOSFETs. The LED tape is driven to ground by the MOSFETs, which are in turn directly driven from the shift register outputs. The shift register is wired up to the STM32 with its clock and data @@ -176,7 +184,7 @@ values. It turned out that our extremely simple LED driving circuit consisting o driving a MOSFET, which in turn directly drives the LED tape was maybe a little bit too simple. After some measurements it turned out that we were looking at about 6Vpp of ringing on the driver's output voltage. The picture below is the voltrage we saw on our oscilloscope on the LED tape.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/driver_ringing_strong.jpg" alt="Strong ringing on the LED voltage waveform edge at about 100% overshoot during about 70% of the cycle time."> <figcaption>Bad ringing on the LED output voltage caused by wiring inductance. Note that the effect on the @@ -185,7 +193,7 @@ voltrage we saw on our oscilloscope on the LED tape.</p> <h4>Dynamic switching behavior: Cause and Effect</h4> <p>A bit of <a class="reference external" href="http://www.analog.com/en/design-center/design-tools-and-calculators/ltspice-simulator.html">LTSpice</a> action later we found that the inductance of the few metres of cable leading to the LED tape is the likely culprit. The figure below is the schematic used for the simulations.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/driver_output_ltspice_schematic.jpg" alt="The LTSpice schematic of one output of the driver, taking into account the shift register's output ESR and the wiring ESL."> <figcaption>The schematic of the simulation in LTSpice</figcaption> @@ -193,7 +201,7 @@ likely culprit. The figure below is the schematic used for the simulations.</p> in full. Combined with the cable inductance, this works out to a considerable lag of the rising edge of the LED current, and bad ringing on its falling edge. Below is the voltage on the LED output from an LTSpice simulation of our driver.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/overshoot_sim_r0.svg" alt="The result of the LTSpice simulation of our driver output. The LED current shows similar ringing to what we measured using the oscilloscope. Interestingly, the gate voltage shows strong ringing, too."> @@ -206,14 +214,14 @@ capacitance. The result of this is that the LED current passing the wire's ESL r series inductance gets excited slightly less, and the overshoot decreases. Below is a picture of the waveform with the damping resistor in place and a picture of our measurement for comparison. The resistor values don't agree perfectly since the estimated ESL and stray capacitance of the wiring is probably way off.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/driver_ringing_weak.jpg" alt="Weak ringing on the LED voltage waveform edge at about 30% overshoot during about 20% of the cycle time."> <figcaption>Adding a resistor in front of the MOSFET gate to slow the transition damped the ringing somewhat, but ultimately it cannot be eliminated entirely. Note how you can actually see the miller plateau on the trailing edge of this signal. </figcaption> -</figure><figure> +</figure><figure data-pagefind-ignore> <img src="images/overshoot_sim_r100.svg" alt="The result of the LTSpice simulation of our driver output with an extra 100 Ohms between shift register output and MOSFET gate. Similar to the oscilloscope measurement the ringing is much reduced in its amplitude."> @@ -224,13 +232,13 @@ shift register's output at very small duty cycles (1µs or less). This is caused plateau</a>. For illustration, below is a graph of both the excitation waveform (the boxy line) and the resulting LED current (the other ones) both without damping (top) and with 220Ω damping (bottom). As you can see the effective duty cycle of the LED current is not at all equal to the 50% duty cycle of the excitation square wave.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/asymmetric_iled.svg" alt="The result of an LTSpice simulation of the LED duty cycle without and with damping. Dampening widens the LED current waveform from 50% duty cycle with sharp edges to about 80% duty cycle with soft edges."> <figcaption>Simulated LED duty cycle with and without damping. The damping resistance used in this simulation was 220Ω.</figcaption> -</figure><figure> +</figure><figure data-pagefind-ignore> <img src="images/asymmetric_vgate.svg" alt="The gate voltages in the spice simulation above. The undamped response shows sharp edges with the miller plateau being a barely noticeable step, but with strong ringing on the trailing edge. The damped response shows RC-like slow-edges, but has wide miller plateaus on both edges @@ -261,7 +269,7 @@ calibration, the LED driver is set to enable each single BCM period in turn, i.e shielding against both stray light and electromagnetic interference and a photodiode looking at the LED tape. We used the venerable <a class="reference external" href="http://www.vishay.com/docs/81521/bpw34.pdf">BPW34</a> photodiode in our setup as I had a bunch leftover from another project and because they are quite sensitive owing to their physically large die area.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/linearization_setup.jpg" alt="The led measurement setup consists of several PCBs and a breadboard linked with a bunch of wires and a big tin can to shield the LEDs and the photodiode. A large sub-D connector is put into the top of the tin can as a feed-through for the LED tape's control signals and the @@ -283,7 +291,7 @@ ADC chips I had in my parts bin.</p> measurement at each step. Later on, these measurements can be plotted to visualize the resulting slope's linearity, and we can even do a simulation of the resulting brightness for all possible control values by just adding the measured photocurrents for a certain BCM setpoint just as our retinas would do.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/driver_linearity_raw.svg" alt=""> <figcaption> A plot of the measured brightness of our LED tape for each BCM period. The brightness values are normalized @@ -298,7 +306,7 @@ photocurrents for a certain BCM setpoint just as our retinas would do.</p> </figure><p>While it would be possible to fully automate the optimization of BCM driver lookup tables, we needed only one and in the end I just sat down and manually tweaked the ideal values we initially calculated until I liked the result. You can see the resulting brightness curve below.</p> -<div class="subfigure"> +<div class="subfigure" data-pagefind-ignore> <figure> <img src="images/uncorrected_brightness_sim.svg" alt=""> <figcaption> @@ -344,7 +352,7 @@ and control their outputs.</p> </div> <div class="section" id="conclusion"> <h3>Conclusion</h3> -<div class="subfigure"> +<div class="subfigure" data-pagefind-ignore> <figure> <a href="images/olsndot_schematic.png"> <img src="images/olsndot_schematic.png" alt="A picture of the LED driver schematic"> @@ -368,17 +376,30 @@ analyze the brightness measurement data <a class="reference external" href="http </div> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/private-contact-discovery/index.html b/blog/private-contact-discovery/index.html index cbb3814..0ad3659 100644 --- a/blog/private-contact-discovery/index.html +++ b/blog/private-contact-discovery/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,9 +40,9 @@ </ul> <strong>2019-06-22</strong> </header> - <main> - <div class="document" id="private-contact-discovery"> -<h1 class="title">Private Contact Discovery</h1> + <main data-pagefind-body> + <div class="document"> + <p>Private Contact Discovery (PCD) is the formal name for the problem modern smartphone messenger applications have on installation: Given a user's address book, find out which of their contacts also use the same messenger without the @@ -64,17 +72,30 @@ users benefit from improved privacy, but your company might be able to avoid a b accountability issues by simply not producing as much sensitive data in the first place.</p> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/serial-protocols/index.html b/blog/serial-protocols/index.html index c5e2fd0..562b451 100644 --- a/blog/serial-protocols/index.html +++ b/blog/serial-protocols/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,7 +40,7 @@ </ul> <strong>2018-05-19</strong> </header> - <main> + <main data-pagefind-body> <div class="document"> @@ -235,17 +243,30 @@ want to set a large framebuffer in pieces, do it in a <a class="reference extern </div> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/telekom-gpon-sfp/index.html b/blog/telekom-gpon-sfp/index.html index e077a44..1351707 100644 --- a/blog/telekom-gpon-sfp/index.html +++ b/blog/telekom-gpon-sfp/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,7 +40,7 @@ </ul> <strong>2022-02-21</strong> </header> - <main> + <main data-pagefind-body> <div class="document"> @@ -116,7 +124,7 @@ this, configure the eth5 interface (which is the SFP port) to use the static IP <figure style="width: 20em"> <a href="images/edgerouter_sfp_config.png"> <img src="images/edgerouter_sfp_config.png" alt="The EdgeRouter's graphical configuration interface showing IP - address 10.10.1.2/24 being configured for interface eth5, which is the SFP interface."> + address 10.10.1.2/24 being configured for interface eth5, which is the SFP interface." data-pagefind-ignore> </a> <figcaption>SFP interface configuration to access the SFP ONU from a laptop connected to the EdgeRouter's LAN port</figcaption> @@ -129,7 +137,7 @@ protocol, with destination address <tt class="docutils literal">10.10.1.0/24</tt <a href="images/edgerouter_snat_config.png"> <img src="images/edgerouter_snat_config.png" alt="The EdgeRouter's graphical configuration interface showing a source NAT being configured for interface eth5 for TCP protocol connections to destination address 10.10.1.1 - using masquerading."> + using masquerading." data-pagefind-ignore> </a> <figcaption>Source NAT configuration to access the SFP ONU from LAN. eth5, masquerading on, TCP, destination 10.10.1.1 (the SFP ONU's IP).</figcaption> @@ -146,7 +154,7 @@ default login credentials for the device are admin/1234.</p> <a href="images/sfp_onu_web_if.png"> <img src="images/sfp_onu_web_if.png" alt="The SFP ONU configuration web interface is a basic-looking website with a big Zyxel logo on it. It has menu options named status, setup and management. It shows a system overview - page that lists the device's uptime and software version."> + page that lists the device's uptime and software version." data-pagefind-ignore> </a> <figcaption>The SFP ONU's web interface.</figcaption> </figure></div> @@ -161,7 +169,7 @@ on this page.</p> <a href="images/sfp_onu_ploam_pw_config.png"> <img src="images/sfp_onu_ploam_pw_config.png" alt="The SFP ONU configuration web interface shows its SLID configuration page. A text field labelled SLID asks the user to enter a value of at most ten characters. As - an example, abcdefg123 is listed."> + an example, abcdefg123 is listed." data-pagefind-ignore> </a> <figcaption>The SFP ONU's config interface to set SLID/PLOAM PW/ONT-Installationskennung.</figcaption> </figure><p>Press "Save Config" on the top right of the web page, then select "Reset ONU" and click "Apply" under the "Reset ONU" @@ -170,7 +178,7 @@ link on the left. Make sure to not select the factory reset option instead.</p> <a href="images/sfp_onu_reset.png"> <img src="images/sfp_onu_reset.png" alt="The SFP ONU configuration web interface shows its reset ONU page. There are two options labelled Reset ONU and Reset to factory default settings. The reset ONU option is - selected."> + selected." data-pagefind-ignore> </a> <figcaption>Rebooting the SFP ONU.</figcaption> </figure><p>With the ONU configured, after the reset the "GPON Information" page from the left menu under "Status" from the top menu @@ -210,17 +218,30 @@ collected <a class="reference external" href="https://github.com/xvzf/zyxel-gpon </div> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/thors-hammer/index.html b/blog/thors-hammer/index.html index d012aad..366194d 100644 --- a/blog/thors-hammer/index.html +++ b/blog/thors-hammer/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,14 +40,14 @@ </ul> <strong>2018-05-03</strong> </header> - <main> + <main data-pagefind-body> <div class="document"> <p>In case you were having an inferiority complex because your friends' IBM Model M keyboards are so much louder than the shitty rubber dome freebie you got with your pc... Here's the solution: Thor's Hammer, a simple typing cadence enhancer for <a class="reference external" href="https://en.wikipedia.org/wiki/PS/2_port">PS/2</a> keyboards.</p> -<figure> +<figure data-pagefind-ignore> <video controls loop> <source src="video/thors_hammer.mov" type="video/h264"> <source src="video/thors_hammer.webm" type="video/webm"> @@ -56,13 +64,13 @@ want to send data. In case of a keyboard that's the case when a key is pressed o LED state, otherwise the clock line is silent. We ignore the LED activity for now as it's generally coupled to key presses. By just triggering an NE555 configured as astable flipflop we can stretch each train of clock pulses to a pulse a few tens of milliseconds long that is enough to actuate the solenoid.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/thors_hammer_schematic.jpg" alt="The schematic of the PS2 driver"> <figcaption>The schematic of the driver stretching the PS/2 clock pulses to drive the solenoid.</figcaption> </figure><p>Since PS/2 sends each key press and key release separately this circuit will pulse twice per keystroke. It would be possible to ignore one of them but I figure the added noise just adds to the experience.</p> <p>Built on a breadboard, the circuit looks like this.</p> -<figure> +<figure data-pagefind-ignore> <img src="images/thors_hammer_breadboard.jpg" alt="The circuit built on a breadboard"> <figcaption>The completed circuit built up on a breadboard and attached to a keyboard.</figcaption> </figure><p>Since my solenoid did not have a tensioning spring I used a rubber band and some vinyl tape to make an adjustable @@ -72,17 +80,30 @@ excitation duration using the potentiometer. My particular solenoid was a bit sl board as shims between the plunger and the case to limit the plunger's travel inside the solenoid core.</p> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/wifi-led-driver/index.html b/blog/wifi-led-driver/index.html index 7df1f28..88a4b62 100644 --- a/blog/wifi-led-driver/index.html +++ b/blog/wifi-led-driver/index.html @@ -7,6 +7,11 @@ <meta name="mobile-web-app-capable" content="yes"> <meta name="color-scheme" content="dark light"> <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> </head> <body><nav> <div class="internal"> @@ -16,6 +21,9 @@ <a href="/projects/" title="Projects">Projects</a> <a href="/about/" title="About">About</a> </div> + <div class="search"> + <div id="search"></div> + </div> <div class="external"> <a href="https://git.jaseg.de/" title="cgit">cgit</a> <a href="https://github.com/jaseg" title="Github">Github</a> @@ -32,14 +40,14 @@ </ul> <strong>2018-05-02</strong> </header> - <main> + <main data-pagefind-body> <div class="document"> <div class="section" id="project-motivation"> <h2>Project motivation</h2> <!-- FIXME finished project picture with LED tape --> -<figure> +<figure data-pagefind-ignore> <img src="images/board_in_case.small.jpg"> <figcaption>The completed driver board installed in the 3D-printed case. This device can now be connected to 12V and two segments of LED tape that can then be controlled trough Wifi. The ESP8266 module goes on the pin @@ -67,7 +75,7 @@ a small <a class="reference external" href="https://en.wikipedia.org/wiki/Surfac currents their <a class="reference external" href="http://m.littelfuse.com/~/media/electronics/datasheets/resettable_ptcs/littelfuse_ptc_16r_datasheet.pdf.pdf">trip times get long enough that they become unlikely to trip in time to save anything</a>, so plain old non-resettable fuses would be the way to go there.</p> <!-- FIXME finished board photos --> <!-- FIXME board with test tape picture --> -<div class="subfigure"> +<div class="subfigure" data-pagefind-ignore> <figure> <img src="images/schematic.png"> <figcaption> @@ -87,7 +95,7 @@ currents their <a class="reference external" href="http://m.littelfuse.com/~/med <a href="resource/schematic_and_pcb.pdf">Download PDF</a> </figcaption> </figure> -</div><figure> +</div><figure data-pagefind-ignore> <img src="images/boards.small.jpg"> <figcaption>The completed PCBs of this project (front) and the `multichannel LED driver`_ project the driver circuitry was derived from (back). @@ -130,17 +138,30 @@ violence.</p> </div> </div> </main><footer> - Copyright © 2023 Jan Sebastian Götte + Copyright © 2025 Jan Sebastian Götte / <a href="/about/">About</a> / <a href="/imprint/">Imprint</a> </footer> -<script> - if(navigator.getEnvironmentIntegrity!==undefined)document.querySelector('body').innerHTML=`<h1>Your browser - contains Google DRM</h1>"Web Environment Integrity" is a Google euphemism for a DRM that is designed to - prevent ad-blocking, and which Google has forced into their browsers against widespread public opposition. - In support of an open web, this website does not function with this DRM. Please install a browser such - as <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> that respects your freedom and supports - ad blockers.`; +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } </script> </body> </html> diff --git a/blog/wsdiff-static-html-diffs/index.html b/blog/wsdiff-static-html-diffs/index.html new file mode 100644 index 0000000..5bccd82 --- /dev/null +++ b/blog/wsdiff-static-html-diffs/index.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>wsdiff: Responsive diffs in plain HTML | Home</title> + <meta name="description" content=""> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="mobile-web-app-capable" content="yes"> + <meta name="color-scheme" content="dark light"> + <link rel="stylesheet" href="/style.css"> + + <link rel="preload" href="/fonts/roboto_slab/RobotoSlab-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Regular.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-Bold.woff2" as="font" type="font/woff2" crossorigin /> + <link rel="preload" href="/fonts/nyght-serif-main/fonts/WEB/NyghtSerif-BoldItalic.woff2" as="font" type="font/woff2" crossorigin /> +</head> +<body><nav> + <div class="internal"> + + <a href="/" title="Home">Home</a> + <a href="/blog/" title="Blog">Blog</a> + <a href="/projects/" title="Projects">Projects</a> + <a href="/about/" title="About">About</a> + </div> + <div class="search"> + <div id="search"></div> + </div> + <div class="external"> + <a href="https://git.jaseg.de/" title="cgit">cgit</a> + <a href="https://github.com/jaseg" title="Github">Github</a> + <a href="https://gitlab.com/neinseg" title="Gitlab">Gitlab</a> + <a href="https://chaos.social/@jaseg" title="Mastodon">Mastodon</a> + </span> +</nav> + + <header> + <h1>wsdiff: Responsive diffs in plain HTML</h1> +<ul class="breadcrumbs"> + <li><a href="/">jaseg.de</a></li> + <li><a href="/blog/">Blog</a></li><li><a href="/blog/wsdiff-static-html-diffs/">wsdiff: Responsive diffs in plain HTML</a></li> +</ul> + <strong>2025-07-25</strong> + </header> + <main data-pagefind-body> + <div class="document"> + + +<div class="section" id="demo"> +<h2>Demo</h2> +<p>First off, have a demo. Because of the width of this page, the output will show an unified diff. To try out the split +diff layout, make sure your browser window is wide enough and open the demo in a separate tab using <a class="reference external" href="/wsdiff-example.html">this link</a>.</p> +<p>wsdiff supports dark mode, try it out by toggling dark mode in your operating system!</p> +<iframe src="/wsdiff-example.html" style="width: 100%; height: 30em; border: 1px #d0d0d0 solid" id="wsdiff example diff"></iframe></div> +<div class="section" id="core-features"> +<h2>Core Features</h2> +<p>There's many tools that render diffs on the web, but almost none that work well on small screens such as phones. I fixed +this by publishing <a class="reference external" href="https://pypi.org/project/wsdiff/">wsdiff</a>, a diffing tool written in Python that produces diffs +as beautiful, responsive, static, self-contained HTML pages. wsdiffs wrap text to fit the window, and dynamically switch +between unified and split diffs based on screen size using only CSS.</p> +<div class="section" id="responsive-line-wrapping"> +<h3>Responsive Line Wrapping</h3> +<p>The first challenge I solved was wrapping source code lines to match the available screen space. Other tools often just +show horizontal scroll bars, which is an okay workaround when you're mostly working with hard-wrapped source code on a +laptop or desktop screen, but which results in catastrophic UX on any phone.</p> +<p>I solved line breaking with a combination of CSS-controlled, web-standard word breaking rules: <tt class="docutils literal"><span class="pre">overflow-wrap:</span> +anywhere</tt> for source code (<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap">MDN link</a>) and +<tt class="docutils literal"><span class="pre">white-space:</span> <span class="pre">pre-wrap</span></tt> to preserve whitespace accurately (<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space">MDN link</a>). To make both sides of the split diff align, and to +align line numbers with wrapped source code lines, the diff is laid out using a <a class="reference external" href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS grid layout</a>. In side-by-side +view, the layout has four columns: two for line numbers and two for the content. In unified view, the left ("old") +content column is dropped, and the deleted or modified lines that are highlighted in it in side-by-side view are slotted +into the remaining right column.</p> +<p>When soft-wrapping source code, text editors will often display a little curved arrow marker to indicate that a line was +soft-wrapped, and that there is not actually a newline character in the file at that location. wsdiff solves this +using the same technique I used for the soft-wrapping code blocks in this blog, described <a class="reference external" href="http://jaseg.de/blog/css-only-code-blocks/">here</a>. It inserts a string of <tt class="docutils literal"><span class="pre">"\a↳\a↳\a↳\a↳\a↳..."</span></tt> into the line number +element's <tt class="docutils literal">::after</tt> pseudo-element. This string evaluates to a sequence of unicode arrows separated by line breaks, +and starting with an empty line. The <tt class="docutils literal">::after</tt> pseudo-element is positioned using <tt class="docutils literal">position: absolute</tt>, and the +parent <tt class="docutils literal"><span <span class="pre">class="lineno"></span></tt> has <tt class="docutils literal">position: relative</tt> set. This way, the arrow pseudo-element gets placed on top +of the lineno span without affecting the layout at all. By setting <tt class="docutils literal">overflow: clip</tt> on the parent <tt class="docutils literal"><span +<span class="pre">class="lineno"></span></tt>, the arrow pseudo-element gets cut off vertically wherever the parent line number element naturally +ends. Since both the line and the line number element share a grid row, the line number element always matches the +height of the soft-wrapped line.</p> +</div> +<div class="section" id="responsive-split-unified-layout-selection"> +<h3>Responsive Split/Unified Layout Selection</h3> +<p>To dynamically change between unified and side-by-side views, wsdiff uses a web-standard <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries">Media Query</a>. By default, the +page is laid out for side-by-side view. In the HTML source, the diff is listed as it is displayed in side-by-side view, +with the old and new lines along with their line numbers interleaved.</p> +<p>The magic happens when the media query gets triggered by a narrow screen width. The media query re-adjusts the layout in +four core steps:</p> +<blockquote> +<ol class="arabic simple"> +<li>All unchanged lines in the left (old) column are hidden.</li> +<li>The left content column of the grid layout is hidden, so that now there are three columns: old line number, new line +number, and unified content.</li> +<li>All deleted or changed lines from the left (old) column are re-located to the right column. They naturally slot in +in the right spot because they already appear in the right order in the HTML source.</li> +<li>By slotting in the old lines in the right column, we have created gaps in the line number columns. Every deleted +line has an empty cell in the new line number column, and every inserted line has one in the old line number column. +The CSS adjusts the layout of these empty cells such that the border lines align nicely, and it overrides the +newline markers so that they only show in the right (new) line number column, not both.</li> +</ol> +</blockquote> +<p>Since this is all CSS, it happens automatically and near-instantly. Since it is using only web standard features, it +works across browsers and platforms.</p> +</div> +<div class="section" id="unchanged-line-folding-in-css"> +<h3>Unchanged Line Folding in CSS</h3> +<p>When showing the diff of a large file, it is usually best to hide large runs of unchanged lines. wsdiff does this +similar to code folding in text editors. When a long run of unchanged lines is detected, a marker is placed spanning the +diff. This marker contains a checkbox that can be toggled to hide the unchanged lines. This feature is done completely +in CSS using a <tt class="docutils literal"><span class="pre">:has(input[type="checkbox"]:checked)</span></tt> selector.</p> +<p>The actual mechanics are quite simple. To cleanly hide the lines, they must be placed in a container <tt class="docutils literal"><div></tt>. That div +has a CSS subgrid layout using <tt class="docutils literal">display: grid; <span class="pre">grid-template-columns:</span> subgrid;</tt>, meaning that its contents align to +the surrounding diff grid.</p> +</div> +<div class="section" id="dark-mode"> +<h3>Dark Mode</h3> +<p>Integrating a website with the OS-level dark mode is surprisingly easy. All you need is a <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries">Media Query</a> that selects +for <tt class="docutils literal">@media <span class="pre">(prefers-color-scheme:</span> dark)</tt> and you're good. wsdiff uses named colors using <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties">CSS Custom Properties</a>, so +the actual dark mode media query only needs to override these color properties, and the rest of the CSS will be +re-computed automatically.</p> +</div> +<div class="section" id="limitations-text-selection"> +<h3>Limitations: Text selection</h3> +<p>A limitation in having a combined, single HTML source for both side-by-side and unified diffs is that text selection +only works naturally in either mode. You can't make text selection work in both simultaneously without re-sorting the +lines in the HTML source, since there is no way to override the text selection order from pure CSS. In wsdiff, I worked +around this issue by just disabling text selection on the unchanged lines in the left (old) column, so selecting text in +the right column copies the unified diff as one would expect.</p> +</div> +</div> +<div class="section" id="try-it-yourself"> +<h2>Try it yourself!</h2> +<p>You can find the demo from above at <a class="reference external" href="/wsdiff-example.html">this link</a>.</p> +<p>You can install wsdiff yourself <a class="reference external" href="https://pypi.org/project/wsdiff/">from PyPI</a>:</p> +<pre class="code sh literal-block"> +<span class="lineno"></span><span class="line">$<span class="w"> </span>pip<span class="w"> </span>install<span class="w"> </span>-U<span class="w"> </span>wsdiff<span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span>Successfully<span class="w"> </span>installed<span class="w"> </span>wsdiff-0.3.1<span class="w"></span></span> +<span class="lineno"></span><span class="line"><span class="w"></span>$<span class="w"> </span>wsdiff<span class="w"> </span>old.py<span class="w"> </span>new.py<span class="w"> </span>-o<span class="w"> </span>diff.html +</span></pre> +</div> +</div> + </main><footer> + Copyright © 2025 Jan Sebastian Götte + / <a href="/about/">About</a> + / <a href="/imprint/">Imprint</a> +</footer> +<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script> + <script> + window.addEventListener('DOMContentLoaded', (event) => { + new PagefindUI({element: "#search", showSubResults: true}); + }); + </script> + <script type="speculationrules"> + { + "prerender": [ + { + "source": "document", + "where": { + "and": [ + {"href_matches": "/*"} + ] + }, + "eagerness": "moderate" + } + ] + } + </script> + </body> +</html> |