Aarón García Hervás aarongarciah

Resources Flexbox

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()

See what you’ve been working on today (tweet by @csswizardry)

git log --since="00:00:00" --no-merges --oneline --author=<[email protected]>

http://wesbos.com/git-hot-tips/

git add -p

Rather than git add everything or individual files, this -p will allow you to step through each change, or hunk, and decide if you’d like to commit it. This is really handy if you have made two different changes to the same file and want to commit them separately.

###Fluid properties (via)

@mixin fp($property, $min, $max, $start: 320, $end: breakpoint('desktop'), $clip: true, $clipAtStart: true, $clipAtEnd: true) {
	$start: $start / ($start * 0 + 1);
	$end: $end / ($end * 0 + 1);
	$multiplier: ($max - $min) / ($end - $start) * 100;
	$adder: ($min * $end - $max * $start) / ($end - $start);
	$formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
	@if $clip and $clipAtStart {
		@media (max-width: #{$start + 0px}) {

###Strip units

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

	<?php
	defined('BASEPATH') OR exit('No direct script access allowed');

	class MY_Config extends CI_Config {

	public function __construct()
	{
	$this->config =& get_config();

	// Set the base_url automatically if none was provided

	/*** Selector though hack ****/

	/* Only for IE6 and below */
	* html div { color: gray }


	/* Only for IE7 */
	*:first-child+html div { color: gray }

	/**
	* 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");

	clearTimeout($.data(this, 'scrollTimer'));
	$.data(this, 'scrollTimer', setTimeout(function() {
	// Do something
	console.log('Haven\'t scrolled in 250ms!');
	}, 250));