Posts and learnings about software development, functional programming, and the web.
Phil-Bastian Berndt
me@pbb.io
https://pbb.io/
2026-04-13T23:45:32.430882Z
<p>A simple CSS trick to make light-background screenshots look good in dark mode without maintaining two versions of every image.</p><p><a href="https://pbb.io/blog/invert-images-dark-mode-css">Read more…</a></p>
2026-03-21T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/invert-images-dark-mode-css
Inverting images for dark mode with pure CSS
2026-03-21T00:00:00Z
<p>Since v1.3.9, Bun supports <code>--parallel</code> and <code>--sequential</code> flags on <code>bun run</code>,
eliminating the need for <code>npm-run-all2</code>.</p>
<pre class="lumis"><code class="language-json" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">{</span>
</div><div class="line" data-line="2"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"scripts"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">{</span>
</div><div class="line" data-line="3"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"install"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"bun run --sequential 'install:*'"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">,</span>
</div><div class="line" data-line="4"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"install:copy-files"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"copy-files-from-to"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">,</span>
</div><div class="line" data-line="5"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"install:whatever"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"..."</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">,</span>
</div><div class="line" data-line="6"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"lint"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"bun run --parallel 'lint:*'"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">,</span>
</div><div class="line" data-line="7"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"lint:credo"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"mix credo --strict"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">,</span>
</div><div class="line" data-line="8"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"lint:eslint"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"eslint ."</span>
</div><div class="line" data-line="9"> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">}</span>
</div><div class="line" data-line="10"><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">}</span>
</div></code></pre>
<p>Glob patterns like <code>'install:*'</code> match all scripts with that prefix (just like <code>npm-run-all2</code>’s <code>run-s install:*</code>).</p>
2026-02-09T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/bun-run-parallel-sequential
TIL Bun has built-in parallel and sequential script running
2026-02-09T00:00:00Z
<p>If a test triggers noisy log output, you can use <code>ExUnit.CaptureLog.capture_log/2</code> to capture the noisy function:</p>
<pre class="lumis"><code class="language-elixir" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">import</span> <span style="color:#df8e1d; --lumis-latte-font-style:italic; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f9e2af; --lumis-mocha-font-style:italic; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">ExUnit.CaptureLog</span>
</div><div class="line" data-line="2">
</div><div class="line" data-line="3"><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">test</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"logs a warning"</span> <span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">do</span>
</div><div class="line" data-line="4"> <span style="color:#4c4f69; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cdd6f4; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">log</span> <span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">=</span> <span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">capture_log</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">fn</span> <span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-></span>
</div><div class="line" data-line="5"> <span style="color:#df8e1d; --lumis-latte-font-style:italic; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f9e2af; --lumis-mocha-font-style:italic; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">MyApp</span><span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">noisy_function</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span>
</div><div class="line" data-line="6"> <span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">end</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span>
</div><div class="line" data-line="7">
</div><div class="line" data-line="8"> <span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">assert</span> <span style="color:#4c4f69; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cdd6f4; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">log</span> <span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">=~</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"something went wrong"</span>
</div><div class="line" data-line="9"><span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">end</span>
</div></code></pre>
<p>To silence logs for the whole test, use the <code>@tag</code> attribute:</p>
<pre class="lumis"><code class="language-elixir" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">@</span><span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">tag </span><span style="color:#dd7878; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f2cdcd; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">capture_log: </span><span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">true</span>
</div><div class="line" data-line="2"><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">test</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"something that logs warnings"</span> <span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">do</span>
</div><div class="line" data-line="3"> <span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">assert</span> <span style="color:#df8e1d; --lumis-latte-font-style:italic; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f9e2af; --lumis-mocha-font-style:italic; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">MyApp</span><span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">noisy_function</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span> <span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">==</span> <span style="color:#dd7878; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f2cdcd; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:ok</span>
</div><div class="line" data-line="4"><span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">end</span>
</div></code></pre>
<p>Or enable it globally for all tests in <code>test/test_helper.exs</code>:</p>
<pre class="lumis"><code class="language-elixir" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#df8e1d; --lumis-latte-font-style:italic; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f9e2af; --lumis-mocha-font-style:italic; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">ExUnit</span><span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">start</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#dd7878; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f2cdcd; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">capture_log: </span><span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">true</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span>
</div></code></pre>
<p>In all cases, if a test fails, the captured logs are included in the failure report.</p>
2025-12-05T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/exunit-capture-log
TIL how to suppress log output in ExUnit tests
2025-12-05T00:00:00Z
<p>macOS stores a “file create date” that most tools can’t modify.
<code>exiftool</code> can change both the creation and modification dates of all files in a folder at once:</p>
<pre class="lumis"><code class="language-bash" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">exiftool</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"-FileCreateDate=2021:09:28 12:00:00"</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"-FileModifyDate=2021:09:28 12:00:00"</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-overwrite_original</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span>
</div></code></pre>
<p>The <code>-overwrite_original</code> flag prevents exiftool from creating backup copies.</p>
2025-08-11T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/macos-change-file-create-date
TIL how to bulk-change file creation dates on macOS
2025-08-11T00:00:00Z
<p>Bash can open TCP connections via <code>/dev/tcp</code> without needing <code>curl</code>, <code>wget</code>, or <code>nc</code> installed.
This is handy for Docker healthchecks in minimal images:</p>
<pre class="lumis"><code class="language-yaml" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">services</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="2"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">collabora</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="3"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">image</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">collabora/code</span>
</div><div class="line" data-line="4"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">healthcheck</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="5"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">test</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">bash -c "exec 6<> /dev/tcp/localhost/9980"</span>
</div><div class="line" data-line="6"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">interval</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">15s</span>
</div><div class="line" data-line="7"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">retries</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">5</span>
</div><div class="line" data-line="8"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">start_period</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">60s</span>
</div><div class="line" data-line="9"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">timeout</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">10s</span>
</div></code></pre>
<p><code>exec 6<> /dev/tcp/localhost/9980</code> tries to open file descriptor 6 as a read-write connection to <code>localhost:9980</code>.
If the port is not listening, it fails and the healthcheck reports unhealthy.</p>
2025-05-16T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/docker-healthcheck-bash-tcp
TIL how to check if a port is open using only Bash
2025-05-16T00:00:00Z
<p>Tailwind 4 exposes all theme values as CSS custom properties, so you can read them from JavaScript via <code>getComputedStyle</code> without importing any config:</p>
<pre class="lumis"><code class="language-javascript" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">const</span> <span style="color:#4c4f69; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cdd6f4; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">styles</span> <span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">=</span> <span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">getComputedStyle</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#d20f39; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f38ba8; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">document</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">documentElement</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span>
</div><div class="line" data-line="2"><span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">const</span> <span style="color:#4c4f69; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cdd6f4; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">primary</span> <span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">=</span> <span style="color:#4c4f69; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cdd6f4; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">styles</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">getPropertyValue</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"--color-primary"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span>
</div></code></pre>
<p>I used this to style the topbar loading indicator with my theme’s primary color instead of a hardcoded value:</p>
<pre class="lumis"><code class="language-javascript" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#4c4f69; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cdd6f4; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">topbar</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">config</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">{</span> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">barColors</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">{</span> <span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">0</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#4c4f69; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cdd6f4; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">styles</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">getPropertyValue</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"--color-primary"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">}</span> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">}</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span>
</div></code></pre>
<p>This keeps the color in sync with the theme automatically.</p>
2025-04-19T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/tailwind-theme-vars-in-js
TIL how to reference Tailwind 4 theme variables in JavaScript
2025-04-19T00:00:00Z
<p>If you have a Kubernetes CronJob that runs every minute and a job fails, the failed pod sticks around with its resource
reservations still held. With a new pod spawning every minute, your cluster resources can be exhausted very quickly.</p>
<p>Consider either removing resource requests from frequent CronJobs or setting a strict <code>failedJobsHistoryLimit</code>:</p>
<pre class="lumis"><code class="language-yaml" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">apiVersion</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">batch/v1</span>
</div><div class="line" data-line="2"><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">kind</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">CronJob</span>
</div><div class="line" data-line="3"><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">metadata</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="4"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">name</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">my-job</span>
</div><div class="line" data-line="5"><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">spec</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="6"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">schedule</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"* * * * *"</span>
</div><div class="line" data-line="7"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">failedJobsHistoryLimit</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">1</span>
</div><div class="line" data-line="8"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">jobTemplate</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="9"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">spec</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="10"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">template</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="11"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">spec</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="12"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">containers</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="13"> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-</span> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">name</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">my-job</span>
</div><div class="line" data-line="14"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">image</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">my-image</span>
</div><div class="line" data-line="15"> <span style="color:#7c7f93; --lumis-latte-font-style:italic; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:italic; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;"># no resources.requests here</span>
</div></code></pre>
<p>Without this, a single downstream outage can cascade into cluster-wide resource pressure just from piling up failed pods.</p>
2025-02-06T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/k8s-cronjob-resource-reservations
TIL not to use resource reservations on frequent Kubernetes CronJobs
2025-02-06T00:00:00Z
<p><code>Element.scrollIntoView()</code> scrolls an element’s parent container so that the element becomes visible.
Passing <code>false</code> aligns the element to the bottom of the scrollable area, which is perfect for keeping a selected item in
view when navigating a list with arrow keys.</p>
<p>I used this on my blog’s search component. When the user presses arrow keys, Phoenix LiveView pushes an event to the
client, which then scrolls the active result into view:</p>
<pre class="lumis"><code class="language-javascript" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#d20f39; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f38ba8; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">window</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">addEventListener</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"phx:search-choose"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">,</span> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#e64553; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#eba0ac; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">e</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span> <span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">=></span> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">{</span>
</div><div class="line" data-line="2"> <span style="color:#8839ef; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cba6f7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">const</span> <span style="color:#4c4f69; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cdd6f4; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">activeItem</span> <span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">=</span> <span style="color:#d20f39; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f38ba8; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">this</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">el</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">querySelector</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">".menu-active"</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span>
</div><div class="line" data-line="3"> <span style="color:#4c4f69; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#cdd6f4; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">activeItem</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">.</span><span style="color:#1e66f5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89b4fa; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">scrollIntoView</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">(</span><span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">false</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span>
</div><div class="line" data-line="4"><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">}</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">)</span>
</div></code></pre>
<p>The argument controls alignment:</p>
<ul>
<li><code>true</code> (default): aligns to the <strong>top</strong> of the scrollable area</li>
<li><code>false</code>: aligns to the <strong>bottom</strong></li>
<li>An object for more control: <code>{ behavior: "smooth", block: "nearest" }</code></li>
</ul>
2025-02-01T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/scroll-into-view
TIL how to scroll elements into view with JavaScript
2025-02-01T00:00:00Z
<p>In GitLab CI, the <code>variables</code> block does not expand other variables at definition time. So this does <strong>not</strong> work as expected:</p>
<pre class="lumis"><code class="language-yaml" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">variables</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="2"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">DEPLOY_USER</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"${DEPLOY_USER:-$CI_REGISTRY_USER}"</span>
</div><div class="line" data-line="3"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">DEPLOY_TOKEN</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"${DEPLOY_TOKEN:-$CI_JOB_TOKEN}"</span>
</div></code></pre>
<p>The <code>$CI_REGISTRY_USER</code> and <code>$CI_JOB_TOKEN</code> references won’t be resolved in the <code>variables</code> block because GitLab CI doesn’t support nested variable expansion there.</p>
<p>The fix is to move the fallback logic into <code>before_script</code>, where normal shell expansion applies:</p>
<pre class="lumis"><code class="language-yaml" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">before_script</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="2"> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">export</span> <span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">DEPLOY_USER</span><span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">=</span><span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"</span><span style="color:#ea76cb; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f5c2e7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">${</span><span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">DEPLOY_USER</span><span style="color:#ea76cb; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f5c2e7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:-</span><span style="color:#ea76cb; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f5c2e7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">$</span><span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">CI_REGISTRY_USER</span><span style="color:#ea76cb; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f5c2e7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">}</span><span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"</span>
</div><div class="line" data-line="3"> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">export</span> <span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">DEPLOY_TOKEN</span><span style="color:#04a5e5; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#89dceb; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">=</span><span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"</span><span style="color:#ea76cb; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f5c2e7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">${</span><span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">DEPLOY_TOKEN</span><span style="color:#ea76cb; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f5c2e7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:-</span><span style="color:#ea76cb; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f5c2e7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">$</span><span style="color:#fe640b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#fab387; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">CI_JOB_TOKEN</span><span style="color:#ea76cb; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#f5c2e7; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">}</span><span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">"</span>
</div></code></pre>
<p>This is especially relevant when writing reusable CI templates where you want to allow overriding a variable but fall back to a CI-provided default.</p>
2024-11-04T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/gitlab-ci-variable-default-variable
TIL how to use a variable as the default for another variable in GitLab CI
2024-11-04T00:00:00Z
<p>Docker Compose has an <code>include</code> directive that lets you split your setup into multiple files:</p>
<pre class="lumis"><code class="language-yaml" translate="no" tabindex="0"><div class="line" data-line="1"><span style="color:#7c7f93; --lumis-latte-font-style:italic; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:italic; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;"># compose.yml</span>
</div><div class="line" data-line="2"><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">include</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="3"> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-</span> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">path</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">./compose/temporal/compose.yml</span>
</div><div class="line" data-line="4"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">env_file</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="5"> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">./compose/temporal/.env</span>
</div><div class="line" data-line="6"> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-</span> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">path</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">./compose/compose-db.yml</span>
</div><div class="line" data-line="7">
</div><div class="line" data-line="8"><span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">services</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="9"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">app</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="10"> <span style="color:#7287fd; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#b4befe; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">depends_on</span><span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">:</span>
</div><div class="line" data-line="11"> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">db</span>
</div><div class="line" data-line="12"> <span style="color:#7c7f93; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#9399b2; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">-</span> <span style="color:#40a02b; --lumis-latte-font-style:normal; --lumis-latte-font-weight:normal; --lumis-latte-text-decoration:none; --lumis-mocha:#a6e3a1; --lumis-mocha-font-style:normal; --lumis-mocha-font-weight:normal; --lumis-mocha-text-decoration:none;">temporal</span>
</div></code></pre>
<p>Each included file is resolved relative to its own directory, so paths within it just work.
The included services can then be referenced directly via <code>depends_on</code> or networking.
It also works recursively.</p>
2024-08-21T00:00:00Z
Phil-Bastian Berndt
https://pbb.io/blog/docker-compose-include
TIL you can include other files via Docker Compose
2024-08-21T00:00:00Z