aarongarciah

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

aarongarciah

/**
 * http://applemusic.tumblr.com/
 * https://jsfiddle.net/xq56dmrh/
 */

/** Ultra Light */
@font-face {
  font-family: "San Francisco";
  font-weight: 100;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff");

aarongarciah

Resources Flexbox

• W3C
• Using CSS flexible boxes
• A Complete Guide to Flexbox
• Flexbox cheatsheet
• Flexbox syntax for IE 10
• CSS Flexbox
• Flexplorer
• Flexyboxes

aarongarciah

/**
 * Zebra striped text lines
 */

pre { 
	padding: .5em;
	line-height: 1.5;
	background: hsl(20, 50%, 95%);
	background-image: linear-gradient(
	                  rgba(120,0,0,.1) 50%, transparent 0);

aarongarciah

[
    {
        "keys": ["super+shift+a"],
        "command": "expand_selection",
        "args": {"to": "tag"} },
    {
        "keys": ["ctrl+2"],
        "command": "run_macro_file",
        "args": {
            "file": "Packages/User/to-2.sublime-macro"