Skip to content

Instantly share code, notes, and snippets.

View replete's full-sized avatar

Phil Ricketts replete

24 followers · 33 following
View GitHub Profile
@replete
replete / hashSafePropertyName.js
Created January 5, 2017 09:41
'Hash' safe property name. Take an object and represent it as a 'safe' javascript property string, for purposes of memoization.
/**
* @param {Object|string} input - The string or object to flatten into a hash key string
* @returns {string} - a string representing the object as a unique string.
* @example hashSafePropertyName({a:200,b:500,c:[300,200,'eggs']}); // 'a$200_b$500_c$__300_200_eggs__'
*/
function hashSafePropertyName(input) {
var isString = _.isString(input);
var isObject = _.isObject(input) && !_.isEmpty(input) && _.isArray(input);
if (!isString && !isObject) {
@replete
replete / task-runner.es6.js
Created December 28, 2016 17:25
Basic task runner - replace gulp with CLI
/**
Beginnings of ES6 node Task runner to replace gulp.
This example uses PostCSS and Pug to process CSS and HTML templates.
*/
// Global dependencies
const fs = require('fs-extra');
const bs = require('browser-sync').create();
const glob = require('glob');
@replete
replete / _lt-ie8-foundation-box-sizing.scss
Created October 21, 2013 11:42
Zurb Foundation Grid 4/5 IE7 support.
@charset "UTF-8";
/*---------------------------------------------------------------
IE6-7 Box-sizing polyfill, for Zurb ruleset
ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ
https://gist.github.com/replete/7082518
1) Requires box-sizing.htc from https://github.com/Schepp/box-sizing-polyfill
˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/
@replete
replete / zurb-foundation-4-orbit-thumbnails.html
Created October 14, 2013 17:04
Add thumbnails to Orbit Bullets in Zurb Foundation 4.
<!DOCTYPE html>
<html class="no-js" lang="en"><head>
<head>
<title>Zurb Foundation 4 Orbit Thumbnails</title>
</head>
<body>
<style type="text/css">
.orbit-bullets.has-thumbs {
padding-left: 0;
bottom: 0;
@replete
replete / _block-grid-5.scss
Created September 19, 2013 08:32
Zurb Foundation 5's missing block-grid (for 4.3)
//
// Block Grid Variables
//
$include-html-grid-classes: $include-html-classes !default;
// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
$block-grid-default-spacing: emCalc(20) !default;
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
@replete
replete / _block-grid-5-custom.scss
Created September 14, 2013 12:03
I've re-aligned Zurb 4.3/5's (mainly adds 'medium') grid and block-grid to activate with corresponding media query breakpoints. See my full post at https://github.com/zurb/foundation/issues/3261
// I've updated the Zurb4.3/5 Grid/block-grid systems to be in line with my suggestions at https://github.com/zurb/foundation/issues/3261
// http://github.com/replete
//
// Block Grid Variables
//
$include-html-grid-classes: $include-html-classes !default;
// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
@replete
replete / getLayoutBreakpoint.js
Last active December 21, 2015 16:28
Conditional CSS Breakpoints: CSS screen-width Media Queries 'synced' with Javascript. Stores breakpoint name via CSS font-family on <head>. IE7+
/*
LayoutBreakpoints - Sync JS with your CSS media queries - yay!
After painfully discovering that there is no hope for IE7 (and others) to read
content properties with generated content, I resolved to this solution.
If it doesn't work for you, you could easily change getElementsByTagName to
getElementsById and pop an ID attribute onto an element of your choosing.
See an example here: http://replete.github.io/FitTextNow/example.html (view-source)
@replete
replete / _easing.scss
Last active December 21, 2015 16:28
CSS3 Cubic-bezier translations of typical easing classes, in SASS variable syntax.
/*---------------------------------------------------------------
CSS Easing
ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ
https://gist.github.com/replete/6333588
Vanilla: #id { transition: 350ms all $ease }
Compass: #id { @include transition(350ms all $ease) }
˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/
@replete
replete / syncHeightWrapper.js
Last active December 18, 2015 04:49
Wrapper for jQuery.syncHeight(). Allows you to have multiple instances on a page with specifically instantiating them.
// Hastily plonked together by @replete, phil@replete.nu
/* Use like this:
<div class="some-html-chunk" data-sync-height="a-unique-name">Foo</div>
<div class="some-other-html-chunk" data-sync-height="a-unique-name">Bar</div>
*/
$('[data-sync-height]')
.each(function(i,e){
@replete
replete / updateVBA.sh
Created March 15, 2013 15:55
script to update vagrant VM virtualbox additions to specified version.
#!/bin/sh
#Update script for VBoxGuestAdditions
VBA_VERSION=4.2.8
wget -c http://download.virtualbox.org/virtualbox/${VBA_VERSION}/VBoxGuestAdditions_${VBA_VERSION}.iso
sudo mount VBoxGuestAdditions_${VBA_VERSION}.iso -o loop /mnt
sudo sh /mnt/VBoxLinuxAdditions.run --nox11
rm -f VBoxGuestAdditions_${VBA_VERSION}.iso