4 ms·

I added the following CSS to every element on the page An outline with 0.5px width I actually often do the same to look at how a website is structured. I

• mock-possum 3y ago
  Wait so are you trying to add a .5px outline, or a 2px outline?
  • eyelidlessness 3y ago
    They’re using a recognizably similar technique. They recognized the similarity and said so. What purpose does it serve to nitpick a detail which apparently isn’t material to their usage, and which could trivially be adapted for anyone who cares about the outline size?
    • bluepod4 3y ago
      I think the person took “do the same” too literally lol. Likely there was no ill intent. They also might have been asking the question: “Does 0.5px vs 2px matter in any significant way?” The answer to that question is still no. But I could see how someone who’s unfamiliar with the outline property could ask the question.
      • eyelidlessness 3y ago
        I’m sure there wasn’t ill intent. And I know the article discusses the author’s reasoning for their choice of outline size, so that might have informed the overly literal response. But in context it’s a kind of pedantry that can be tiresome.
• Jerrrry 3y ago
  replace orangered with random color, lil more visually descriptive: javascript:document.querySelectorAll("*") .forEach(el=>el.style.outline=`1px solid ${ Math.floor(Math.random()*2*16).toString(16) }`)
  • flir 3y ago
    Sweet. We could pull the colours from an array instead of generating them randomly: javascript: (function() { const colors = ['red', 'green', 'blue']; const setColor = (el, idx) => { el.style.outline = `1px solid ${colors[idx % colors.length]}`; [...el.children].forEach(child => setColor(child, idx + 1)); }; setColor(document.body, 0); })(); Thus green is always inside red. Any advances?
    • kacesensitive 3y ago
      Idk. Animate it? (function() { const colors = ['red', 'green', 'blue']; const setColor = (el, idx) => { let currentThickness = (idx % 10) + 1; el.style.outlineColor = colors[idx % colors.length]; let direction = 1; setInterval(() => { if (currentThickness >= 10 || currentThickness <= 1) direction *= -1; el.style.outline = `${currentThickness}px solid ${colors[idx % colors.length]}`; currentThickness += direction; }, 100); [...el.children].forEach(child => setColor(child, idx + 1)); }; setColor(document.body, 0); })();
      • Jerrrry 3y ago
        make it do a barrel roll
        • flir 3y ago
          javascript:(function() { const applyRotation = (el, t) => { el.style.cssText = `transition:transform ${t}s; transform-style:preserve-3d; perspective:2048px; transform:rotateY(360deg)`; [...el.children].forEach(child => applyRotation(child, t + 0.4)); }; applyRotation(document.body, 1); })();
• fiddlerwoaroof 3y ago
  Adding `html { transform: scale(0.8) }` also is pretty helpful in combination with this outline trick: it helps you see boxes that overflow the page boundaries which are frequently a source of issues