Livingston Samuel livingston

High-level `node_modules` hoisting algorithm recipe

Take input dependency graph and start traversing it, as you visit new node in the graph - clone it if there can be multiple paths to access the node from the graph root to the node, e.g. essentially represent the graph with a tree as you go, to make hoisting possible.
You want to hoist every node possible to the top root node first, then to each of its children etc, so you need to keep track what is your current root node into which you are hoisting
Traverse the dependency graph from the current root node and for each package name that can be potentially hoisted to the current root node build a list of idents in descending hoisting preference. You will check in next steps whether most preferred ident for the given package name can be hoisted first, and if not, then you check the less preferred ident, etc, until either some ident will be hoisted or you run out of idents to check (no need to convert the graph to the tree when you build this prefe

Yarn Plugins

Yarn Plugin Hooks

Hook	Description
`registerPackageExtensions`	Called when the package extensions are setup
`setupScriptEnvironment`	Called before a script is executed
`wrapScriptExecution`	Called as a script is getting executed
`wrapNetworkRequest`	Called when a network request is being made
`globalHashGeneration`	Called before the build, to compute a global hash key that we will use to detect whether packages must be rebuilt (typically when the Node version changes)
`reduceDependency`	Called during the resolution, once for each resolved package and each of their dependencies

Animated SVG Avatar

Created a login form with an SVG avatar that responds to the input in the email field. Used the GSAP TweenMax library + GSAP's MorphSVG plugin for the animating.

Email validation is very simple and crude just for the purposes of getting this prototype working.

A Pen by Darin on CodePen.

License.

Keybase proof

I hereby claim:

I am livingston on github.
I am livingston (https://keybase.io/livingston) on keybase.
I have a public key ASAlV_QMSgPao2ilqZHRJkDxAPSRnZ9Tp9zCcYW9uXw82wo

To claim this, I am signing this object:

Usage

var welcome_user = new Template('#{welcome} #{name}!!');

welcome_user.parse({ welcome: "Hello", name: "John" });
//returns "Hello John!!"

welcome_user.parse({ welcome: "Hola", name: "Peter" });

The first 15 seconds of the D3 show reel. See full video at http://vimeo.com/29862153. Includes seamless transitions between the following visualization types:

lines
horizons
areas
stacked areas
streamgraph
overlapping areas
grouped bars
stacked bars

	<!doctype html>
	<html>
	<head>

	<meta charset="utf-8" />

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" />
	<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" />
	<link rel="stylesheet" href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css" />
	<style id="jsbin-css">

	//requires jQuery & lodash

	(function getAllFontSizes (fontSizes) {
	$('*').each(function (i, n, s) { s = getComputedStyle(n)['font-size']; (s !== '0px') && fontSizes.push(s) });
	console.log(_.chain(fontSizes).uniq().sortBy(function (v) { return parseInt(v, 10); }).join(', ').value());
	}([]));

	(function(){
	var canvas = document.getElementById('hexmap');

	var hexHeight,
	hexRadius,
	hexRectangleHeight,
	hexRectangleWidth,
	hexagonAngle = 0.523598776, // 30 degrees in radians
	sideLength = 36,
	boardWidth = 10,