Skip to content

Instantly share code, notes, and snippets.

@goldhand
goldhand / vendor-colors-iframe.html
Last active August 29, 2015 14:15
You can modify the "height" parameter. Place this outside of any tags if you can.
<div class="iframe-container">
<iframe src="//glueboss.herokuapp.com/#/" width="1200" height="600" frameborder="0"></iframe>
</div>
<style>
.iframe-container {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
@goldhand
goldhand / shaky.css
Last active August 29, 2015 14:16
Shakes an element on hover
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
@goldhand
goldhand / cars.js
Created July 30, 2015 18:07
Intro to Javascript prototypes
function Car() {}
var myCar = new Car;
Car.prototype.tickets = 0;
Car.prototype.incrementTickets = function() {
this.tickets++;
return this.tickets;
}
@goldhand
goldhand / javascript-prototype-problem.js
Created August 17, 2015 00:21
Refactor this using javascript prototypes
function myCar() {} // create a new car function object
myCar.driverCount = 0; // add a property to keep track of how many drivers are in myCar
myCar.incrementDriverCount = function() {
// increment the driver count of myCar by 1
myCar.driverCount++;
return myCar.driverCount; // return the driverCount of myCar for convenience
};
function Car() { // constructor
this.driverCount = 0; // this refers to the newly created object
}
Car.prototype.incrementDriverCount = function() {
// increments the driverCount of the instance of the new object invoking this method
this.driverCount++; // this still refers to the object who is invoking this function
return this.driverCount;
};
@goldhand
goldhand / omdLoadScreenSafty.js
Created August 28, 2015 22:33
Load screen helper for OMD. If
// <script type="text/javascript"> // remove the first two backslashes if pasting this into html
$(document).ready(function() { // document ready function
function loadScreenSafty() {
// Removes the loading class incase the library fails
var MILLISECONDS_FOR_LOAD_SCREEN_TO_FAIL = 5000; // change this to change delay time
function disableLoadScreens() {
@goldhand
goldhand / update_glueboss_json.py
Created August 28, 2015 22:39
Just run `$ python update_glueboss_json.py` from your terminal in the same folder as this file, glueboss-data.csv, and glueboss-data.json
import csv
import json
import sys
def main(argv):
'''
usage:
$ python update_json.py <glueboss-data.csv> <glueboss-data.json>
'''
@goldhand
goldhand / reducerTestSkeleton.js
Last active December 24, 2015 20:53
Simple redux test pattern
/*
* ReducerTestSkeleton
* Author: Will Farley <@goldhand>
* Skeleton for writing simple reducer tests.
* takes a reducer and expects it to return stateAfter when invoked with stateBefore and action.
*
*/
// Example: =
// const dummyTest = () => reducerTestSkeleton(
// {counter: 1},
@goldhand
goldhand / reactLoadingScreen.js
Last active January 14, 2016 16:33
Loading screen for react apps. If javascript is disabled and static page is being served, loader will not be displayed
import React from 'react';
const {PropTypes} = React;
const loaderStyles = {
position: 'fixed',
top: 0,
left: 0,
width: '100%',
@goldhand
goldhand / range.js
Created January 30, 2016 17:52
How to create an array in javascript similar to python's range function
Array.from(Array(5).keys());
// -> [0, 1, 2, 3, 4]
// Array(5)
// -> [ , , , , ]
// the values are empty but the keys will increment so we create another array from this array's keys.