5 ms·
Seems like a good example of depending on LLMs too much. After the first bad output the next step should have been to open inspector, not to try three more LLMs
by VladVladikoff 2y ago
Seems like a good example of depending on LLMs too much. After the first bad output the next step should have been to open inspector, not to try three more LLMs.
- tonyedgecombe 2y agoIf your only tool is a hammer then everything looks like a nail.
- rf15 2y agoYou are the nail in this metaphor, asking for different hammers to hit you.
- dawnerd 2y agoSeriously. This would have been trivial with a few second look in inspector.
- kevmo314 2y agoAt that point in the article, I thought Natalie was some new LLM I hadn't heard about.
- simonw 2y agoI'd looked in the inspector after the first time I saw the gap (just added a note about that to the document) - my problem was that I didn't realize Firefox doesn't show you the default user agent styles, while Chrome does.
- memhole 2y agoSo things can be styled based on the user agent? Besides the obvious difference between mobile and desktop.
- simonw 2y agoYeah, that's why I thought this was worth writing up as a TIL.
- memhole 2y agoThanks! I had no idea. I have an issue with a large gap on mobile I should dig into. Maybe this will help me figure out how to fix it. Also just a neat fact to know regardless
- mubou 2y agoThat's how <b> tags are made bold etc. There's a css file that's basically loaded before everything else to apply those default styles. Here's WebKit/Safari's for example: https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css https://github.com/WebKit/WebKit/blob/main/Source/WebCore/cs... Try turning on user agent styles & user agent shadow dom in your dev tools settings.
- smitelli 2y agoIn FF DevTools, open settings, under "Inspector" check the box for "Show Browser Styles." It clutters the window up some, but I've gotten used to it.
- perardi 2y agoNo, this is one of those bizarre “wait, really, they put that in the default stylesheet” problems. There is a lot of weirdness lurking in the default user agent stylesheet…especially in Safari: https://blog.jim-nielsen.com/2021/things-i-learned-reading-webkits-ua-stylesheet/ https://blog.jim-nielsen.com/2021/things-i-learned-reading-w... Browser vendors put a lot of surprising, and very poorly documented, defaults into user agent stylesheets, and they can trip you up at the most basic level, and the styling is poorly exposed in most web inspector tooling. I ran into a nasty one with Safari’s date picker—had to go down a lot of rabbit holes to figure out I needed to finesse the `::-webkit-date-and-time-value` CSS to get an input field styled correctly.
- dartos 2y agoI don’t think those 2 problems are mutually exclusive.
- knallfrosch 2y agoI've found that the "Computed Styles" section catches most weirdness quite easily. Remove your own styles, view Computed and you'll see "User agent style sheet" as the source.
- MrJohz 2y agoEven if you don't look at the computed styles, the user agent styles are shown in the default element style view, at least in Firefox. There, you can see all of the applied styles as a stack, so you can see which styles have been applied first, which ones have been overridden, etc. This is a good place to look if you're trying to figure out why an element is behaving weirdly, because it shows all the styles and exactly how they override each other, as well as the source of each style.
- paczki 2y agoSomething I discovered while changing the thumb track of a range slider just the other day, is if you add padding-top to the thumb, it will also add padding to the bottom. Even better, you have to set its appearance to none for chromium before you're able to style it in any capacity, which probably makes sense to somebody but not to me.