border: 10px solid hotpink;
This should be:
outline: 10px solid hotpink;.Borders are calculated as part of the layout, so adding or changing a border also means potentially changing the layout. So just by trying to debug something, you’re potentially making the problem worse. It’s a heisenbug.
On the other hand,
outlinedoesn’t change the layout, it’s drawn around the element. Also, you can usually see what the border was on the element which makes it easier to debug all that nested div slop that bootstrap/tailwind vibecoders like to produce. And, you can also offset the outline if you need to also see the borders of elements touching the one you’re trying to debug.I’m a
fill: #ff000066;kinda guy personallyDid you mean something else?
fillis only for svgs.But my personal variants are:
outline: 3px solid red;andoutline: 3px solid #F0F;just because they are such obvious debug/programmer-art coloursOpe you’re right, I meant
background-color. In my defense I was working with svg styling more recently than html. What can I say, I’m nothing without my linter haha
AI slop
print("Hello World")The only line that truly changes your world (For
better || !better)The batman one got me.
Its totally stolen from a presentation given by Gary bernhardt (https://www.destroyallsoftware.com/screencasts).
He’s generally a great presenter
I believe its in this presentation https://www.destroyallsoftware.com/talks/wat
I can’t find a joke talk he gave called “using your types good” but it was very funny
The article links to it, but yeah, it’s from wat. Also, every programmer should watch that presentation. It’s short, but it’s so good.
