Gabriel Walford gtwalford

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.wrapper__title {
  border: 1px solid black;
  border-radius: 5px 5px 0 0;

## index.html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id='admin'></div>
  <div class='template'>
    <div class='template__section' data-id='1'>

## throttle-debounce-example.js
const _throttle = (fn, timeout, opts) => {
  let pid = null;

  return () => {
    if(pid) { return }
    pid = setTimeout(fn, timeout);
  };
};

const _debounce = (fn, timeout, opts) => {

## VelocityScrollTo.jsx
import React, { PropTypes } from 'react'
import { isBrowser } from 'environment'
import { partial as _partial } from 'lodash'
import { VelocityComponent } from 'velocity-react'

if (isBrowser()) {
  require('./_ScrollTo.scss')
}

function onRefAnimationComponent (componentInstance, component) {

## mongo-populate.js
var q = keystone.list('IconographyPage')
                .model
                .find()
                .lean()
                .populate({
                  path: 'iconSections',
                  populate: { path: 'icons' }
                });

q.exec(function (err, results) {

## rem-mixin.scss
//=== px -> rem USE: @include rem('padding',18px 0 20px 5px);
//=== Thanks to the tons of posts that I put this together with.
@mixin rem($property, $px-values) {
  // Convert the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  // Print the first line in pixel values
  #{$property}: $px-values;
  // If there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number" {
    #{$property}: $px-values / $baseline-rem; }

## animate.jsx
import React from 'react';
import { VelocityTransitionGroup, velocityHelpers } from 'velocity-react';

const Animation = {};

if (process.env.BROWSER) {
  require('velocity-animate/velocity.ui');

  Animation.In = velocityHelpers.registerEffect({
    calls: [

## prevent scroll if already occurring
    if (!this._scrollToPositionTimeout) {
      this._scrollToPositionTimeout = setTimeout( function() {
        animateScroll(this._componentInstance)
        this._scrollToPositionTimeout = null
      }.bind(this), 0)
    }
    else {
      animateStop(this._componentInstance)
    }

## docker nginx reverse proxy

#Get IP for docker container from hosts file
upstream {{upstreamName}} {
        #container name / corresponding to hosts file
        server {{containerName}};
}

server {
        listen 80;
        server_name example.com;

## schema tags
nav - role="navigation" itemscope itemtype="{{schema url}}"
  ul
    li itemprop="url"
      a itemprop="name"
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.wrapper__title {
	border: 1px solid black;
	border-radius: 5px 5px 0 0;
	const _throttle = (fn, timeout, opts) => {
	let pid = null;

	return () => {
	if(pid) { return }
	pid = setTimeout(fn, timeout);
	};
	};

	const _debounce = (fn, timeout, opts) => {
	import React, { PropTypes } from 'react'
	import { isBrowser } from 'environment'
	import { partial as _partial } from 'lodash'
	import { VelocityComponent } from 'velocity-react'

	if (isBrowser()) {
	require('./_ScrollTo.scss')
	}

	function onRefAnimationComponent (componentInstance, component) {
	var q = keystone.list('IconographyPage')
	.model
	.find()
	.lean()
	.populate({
	path: 'iconSections',
	populate: { path: 'icons' }
	});

	q.exec(function (err, results) {
	//=== px -> rem USE: @include rem('padding',18px 0 20px 5px);
	//=== Thanks to the tons of posts that I put this together with.
	@mixin rem($property, $px-values) {
	// Convert the baseline into rems
	$baseline-rem: $baseline-px / 1rem * 1;
	// Print the first line in pixel values
	#{$property}: $px-values;
	// If there is only one (numeric) value, return the property/value line for it.
	@if type-of($px-values) == "number" {
	#{$property}: $px-values / $baseline-rem; }
	import React from 'react';
	import { VelocityTransitionGroup, velocityHelpers } from 'velocity-react';

	const Animation = {};

	if (process.env.BROWSER) {
	require('velocity-animate/velocity.ui');

	Animation.In = velocityHelpers.registerEffect({
	calls: [
	if (!this._scrollToPositionTimeout) {
	this._scrollToPositionTimeout = setTimeout( function() {
	animateScroll(this._componentInstance)
	this._scrollToPositionTimeout = null
	}.bind(this), 0)
	}
	else {
	animateStop(this._componentInstance)
	}

	#Get IP for docker container from hosts file
	upstream {{upstreamName}} {
	#container name / corresponding to hosts file
	server {{containerName}};
	}

	server {
	listen 80;
	server_name example.com;
	nav - role="navigation" itemscope itemtype="{{schema url}}"
	ul
	li itemprop="url"
	a itemprop="name"