This is the first of hopefully many posts where I consolidate knowledge from my weeks Claude prompts and answers. While I think AI (LLMs, etc.) can be a great tool for quickly looking up information and helping do repetitive coding tasks, I think we end up delegating not only the work, but also our understanding of the work that is happening. And yes, I know some people reading this are carefully reading every line of code generated by their LLM of choice, but I know for a fact that’s not everyone. I think many are pasting and praying the solution works.

In addition to delegating the actual understanding of the particular solution, I think using LLMs also makes us miss greater context that can be had by reading the docs. As a quick example, let’s say I have a hex color like #ff5733 that I want to adjust the transparency for. I could ask an LLM and get back something like the modern CSS color from in the CSS rgb formal syntax:

rgb(from #ff5733 r g b / 0.5);

Now, that works, but unless I go and read the documentation, I wouldn’t know about how the from keyword works or what other types of tricks I can use it for. A cool trick is using it with HSL to rotate an existing colors hue by some degree value for creating complimentary colors.

That’s a long way of saying, I want to continue using LLMs for my work, but I also want to review and consolidate any knowledge I’m gaining from it. This post will cover the main prompts and answers I got throughout the week.


Less CSS Parent Selector

This is one of those that I should know by heart, but I always have to double check where it goes when trying to target a parent selector. After reading up on it more before writing this, I find the easiest way to think of it is as a simple placeholder: anywhere you put the & will be replaced with the parent class. It really is that simple.

Let me show you what I mean. Let’s say I have the following LESS, but I want to target the parents parent, but without having to add a whole new section below this one:

// Before any changes
.parent {
  .child {
    color: red;
  }
}

So, this is what I’d do using the parent selector. Keep in mind this is a contrived example and not necessarily a good practice:

.parent {
  .child {
    color: red;
  }


  // I want the child to have green text when the grandparent has the
  // .success class applied to it
  .grandparent.success & {
    .child {
      color: green;
    }
  }


  // Showing what I mean about the `&` being a placeholder
  .grandparent.success & & & {
    .child {
      color: green;
    }
  }
}

That would compile to:

.parent .child {
  color: red;
}
.grandparent.success .parent .child {
  color: green;
}
/* You can see how the `&` gets replaced here. Definitely wouldn't work right. */
.grandparent.success .parent .parent .parent .child {
  color: green;
}

I’ve saved myself the trouble of manually adding a new chunk of LESS code with the .grandparent.success -> .parent -> .child nesting.


Flex Gap Transitions

While we are in CSS-land, let’s talk about a false negative I got from Claude this week. I was working on a layout that used flexbox and gaps quite judiciously. There was a situation when I wanted the gap to transition sizes, but I thought it might not be animatable. So, I asked Claude and it said:

No, the gap property is not transitionable in CSS.

My almost mistake was taking it at its word. I really wanted to transition the gap and was bummed it couldn’t be done. But, I decided to try it out in Codepen, and it worked! Claude m’a trahi! I realized I didn’t really know the ins and outs of transitionable and animatable properties in CSS. I had a vague intution that they’d have to have some numerical value to change - a length, a percentage, something… So, in the spirit of learning, I dug into the docs. First looking at flexbox, then transitions, but finally finding the formal definition for the gap property.

Helpfully, in the formal definition they have an “animation type” section where it outlines that gap has row-gap and column-gap and each of them can be a length, a percentage, or the result of a calc(). This also applies to gap when using it with grid which is also great to know for any future work.

I made a VERY simplistic example of it working here: codepen example. Neat!

References:


Speculation Rules API

Speculation Rules API - Web APIs | MDN

I’d never heard of this API until this week. The TL;DR of it is that you can add a script or extenal JSON file that contains a list of pages to prefetch or prerender to make multipage app navigation faster or instant (depending on if it’s prefetch or prerender). Prefetching will download the response body of the referenced page(s), but not any subresources. Prerendering will “fetch, render, and load the content into an invisible tab, stored in per-document in-memory cache.” It will load subresources, run JavaScript and even perform data fetches from JavaScript.

Here is the example of the rules JSON from MDN:

<script type="speculationrules">
  {
    "prerender": [
      {
        "where": {
          "and": [
            { "href_matches": "/*" },
            { "not": { "href_matches": "/logout" } },
            { "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } },
            { "not": { "selector_matches": ".no-prerender" } },
            { "not": { "selector_matches": "[rel~=nofollow]" } }
          ]
        }
      }
    ],
    "prefetch": [
      {
        "urls": ["next.html", "next2.html"],
        "requires": ["anonymous-client-ip-when-cross-origin"],
        "referrer_policy": "no-referrer"
      }
    ]
  }
</script>

There is a whole lot more to it on the MDN page, but for multi page apps, it looks like a huge win for perceived performance. It is still an experimental technology, so browser support isn’t totally there yet.


Adding new columns to existing table in MySQL

This is another one of those things that I’ve done enough times over the years that I should know what I can and can’t do, but where I get tripped up is remembering if I can do a BEFORE or just a FIRST or AFTER table alter operation.

And, in this particular case, the LLM gave me the wrong answer, which I corrected it on after checking the MySQL docs. I asked it to provide sources and it couldn’t. It promptly (ha!) apologized:

I need to correct myself - I apologize for the confusion. After reflecting on this, I cannot provide sources for BEFORE because MySQL does not actually support a BEFORE keyword for column positioning.

I asked it again which databases do support BEFORE and it told me that MySQL and MariaDB definitely do support it. So, I asked it to provide sources for that, and again, it failed to do so and apologized.

When people ask me about using LLMs I often say, “Trust, but verify”. That goes 1000x for anything with raw SQL queries. You don’t want to take an LLMs word that a important query definitely works as expected. Also, if you don’t fully understand the basics of SQL, I’d recommend avoiding LLMs until you learn the fundamentals.

And, just for reference, regarding allowed alteration operations for adding columns, the MySQL docs say:

To reorder columns within a table, use FIRST and AFTER in CHANGE or MODIFY operations.

No apologies needed from the docs.

References: