Patrick HENG patrickheng

##Sass Functions Cheat Sheet

RGB Functions
HSL Functions
Opacity Functions
Other Color Functions
List Functions
Map Functions
Selector Functions
String Functions

Fluid Aspect

fluid-aspect is a Sass mixin for creating intrinsic ratios in CSS. Intrinsic ratios allow elements to fill the width of their containing block and resize on the fly while maintaining their aspect ratio.

@include fluid-aspect($ratio, [$target]);

$ratio: An aspect ratio represented as two numbers separated by a space. Defaults to 1:1
$target: A selector targeting the element to be made fluid. Defaults to "> :first-child"

Extracted from https://github.com/rpavlik/maya2osg/tree/master/src/GLSL

Vertex Shader

varying vec2 vTexCoord;
varying vec3 vNormal;
varying vec3 vEye;

void main() {

OBSOLETE

This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.

I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

	/*
	Uploads to GPU immediately when the image is ready, then fires callback.

	//takes a string path or image/canvas/video/ImageData
	uploadTexture(renderer, pathOrImage, function(err, texture) {
	if (err) console.error(err)
	//do something with the ThreeJS 'texture' result
	})
	*/
	var THREE = require('three');

	var collision = {};


	// aabb: <THREE.Box3>
	// Plane: <THREE.Plane>
	collision.isIntersectionAABBPlane = function ( aabb, Plane ) {

	var center = new THREE.Vector3().addVectors( aabb.max, aabb.min ).multiplyScalar( 0.5 ),
	extents = new THREE.Vector3().subVectors( aabb.max, center );

	/*
	* There's a bug in Chrome/Safari using overflow:hidden with border-radius. This mask fixes it.
	* Solution: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258
	*/
	.masked {
	position: absolute;
	border-radius: 10px;
	overflow: hidden;
	/* this fixes the overflow:hidden in Chrome */
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

	#version 400
	layout( location = 0 ) out vec4 frag_main;
	struct PointLight{
	vec3 position;
	vec3 ambient;
	vec3 diffuse;
	vec3 specular;
	float shininess;
	float intensity;
	};