Cheat Sheet

cheat_sheet.md

#Cheat Sheet

##Table of Contents

###ImageMagick

• Batch-Convert

###JavaScript

• Bubble Sort
• Event Bubbling

###CSS

• Background Clipping
• Box Sizing
• Change Selection Color
• Disable Selection of Text
• Remove Extra Padding on Buttons in Firefox
• Text Rendering
• Font Smoothing

##ImageMagick

###Batch Convert

mogrify -format png *.gif

##JavaScript

###Bubble Sort

obj = Array.prototype.slice.call(obj).sort(function (a, b) {
    return a.id > b.id ? 1 : -1;
});

###Event Bubbling

Use mouseenter and mouseleave on a parent object rather than mouseover and mouseout to prevent child nodes from firing mouseout.

elem.addEventListener('mouseenter', function () {
    // show element
});
elem.addEventListener('mouseleave', function () {
    // hide element
});

##CSS

###Background Clipping

.elem {
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
}

###Box Sizing

.elem {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

###Change Selection Color

::selection { background: rgba(0, 255, 255, 0.15); }
::-moz-selection { background: rgba(0, 255, 255, 0.15); }

###Disable Selection of Text

.elem {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

###Remove Extra Padding on Buttons in Firefox

button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

###Text Rendering

.elem { text-rendering: optimizeLegibility; }

###Font Smoothing

.elem { -webkit-font-smoothing: antialiased; }