Skip to content

Instantly share code, notes, and snippets.

View joews's full-sized avatar

Joe Whitfield-Seed joews

View GitHub Profile
@joews
joews / index.html
Created July 24, 2014 13:55
D3 opacity tween vs CSS transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
}
@joews
joews / backbone-inflight.js
Created August 15, 2014 09:24
Make Backbone Collections and Models aware of their current sync state
// Patch Backbone Model and Collection to have awareness
// of current sync state.
// Adds an isLoading method and _inFlight count property.
// Fires before:sync and after:sync events.
// Based on http://tbranyen.com/post/how-to-indicate-backbone-fetch-progress
!function() {
function onSyncEnd() {
-- this._inFlight;
this.trigger("after:sync", this);
}
@joews
joews / index.html
Created September 1, 2014 19:29
Demonstrate slow paint in Chrome 39.0.2141.0 canary vs 37.0.2062.94
<!DOCTYPE html>
<html>
<head>
<style>
svg {
}
rect {
fill-opacity: 0.5;
@joews
joews / chart.js
Created September 5, 2014 11:30
c3.js categorical bar chart with colour per category
var colorScale = d3.scale.category10();
var chart = c3.generate({
bindto: '#bar-chart',
data: {
x: 'x',
columns: [
['x', 'apple', 'banana'],
['count', 191, 238],
],
@joews
joews / mixins.less
Created September 16, 2014 09:55
Less mixins
/*
* Re-usable Less mixins
*/
.ellipsis(@width: 100%) {
max-width: @width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
['Alfa','Bravo','Charlie','Delta','Echo','Foxtrot','Golf','Hotel','India','Juliett','Kilo','Lima','Mike','November','Oscar','Papa','Quebec','Romeo','Sierra','Tango','Uniform','Victor','Whiskey','X-ray','Yankee','Zulu']
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<canvas id="canvas"></canvas>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
//
@joews
joews / fa-content.js
Created February 2, 2015 17:34
Get content string for a Font Awesome class (stylesheet known)
function getContent(faClass) {
var styleSheet = document.styleSheets[1];
var selector = '.' + faClass;
var rules = [].filter.call(styleSheet.rules, function(rule) {
return rule.selectorText && (rule.selectorText.split('::')[0] === selector)
});
if(rules.length > 0) {
return rules[0].style.content
// http://stackoverflow.com/q/29747951/2806996
var transducers = require('transducers.js');
var csp = require('js-csp')
// Make transducer
var xAdd10 = transducers.map(function (x) {
return x + 10;
});
// Make a channel, using the transducer