Travis Arnold souporserious

How to make faster scroll effects?

Avoid too many reflows (the browser to recalculate everything)
Use advanced CSS3 for graphic card rendering
Precalculate sizes and positions

Beware of reflows

The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:

This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.

How to remove hide the select arrow in Firefox using `-moz-appearance:none;`

TL;DR (or, the fix)

Set -moz-appearance to none. This will "reset" the styling of the element;
Set text-indent to 0.01px. This will "push" the text a tiny bit^[1] to the right;

Pure SASS-adaption of Lea Verou's contrast-ratio javascript. Can be useful when eg. generating colored buttons from a single supplied color as you can then check which out of a couple of text colors would give the best contrast.

This script currently lacks the support for alpha-transparency that Lea supports in her script though.

In addition to the color-contrast adaption there's also some math methods that were needed to be able to calculate the exponent of a number and especially so when the exponent is a decimal number. A 2.4 exponent is used to calculate the luminance of a color and calculating such a thing is not something that SASS supports out of the box and not something I found a good pure-SASS script for calculating and I much prefer pure-SASS over ruby extensions. The math methods might perhaps be unecessary though if you're running Compass or similar as they may provide compatible math methods themselves.

Normal usage: `color: pick_best_color(#f00

	var colorArray = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
	'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
	'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
	'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
	'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
	'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
	'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
	'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
	'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
	'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

	var MathHelper = {
	// Get a value between two values
	clamp: function (value, min, max) {

	if (value < min) {
	return min;
	}
	else if (value > max) {
	return max;
	}

	function whichTransitionEvent(){
	var t;
	var el = document.createElement('fakeelement');
	var transitions = {
	'transition':'transitionend',
	'MSTransition':'msTransitionEnd',
	'MozTransition':'transitionend',
	'WebkitTransition':'webkitTransitionEnd'
	}

	// include https://github.com/camupod/CSSMatrix/blob/browserified/CSSMatrix.js

	// create a matrix from a CSS matrix transform string
	var matrix1 = new CSSMatrix('matrix(1, 2, 3, 4, 5, 6)');
	var matrix2 = new CSSMatrix('matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)');

	// create a matrix from matrix values
	var matrix3 = new CSSMatrix(1, 2, 3, 4, 5, 6);
	var matrix4 = new CSSMatrix(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);

	# put this in your .bash_profile
	if [ $ITERM_SESSION_ID ]; then
	export PROMPT_COMMAND='echo -ne "\033];${PWD##*/}\007"; ':"$PROMPT_COMMAND";
	fi

	# Piece-by-Piece Explanation:
	# the if condition makes sure we only screw with $PROMPT_COMMAND if we're in an iTerm environment
	# iTerm happens to give each session a unique $ITERM_SESSION_ID we can use, $ITERM_PROFILE is an option too
	# the $PROMPT_COMMAND environment variable is executed every time a command is run
	# see: ss64.com/bash/syntax-prompt.html

	/**
	* Simple node.js style script loader for modern browsers
	**/
	function loadScript(src, cb) {
	var script = document.createElement('script');
	script.async = true;
	script.src = src;

	script.onerror = function() {
	cb(new Error("Failed to load" + src));