<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Today I Learned on Navendu Pottekkat - The Open Source Absolutist</title>
    <link>https://navendu.me/tils/</link>
    <description>Recent content in Today I Learned on Navendu Pottekkat - The Open Source Absolutist</description>
    <image>
      <url>https://navendu.me/images/preview.png</url>
      <link>https://navendu.me/</link>
      <title>Navendu Pottekkat</title>
    </image>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    <managingEditor>navendu@apache.org (Navendu Pottekkat)</managingEditor>
    <webMaster>navendu@apache.org (Navendu Pottekkat)</webMaster><atom:link href="https://navendu.me/tils/index.xml" rel="self" type="application/rss+xml" />
      <item>
        <title>Markdown is not Markup</title>
        <link>https://navendu.me/tils/10-1-26-markdown-is-the-opposite-of-markup/</link>
        <pubDate>Sat, 10 Jan 2026 10:23:14 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/10-1-26-markdown-is-the-opposite-of-markup/</guid>
        <description>A play on words.</description>
        <content:encoded><![CDATA[<p>The <a href="https://www.anildash.com/2026/01/09/how-markdown-took-over-the-world/?utm_source=navendu_blog&amp;utm_medium=referral&amp;utm_campaign=markdown-is-not-markup" target="_blank">ubiquitous format for writing text on the internet</a>, Mark<em>down</em>, gets its name from Mark<em>up</em>—as in Hyper Text <strong>Markup</strong> Language (HTML).</p>
<p>The idea was that in the early days of blogs, writing HTML Mark<em>up</em> was complicated and the opposite of that complexity must be named Mark<em>down</em>.</p>
<p>I never made this connection in all the years I&rsquo;ve been using Markdown.</p>
]]></content:encoded>
      </item>
    
      <item>
        <title>Screaming Snake Case</title>
        <link>https://navendu.me/tils/21-11-25-screaming-snake-case/</link>
        <pubDate>Fri, 21 Nov 2025 14:17:46 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/21-11-25-screaming-snake-case/</guid>
        <description>📢🐍🔠</description>
        <content:encoded><![CDATA[<p>This—<code>OWNS_VEHICLE</code>—style is referred to as &ldquo;screaming 🐍 snake case.&rdquo;</p>
]]></content:encoded>
      </item>
    
      <item>
        <title>Speculation Rules for Faster Page Loads</title>
        <link>https://navendu.me/tils/17-8-25-speculation-rules-for-faster-page-loads/</link>
        <pubDate>Sun, 17 Aug 2025 18:24:51 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/17-8-25-speculation-rules-for-faster-page-loads/</guid>
        <description>Prefetch and prerender web pages proactively, speculatively.</description>
        <content:encoded><![CDATA[<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API?utm_source=navendu_blog&amp;utm_medium=referral&amp;utm_campaign=speculation-rules-for-faster-page-loads" target="_blank">Speculation Rules API</a> allows you to improve page navigation on your websites by prefetching and prerendering web pages proactively with just a few lines of code.</p>
<p>In practice, this means that when a user hovers over a link (to click it), the next web page is already loaded and rendered, providing a faster, SPA-like loading experience.</p>
<p>I added it to my website today. You can see it in action by opening the network tab and <a href="/posts/pi-hole/">hovering over a link</a> in this website without clicking it.</p>
<p>This website uses Hugo, so I added it to my <code>head.html</code> partial template:</p>
<div class="highlight" title="layout/partials/head.html"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c">&lt;!-- Speculation Rules for instant navigation --&gt;</span>
</span></span><span class="line"><span class="cl">{{- /* Only enable this in production */}}
</span></span><span class="line"><span class="cl">{{- if hugo.IsProduction | or (eq site.Params.env &#34;production&#34;) }}
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;speculationrules&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="c1">// Prefetch and prerender all internal pages but wait 200ms (moderate eagerness) after hover
</span></span></span><span class="line"><span class="cl">    <span class="s2">&#34;prerender&#34;</span><span class="o">:</span> <span class="p">[{</span> <span class="s2">&#34;where&#34;</span><span class="o">:</span> <span class="p">{</span> <span class="s2">&#34;href_matches&#34;</span><span class="o">:</span> <span class="s2">&#34;/*&#34;</span> <span class="p">},</span> <span class="s2">&#34;eagerness&#34;</span><span class="o">:</span> <span class="s2">&#34;moderate&#34;</span> <span class="p">}],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;prefetch&#34;</span><span class="o">:</span> <span class="p">[{</span> <span class="s2">&#34;where&#34;</span><span class="o">:</span> <span class="p">{</span> <span class="s2">&#34;href_matches&#34;</span><span class="o">:</span> <span class="s2">&#34;/*&#34;</span> <span class="p">},</span> <span class="s2">&#34;eagerness&#34;</span><span class="o">:</span> <span class="s2">&#34;moderate&#34;</span> <span class="p">}]</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="c1">// Fallback for browsers that don&#39;t support the Speculation Rules API
</span></span></span><span class="line"><span class="cl">  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">HTMLScriptElement</span><span class="p">.</span><span class="nx">supports</span> <span class="o">||</span> <span class="o">!</span><span class="nx">HTMLScriptElement</span><span class="p">.</span><span class="nx">supports</span><span class="p">(</span><span class="s1">&#39;speculationrules&#39;</span><span class="p">))</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="c1">// Track preloaded URLs to avoid duplicate requests
</span></span></span><span class="line"><span class="cl">    <span class="kr">const</span> <span class="nx">preloadedUrls</span> <span class="o">=</span> <span class="p">{};</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="kd">function</span> <span class="nx">pointerenterHandler</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="c1">// Skip if no href
</span></span></span><span class="line"><span class="cl">      <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="nx">location</span><span class="p">.</span><span class="nx">origin</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span> <span class="c1">// Skip external links
</span></span></span><span class="line"><span class="cl">      <span class="k">if</span> <span class="p">(</span><span class="nx">preloadedUrls</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">])</span> <span class="k">return</span><span class="p">;</span> <span class="c1">// Skip duplicates
</span></span></span><span class="line"><span class="cl">      <span class="nx">preloadedUrls</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// Mark as preloaded
</span></span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">      <span class="kr">const</span> <span class="nx">prefetcher</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;link&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">      <span class="kr">const</span> <span class="nx">supportsPrefetch</span> <span class="o">=</span> <span class="nx">prefetcher</span><span class="p">.</span><span class="nx">relList</span> <span class="o">&amp;&amp;</span> <span class="nx">prefetcher</span><span class="p">.</span><span class="nx">relList</span><span class="p">.</span><span class="nx">supports</span> <span class="o">&amp;&amp;</span> <span class="nx">prefetcher</span><span class="p">.</span><span class="nx">relList</span><span class="p">.</span><span class="nx">supports</span><span class="p">(</span><span class="s1">&#39;prefetch&#39;</span><span class="p">);</span> <span class="c1">// Check if browser supports prefetch
</span></span></span><span class="line"><span class="cl">      <span class="nx">prefetcher</span><span class="p">.</span><span class="nx">as</span> <span class="o">=</span> <span class="nx">supportsPrefetch</span> <span class="o">?</span> <span class="s1">&#39;document&#39;</span> <span class="o">:</span> <span class="s1">&#39;fetch&#39;</span><span class="p">;</span> <span class="c1">// Set as document or fetch (older browsers)
</span></span></span><span class="line"><span class="cl">      <span class="nx">prefetcher</span><span class="p">.</span><span class="nx">rel</span> <span class="o">=</span> <span class="nx">supportsPrefetch</span> <span class="o">?</span> <span class="s1">&#39;prefetch&#39;</span> <span class="o">:</span> <span class="s1">&#39;preload&#39;</span><span class="p">;</span> <span class="c1">// Set as prefetch or preload (older browsers)
</span></span></span><span class="line"><span class="cl">      <span class="nx">prefetcher</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">      <span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">prefetcher</span><span class="p">);</span> <span class="c1">// Add to head
</span></span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;DOMContentLoaded&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="kr">const</span> <span class="nx">conn</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">connection</span> <span class="o">||</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">mozConnection</span> <span class="o">||</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">webkitConnection</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">      <span class="kr">const</span> <span class="nx">saveData</span> <span class="o">=</span> <span class="nx">conn</span> <span class="o">&amp;&amp;</span> <span class="nx">conn</span><span class="p">.</span><span class="nx">saveData</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">      <span class="kr">const</span> <span class="nx">isVerySlow</span> <span class="o">=</span> <span class="nx">conn</span> <span class="o">&amp;&amp;</span> <span class="sr">/(^|-)2g($|-)/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nb">String</span><span class="p">(</span><span class="nx">conn</span><span class="p">.</span><span class="nx">effectiveType</span> <span class="o">||</span> <span class="s1">&#39;&#39;</span><span class="p">));</span>
</span></span><span class="line"><span class="cl">      <span class="k">if</span> <span class="p">(</span><span class="nx">saveData</span> <span class="o">||</span> <span class="nx">isVerySlow</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="c1">// Skip for data saver and slow connections
</span></span></span><span class="line"><span class="cl">      <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;a[href^=&#34;/&#34;]&#39;</span><span class="p">).</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nx">item</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;pointerenter&#39;</span><span class="p">,</span> <span class="nx">pointerenterHandler</span><span class="p">,</span> <span class="p">{</span> <span class="nx">passive</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span> <span class="c1">// Add event listener when pointer enters link area
</span></span></span><span class="line"><span class="cl">      <span class="p">});</span>
</span></span><span class="line"><span class="cl">    <span class="p">});</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">{{- end }}
</span></span></code></pre></div><p>DocuSeal has an <a href="https://www.docuseal.com/blog/make-any-website-load-faster-with-6-lines-html?utm_source=navendu_blog&amp;utm_medium=referral&amp;utm_campaign=speculation-rules-for-faster-page-loads" target="_blank">excellent blog post</a> that covers this API. The code I shared above just tweaks it a little bit.</p>
]]></content:encoded>
      </item>
    
      <item>
        <title>&#34;omitempty&#34; option omits boolean fields with false values</title>
        <link>https://navendu.me/tils/9-5-25-omitempty-option-omits-boolean-fields-with-false-values/</link>
        <pubDate>Fri, 09 May 2025 22:28:35 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/9-5-25-omitempty-option-omits-boolean-fields-with-false-values/</guid>
        <description>And how to fix it.</description>
        <content:encoded><![CDATA[<p>The <code>omitempty</code> option in the Go standard library&rsquo;s <code>encoding/json</code> package omits boolean fields with <code>false</code> values.</p>










  
  
  
  





  


<blockquote>
  
  
  
    <p>The &ldquo;omitempty&rdquo; option specifies that the field should be omitted from the encoding if the field has an empty value, defined as false, 0, a nil pointer, a nil interface value, and any array, slice, map, or string of length zero.</p>
  
  <footer>
    <strong></strong>
    
      
        <cite>
          <a target="_blank" href="https://pkg.go.dev/encoding/json#Marshal" title="https://pkg.go.dev/encoding/json#Marshal">https://pkg.go.dev/encoding/json#Marshal</a> 
        </cite>
      
    
  </footer>
</blockquote>

<p>This means that if you use the <code>omitempty</code> option on a boolean field, the field is omitted when it is <code>false</code>:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kd">type</span><span class="w"> </span><span class="nx">AppConfig</span><span class="w"> </span><span class="kd">struct</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">FlagValue</span><span class="w"> </span><span class="kt">bool</span><span class="w"> </span><span class="s">`json:&#34;flag_value,omitempty&#34;`</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="p">}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="kd">func</span><span class="w"> </span><span class="nf">main</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">ac</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="nx">json</span><span class="p">.</span><span class="nf">Marshal</span><span class="p">(</span><span class="nx">AppConfig</span><span class="p">{</span><span class="kc">true</span><span class="p">})</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="nb">string</span><span class="p">(</span><span class="nx">ac</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">ac</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="w"> </span><span class="p">=</span><span class="w"> </span><span class="nx">json</span><span class="p">.</span><span class="nf">Marshal</span><span class="p">(</span><span class="nx">AppConfig</span><span class="p">{</span><span class="kc">false</span><span class="p">})</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="nb">string</span><span class="p">(</span><span class="nx">ac</span><span class="p">))</span><span class="w"> 
</span></span></span><span class="line"><span class="cl"><span class="p">}</span><span class="w">
</span></span></span></code></pre></div><div class="highlight" title="output"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{&#34;flag_value&#34;:true}
</span></span><span class="line"><span class="cl">{}
</span></span></code></pre></div><p>Which is unexpected, because you expect the second line to be <code>{&quot;flag_value&quot;:false}</code>.</p>
<p>To fix this, you can use a pointer to a boolean instead:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kd">type</span><span class="w"> </span><span class="nx">AppConfig</span><span class="w"> </span><span class="kd">struct</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">FlagValue</span><span class="w"> </span><span class="o">*</span><span class="kt">bool</span><span class="w"> </span><span class="s">`json:&#34;flag_value,omitempty&#34;`</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="p">}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="kd">func</span><span class="w"> </span><span class="nf">main</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">fv</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">ac</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="nx">json</span><span class="p">.</span><span class="nf">Marshal</span><span class="p">(</span><span class="nx">AppConfig</span><span class="p">{</span><span class="o">&amp;</span><span class="nx">fv</span><span class="p">})</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="nb">string</span><span class="p">(</span><span class="nx">ac</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">fv</span><span class="w"> </span><span class="p">=</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">ac</span><span class="p">,</span><span class="w"> </span><span class="nx">_</span><span class="w"> </span><span class="p">=</span><span class="w"> </span><span class="nx">json</span><span class="p">.</span><span class="nf">Marshal</span><span class="p">(</span><span class="nx">AppConfig</span><span class="p">{</span><span class="o">&amp;</span><span class="nx">fv</span><span class="p">})</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="nb">string</span><span class="p">(</span><span class="nx">ac</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="p">}</span><span class="w">
</span></span></span></code></pre></div><div class="highlight" title="output"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{&#34;flag_value&#34;:true}
</span></span><span class="line"><span class="cl">{&#34;flag_value&#34;:false}
</span></span></code></pre></div><p>To differentiate between unset and zero values for any data type, use pointers.</p>
]]></content:encoded>
      </item>
    
      <item>
        <title>`:has()` and Next-Sibling `&#43;` Combinator</title>
        <link>https://navendu.me/tils/12-3-25-next-sibling-combinator/</link>
        <pubDate>Wed, 12 Mar 2025 18:25:32 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/12-3-25-next-sibling-combinator/</guid>
        <description>The `:has()` pseudo-class and the next-sibling `&#43;` combinator are really useful for some complex CSS.</description>
        <content:encoded><![CDATA[<p>The relatively new <code>:has()</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has?utm_source=navendu_blog&amp;utm_medium=referral&amp;utm_campaign=has-and-next-sibling-&#43;-combinator" target="_blank">pseudo-class</a> can be combined with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator?utm_source=navendu_blog&amp;utm_medium=referral&amp;utm_campaign=has-and-next-sibling-&#43;-combinator" target="_blank">next-sibling</a> <code>+</code> combinator for some nifty CSS selections. I used this selection today:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">post-content</span> <span class="nt">blockquote</span> <span class="nt">p</span><span class="p">:</span><span class="nd">last-of-type</span><span class="p">:</span><span class="nd">not</span><span class="o">(</span><span class="p">:</span><span class="nd">has</span><span class="o">(+</span> <span class="nt">footer</span><span class="o">))</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="k">margin-bottom</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>Which can be read as, &ldquo;select the last <code>paragraph</code> element within <code>blockquote</code> elements within elements with class <code>post-content</code> which are <strong>not followed by a</strong> <code>footer</code> <strong>element</strong>.&rdquo;</p>
]]></content:encoded>
      </item>
    
      <item>
        <title>There&#39;s a &#34;Pour One Out&#34; Emoji</title>
        <link>https://navendu.me/tils/19-11-24-a-pour-one-out-emoji/</link>
        <pubDate>Tue, 19 Nov 2024 20:12:29 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/19-11-24-a-pour-one-out-emoji/</guid>
        <description>🫗</description>
        <content:encoded><![CDATA[<p>There&rsquo;s a &ldquo;pour one out&rdquo; 🫗 emoji?!</p>
<p>There has been since 2021?!</p>
<p>I&rsquo;m using this all the time now.</p>
]]></content:encoded>
      </item>
    
      <item>
        <title>Use jq’s Inbuilt Pipe `|` Operator</title>
        <link>https://navendu.me/tils/18-11-24-use-jqs-inbuilt-pipe-operator/</link>
        <pubDate>Mon, 18 Nov 2024 13:46:00 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/18-11-24-use-jqs-inbuilt-pipe-operator/</guid>
        <description>jq has an inbuilt pipe operator that can replace the default shell pipe.</description>
        <content:encoded><![CDATA[<p>When combining multiple jq filters, you can use jq&rsquo;s inbuilt pipe <code>|</code> operator instead of shell pipes.</p>
<p>i.e., instead of this:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">curl <span class="s1">&#39;https://jsonplaceholder.typicode.com/users&#39;</span> <span class="p">|</span> jq <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="s1">&#39;.[]&#39;</span> <span class="p">|</span> jq <span class="s1">&#39;select(.address.city == &#34;South Christy&#34;)&#39;</span> <span class="p">|</span> jq <span class="s1">&#39;{name, username, email}&#39;</span>
</span></span></code></pre></div><p>You can do this:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">curl <span class="s1">&#39;https://jsonplaceholder.typicode.com/users&#39;</span> <span class="p">|</span> jq <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="s1">&#39;.[] | select(.address.city == &#34;South Christy&#34;) | {name, username, email}&#39;</span>
</span></span></code></pre></div>]]></content:encoded>
      </item>
    
      <item>
        <title>Escape Markdown Code Block Inside Markdown Code Block</title>
        <link>https://navendu.me/tils/13-11-24-escape-markdown-code-block-inside-markdown-code-block/</link>
        <pubDate>Wed, 13 Nov 2024 22:09:39 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/13-11-24-escape-markdown-code-block-inside-markdown-code-block/</guid>
        <description>How do you document Markdown syntax in Markdown?</description>
        <content:encoded><![CDATA[<p>You can escape Markdown code blocks by using four backticks (<code>````</code>) instead of three.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">Prevent Go Programs from Exiting
</span></span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">This <span class="ge">_can be prevented_</span> by wrapping your code with a <span class="gs">**channel**</span>:
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="s">```go
</span></span></span><span class="line"><span class="cl"><span class="nx">c</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="nb">make</span><span class="p">(</span><span class="kd">chan</span><span class="w"> </span><span class="kt">bool</span><span class="p">)</span><span class="w"> </span><span class="c1">// creates a new channel</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="c1">// your code goes here</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="o">&lt;-</span><span class="nx">c</span><span class="w"> </span><span class="c1">// perpetually waits for the channel to receive data</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span></code></pre></div><p>The above code block documents a Markdown code block. <em>Very meta</em>. It is created use four backticks:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">````markdown
</span></span></code></pre></div>]]></content:encoded>
      </item>
    
      <item>
        <title>Everything CSS Flexbox</title>
        <link>https://navendu.me/tils/13-11-24-everything-css-flexbox/</link>
        <pubDate>Wed, 13 Nov 2024 17:07:20 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/13-11-24-everything-css-flexbox/</guid>
        <description>An interactive guide to learn everything about CSS Flexbox.</description>
        <content:encoded><![CDATA[<p>My working with CSS is mostly trying every value for a property until it does what I want it to do. This ignorance has only increased with free access to GitHub Copilot in my IDE, where I conveniently delegate CSS specifics to the AI.</p>
<p>But today, I found <a href="https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/?utm_source=navendu_blog&amp;utm_medium=referral&amp;utm_campaign=everything-css-flexbox" target="_blank">the BEST interactive tutorial about Flexbox</a>. Even a quick look can help you intuitively understand how to use the Flexbox properly. Very good, very recommend.</p>
]]></content:encoded>
      </item>
    
      <item>
        <title>Exclude Files and Folders from Front Matter CMS</title>
        <link>https://navendu.me/tils/12-11-24-exclude-files-and-folders-from-front-matter-cms/</link>
        <pubDate>Tue, 12 Nov 2024 14:20:51 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/12-11-24-exclude-files-and-folders-from-front-matter-cms/</guid>
        <description>Setting to disable specific files and folders from content folders.</description>
        <content:encoded><![CDATA[<p>To prevent Front Matter CMS from including specific files and folders, you can provide the paths to be excluded in <code>excludePaths</code> under <code>frontMatter.content.pageFolders</code>:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;frontMatter.content.pageFolders&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">    <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Posts&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;path&#34;</span><span class="p">:</span> <span class="s2">&#34;[[workspace]]/content/posts&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;previewPath&#34;</span><span class="p">:</span> <span class="s2">&#34;posts&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;contentTypes&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;Post (default)&#34;</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;excludePaths&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;_*.*&#34;</span> <span class="c1">// Exclude all files starting with an underscore
</span></span></span><span class="line"><span class="cl">      <span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>I use this to exclude <code>_index.md</code> files from Front Matter.</p>
]]></content:encoded>
      </item>
    
      <item>
        <title>Prevent Go Programs from Exiting</title>
        <link>https://navendu.me/tils/24-8-24-prevent-go-programs-from-exiting/</link>
        <pubDate>Sat, 24 Aug 2024 10:13:00 +0530</pubDate>
        <author>navendu@apache.org (Navendu Pottekkat)</author>
        <guid>https://navendu.me/tils/24-8-24-prevent-go-programs-from-exiting/</guid>
        <description>Useful trick using channels to prevent Go programs from exiting.</description>
        <content:encoded><![CDATA[<p>You can use channels to prevent Go programs from exiting.</p>
<p>I have found this to be useful when running Go + Wasm on the browser where I run into errors like:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">wasm_exec.js:378 Uncaught Error: bad callback: Go program has already exited
</span></span></code></pre></div><p>This can be prevented by wrapping your code with a channel:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="nx">c</span><span class="w"> </span><span class="o">:=</span><span class="w"> </span><span class="nb">make</span><span class="p">(</span><span class="kd">chan</span><span class="w"> </span><span class="kt">bool</span><span class="p">)</span><span class="w"> </span><span class="c1">// creates a new channel</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="c1">// your code goes here</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="o">&lt;-</span><span class="nx">c</span><span class="w"> </span><span class="c1">// perpetually waits for the channel to receive data</span><span class="w">
</span></span></span></code></pre></div>]]></content:encoded>
      </item>
    
  </channel>
</rss>
