AI Bonus: Very Stupid CSS

[!NOTE 2024-12-07T19:23:38+02:00] At some point this post was part of the RSS Club as a reward for those who read this site through web feeds. I’ve unlocked it since it’s an old post that doesn’t matter much anymore.

[!WARNING 2023-08-13] I think I might have been a little harsh, especially since the better solution I asked for was actually better since my tests wasn’t scrolling into view.

It seems like AI isn’t going away anytime soon and I might as well learn how to use it so I thought I’d ask Bing Chat to help me summarize the post on the dumbest CSS you could ever write.

I asked it to summarize the post and it said:

Based on your post, it seems like you were trying to open a <details> element when navigated to a specific domain through the URL hash. You were able to accomplish this by using JavaScript to check if the queried id was a <details> element and open it if it was. However, you ran into an issue where the selector was querying an element with an id of www and classes of iea and com, instead of querying an element with an id of www.iea.com.

To solve this issue, you used a CSS selector of [id=""] to query the element with the correct id. While this selector may look goofy, it works and was able to solve your issue.

An impressive sounding summary, but it’s talking about the example I used rather than the logic behind it (how the query selector was parsing a domain into classes). I asked why it was doing that and it said:

The selector was querying an element with id www and classes iea and com because the id attribute of the <details> element was set to www.iea.com. When you used the query selector #${window.location.hash.substring(1)}, it only selected the part of the URL hash after the “#” character, which in this case was “www.iea.com”. The query selector was looking for an element with an id attribute set to “www.iea.com”, but it couldn’t find one because the id attribute of the <details> element was set to “www” instead. Is there anything else I can help you with? 😊

This blatantly misunderstands what I was trying to communicate.

• The selector was querying an element with id www and classes iea and com because the id attribute of the <details> element was set to www.iea.com.. It literally begged the question!
• it only selected the part of the URL hash after the “#” character, which in this case was “www.iea.com”—of course it did, that’s the point!
• The query selector was looking for an element with an id attribute set to “www.iea.com” no it wasn’t!
• it couldn’t find one because the id attribute of the <details> element was set to “www” instead. Again, it wasn’t.

It seems like it didn’t understand the nature of CSS queries or query selectors.

I also asked what would happen if I used www.twitter.com instead and it said

If you tried to query a domain like www.twitter.com, the query selector would look for an element with an id attribute set to “www.twitter.com”, but it wouldn’t find one because the id attribute of the <details> element was set to “www” instead.

Again, it sounds plausable, but it has the cause and effect reversed, and it doesn’t mention that com would be queried as a class.

I then ased what would happen if I used patreon.com instead and it said something similar to the above except with www.patreon.com instead of www.twitter.com instead. I asked why it would do that and it talked about domain resolution. I pointed out that I didn’t ask for www.patreon.com and it said Patreon has a subdomain of ww1.patreon.com instead, which it doesn’t and is so far removed from what I initially asked.

I also asked it for a better solution and it gave this:

window.addEventListener("load", (e) => {
    const elem = document.querySelector(`#${window.location.hash.substring(1)}`)
    if (elem && elem.tagName === "DETAILS") {
        elem.open = true
        elem.scrollIntoView()
    }
})

All it added was elem.scrollIntoView() which is redundant since the browser would do that onload anyway. The elem.scrollIntoView() was an actual improvement since the # on it’s own wasn’t scrolling into view so I guess this guarantees it. Good job, LLM.

It said that the writing was clear and consise which I hope it was, and offered a thorough review but said thorough review was the same as before.

Based on what I did today it seems like AI is a master bullshitter, but it has the potential to help. It sounds like a summary, but it has no deed understanding whatsoever. Maybe I need to write in such a way that AI can understand or maybe I need to interrogate it better? Then again, if I do that, Bing Chat will kick me out.