Skip to content

Instantly share code, notes, and snippets.

View livingston's full-sized avatar

Livingston Samuel livingston

48 followers · 26 following
View GitHub Profile
@livingston
livingston / yarn-hoisting-algorithm.md
Created January 16, 2022 19:37
Yarn Hoisting Algorithm

High-level node_modules hoisting algorithm recipe

  1. 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.

  2. 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

  3. 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

@livingston
livingston / awesome-yarn-plugins.md
Created January 12, 2022 03:56
Awesome Yarn Plugins
@livingston
livingston / yarn-plugin-hooks.md
Created January 11, 2022 20:00

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
@livingston
livingston / Readme.md
Last active August 27, 2021 16:31 — forked from CodeMyUI/animated-svg-avatar.markdown
Animated SVG Avatar

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.

@livingston
livingston / keybase.md
Created November 6, 2016 09:43
Keybase

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:

@livingston
livingston / index.html
Created April 4, 2015 00:21
// source https://jsbin.com/ruqaha
<!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">
@livingston
livingston / getAllFontSizes.js
Last active August 29, 2015 14:06
Get the list of all different font sizes on a page.
//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());
}([]));
@livingston
livingston / hexagons.js
Created August 15, 2014 14:52 — forked from zackthehuman/hexagons.js
Hexagons — http://bl.ocks.org/livingston/5b4b7681ef818c2f4851
(function(){
var canvas = document.getElementById('hexmap');
var hexHeight,
hexRadius,
hexRectangleHeight,
hexRectangleWidth,
hexagonAngle = 0.523598776, // 30 degrees in radians
sideLength = 36,
boardWidth = 10,
@livingston
livingston / readme.md
Last active September 12, 2022 22:10
Vanilla JavaScript Templates

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" });
@livingston
livingston / index.html
Last active October 13, 2015 21:19 — forked from mbostock/.block
D3 Show Reel, http://bl.ocks.org/livingston/4257606

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