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
_find_all_ssh_hosts() { | |
grep "^Host " ~/.ssh/config | cut -d " " -f 2 | sort | uniq | |
} | |
_find_ssh_host() { | |
local cur prev opts | |
COMPREPLY=() | |
cur="${COMP_WORDS[COMP_CWORD]}" | |
prev="${COMP_WORDS[COMP_CWORD-1]}" |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
body { | |
-webkit-font-smoothing: antialiased; | |
text-rendering: optimizeLegibility; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.tree-view-resizer, .editor { | |
::-webkit-scrollbar { | |
width: 0.5em; | |
height: 0.5em; |
⇐ 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
@import "compass/css3/shared"; | |
// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/) | |
// Chrome 21 (prefixed) | |
// Opera 12.1 (unprefixed) | |
// Firefox 20 (unprefixed) | |
$flex-moz: false !default; | |
$flex-webkit: true !default; | |
$flex-o: false !default; | |
$flex-ms: false !default; |
// http://compass-style.org/reference/compass/helpers/sprites/ | |
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) | |
//http://compass-style.org/reference/compass/helpers/sprites/#sprite-file | |
$sprite-image: sprite-file($map, $sprite) | |
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-url | |
$sprite-map: sprite-url($map) | |
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-position |
$sprites: sprite-map("sprites/*.png"); | |
$sprites-retina: sprite-map("sprites-retina/*.png"); | |
@mixin sprite-background($name) { | |
background-image: sprite-url($sprites); | |
background-position: sprite-position($sprites, $name); | |
background-repeat: no-repeat; | |
display: block; | |
height: image-height(sprite-file($sprites, $name)); | |
width: image-width(sprite-file($sprites, $name)); |