Benjamin De Cock bendc

## shuffle.js
const shuffle = (arr, mixed = [], pool = arr.slice()) => {
  const remaining = pool.length;
  if (!remaining) return mixed;
  const index = Math.floor(Math.random() * remaining);
  const el = pool.splice(index, 1).pop();
  mixed.push(el);
  return shuffle(arr, mixed, pool);
};

## scrollRoot.js
const scrollRoot = (() => {
  if ("scrollingElement" in document)
    return document.scrollingElement;

  const initial = document.documentElement.scrollTop;
  document.documentElement.scrollTop = initial + 1;
  const updated = document.documentElement.scrollTop;
  document.documentElement.scrollTop = initial;

  return updated > initial

## isObject.js
const isObject = obj => Object(obj) === obj;

## immutable.js
const immutable = (() => {
  const getValue = obj => key => obj[key];
  const isObject = obj => Object(obj) === obj;
  const isMutable = obj => isObject(obj) && !Object.isFrozen(obj);

  return obj => {
    Object.keys(obj).map(getValue(obj)).filter(isMutable).forEach(immutable);
    return Object.freeze(obj);
  };
})();

## iterable.js
const iterable = function* (obj) {
  yield* Object.keys(obj).map(key => [key, obj[key]]);
};

## holy-grail.html
<!doctype html>
<title>Holy Grail Layout</title>

<style>
  body {
    display: grid;
    grid-template-rows: 100px 1fr 100px;
    grid-template-columns: 200px 1fr 200px;
    min-height: 100vh;
    margin: 0

## async-css.html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>Defer non-essential stylesheets</title>

<style>
  /* Critical above-the-fold styles */
  * { margin: 0; padding: 0 }
  :root { background: red }

## getPathBoundingBox.js
const getPathBoundingBox = (() => {
  const toPolygon = (path, points = 50) => {
    const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
    const total = path.getTotalLength();
    const step = total / points;

    const getPoints = (dist = 0, arr = []) => {
      const {x, y} = path.getPointAtLength(dist);
      arr.push(`${x},${y}`);
      const next = step + dist;

## duplicate.js
const duplicate = obj => JSON.parse(JSON.stringify(obj));

## display-fade.html
<!doctype html>
<meta charset="utf-8">
<title>Example</title>

<style>
  div {
    width: 100px;
    height: 100px;
    background: black;
    animation-duration: .5s;
	const shuffle = (arr, mixed = [], pool = arr.slice()) => {
	const remaining = pool.length;
	if (!remaining) return mixed;
	const index = Math.floor(Math.random() * remaining);
	const el = pool.splice(index, 1).pop();
	mixed.push(el);
	return shuffle(arr, mixed, pool);
	};
	const scrollRoot = (() => {
	if ("scrollingElement" in document)
	return document.scrollingElement;

	const initial = document.documentElement.scrollTop;
	document.documentElement.scrollTop = initial + 1;
	const updated = document.documentElement.scrollTop;
	document.documentElement.scrollTop = initial;

	return updated > initial
	const immutable = (() => {
	const getValue = obj => key => obj[key];
	const isObject = obj => Object(obj) === obj;
	const isMutable = obj => isObject(obj) && !Object.isFrozen(obj);

	return obj => {
	Object.keys(obj).map(getValue(obj)).filter(isMutable).forEach(immutable);
	return Object.freeze(obj);
	};
	})();
	const iterable = function* (obj) {
	yield* Object.keys(obj).map(key => [key, obj[key]]);
	};
	<!doctype html>
	<title>Holy Grail Layout</title>

	<style>
	body {
	display: grid;
	grid-template-rows: 100px 1fr 100px;
	grid-template-columns: 200px 1fr 200px;
	min-height: 100vh;
	margin: 0
	<!doctype html>
	<html lang="en">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, width=device-width">
	<title>Defer non-essential stylesheets</title>

	<style>
	/* Critical above-the-fold styles */
	* { margin: 0; padding: 0 }
	:root { background: red }
	const getPathBoundingBox = (() => {
	const toPolygon = (path, points = 50) => {
	const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
	const total = path.getTotalLength();
	const step = total / points;

	const getPoints = (dist = 0, arr = []) => {
	const {x, y} = path.getPointAtLength(dist);
	arr.push(`${x},${y}`);
	const next = step + dist;
	<!doctype html>
	<meta charset="utf-8">
	<title>Example</title>

	<style>
	div {
	width: 100px;
	height: 100px;
	background: black;
	animation-duration: .5s;