A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
function heidiDecode(hex) { | |
var str = ''; | |
var shift = parseInt(hex.substr(-1)); | |
hex = hex.substr(0, hex.length - 1); | |
for (var i = 0; i < hex.length; i += 2) | |
str += String.fromCharCode(parseInt(hex.substr(i, 2), 16) - shift); | |
return str; | |
} | |
document.write(heidiDecode('755A5A585C3D8141786B3C385E3A393')); |
⇐ back to the gist-blog at jrw.fi
Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.
This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso