:x Voila

Haha! You didn’t see this one coming, did ya? I am on this page however!

An Excursion

I love :Nutshell

It’s the coolest thing and a great alternative to hyperlinks, which can pattern interrupt you and disturb your flow. Nutshells are a great way to get targeted content with minimal disruption as you are reading. Try it above by clicking on Nutshell!

I’ve used it before in other blogs and decided I also want to use it here. HOWEVER, adding the one liner

<script src="https://cdn.jsdelivr.net/gh/ncase/nutshell/nutshell.js"></script>

as advertised on the site did not work for me, as it has in the past. So down the debugging rabbit hole I went. I think I ran through 5 or 6 15-minute pomodoros easy.

Attempts

I used multiple AI chatbots to debug this. First, I used Claude, which gave me lots of ways to try. But I still couldn’t get it to work, then I went to ChatGPT which gave me a very simplistic answer (that I was hoping would be the no-duh answer, but alas no work-y). I even tried Perplexity by pasting all of the nutshell.js source code. Not that this all happened linearly and I’m too shell-shocked still to recount all of this in horrific detail.

But you know what? It felt great to throw myself into it. The pomodoros flew baby! I was in the zone, although I had a lot more pressing work on my agenda (like actually learn about LLMs, neural nets, play with the latest open-source OpenAI models, etc.).

BLUF (Bottom Line Up Front)

Great acronym by the way. I’m using it more and more at work!

The path forward was when I noticed the JS console error in browser dev tools where the createBubble function was failing. And that was my exact problem. When I clicked on the link, there was no bubble being created! So I put a breakpoint there and saw that there was a variable called failsafe that was not defined. But JS is pretty flexible and Nutshell is used all over the web, so why would this be a problem?

I found a couple of other sites using Nutshell and also put a breakpoint at the same line. However it worked there! So something about my own site was instigating this issue. I then took a snippet of the code in that location and put it into a chatbot. It told me that in strict JS, this variable needs to be properly defined using let, const or var. But it wasn’t!

So I thought that something with Astro was mucking with the script and forcing this variable to be properly defined. Again ChatGPT:

Strict mode is enabled automatically in certain contexts, even if there’s no explicit “use strict”: e.g., ES modules <script type="module">

I did a little searching in the codebase and this seemed to be the culprit.

So I then went back to the initial options that Claude gave me on how I can utilize the Nutshell.js code and decided to go local. I could then modify the local copy and define that variable properly. When I actually downloaded the JS file and included it in the Astro base layout file within the header section, (but before I made any edits), the damn thing worked! The bubble started appearing. So no need to modify Nicky Case’s JS file at all. Just making it local worked. I’m guessing that whatever mechanism was forcing the script to be in strict mode didn’t apply to the local copy (!? I guess) so I was all good. I don’t have confirmation of my theory and not absolutely sure how to go about it, but I’ll take the win.

Here’s another :nutshell

UPDATE

So I thought about this some more and after a bit more chatbotting, learned that if you import a JS inline as in:

<script is:inline>
  // This becomes a regular script tag (no type="module")
  console.log('This runs immediately, no modules');
</script>

then the strict problem goes away!

So that is what I did with this latest build: I invoked the CDN version of the script and made it in-line and removed the reference to the local copy and voila! It does work!