Skip to content

Instantly share code, notes, and snippets.

Avatar

Richard Scarrott richardscarrott

58 followers · 34 following · 287
View GitHub Profile
@richardscarrott
richardscarrott / Backbone view rendering
Last active Aug 29, 2015
Choreographing view rendering
View Backbone view rendering
var MyCollectionView = Backbone.View.extend({
initialize: function() {
this.listenTo(this.collection, 'request', this.showLoader);
this.listenTo(this.collection, 'reset', this.render);
this.listenTo(this.collection, 'add', this.renderItem);
this.listenTo(this.collection, 'remove', this.removeItem);
if (this.collection.isReady()) {
this.render();
} else {
@richardscarrott
richardscarrott / font-size-comparison.html
Created Jun 2, 2011
font-size unit comparisons
View font-size-comparison.html
<!doctype html>
<html>
<head>
<title>Font-size unit comparisons</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
@richardscarrott
richardscarrott / gist:4558947
Last active Dec 11, 2015
Test case for - https://github.com/createthegroup/ply/issues/2
View gist:4558947
Ply.ui.define('html', {
__elements: {
body: 'body'
},
__partials: {
body: 'body'
},
@richardscarrott
richardscarrott / Header1.css
Last active Dec 15, 2015
Typography React Component -- React header component with margin prop corrected for line-height
View Header1.css
/* $margin-large: 28px === desired margin from baseline. */
/* $margin-medium: 16px === desired margin from baseline. */
/* $margin-small: 8px === desired margin from baseline. */
.base {
/* line-height adds 16px(!) to bottom of heading */
line-height: 1.5;
font-size: 40px;
}
@richardscarrott
richardscarrott / jquery.serializeobject.js
Created Apr 16, 2013
jQuery.fn.serializeObject - Analogous to jQuery.fn.serializeArray and jQuery.fn.serialize but instead returns an object; useful when setting form values in Backbone.
View jquery.serializeobject.js
/*global jQuery */
/*jshint bitwise: true, camelcase: true, curly: true, eqeqeq: true, forin: true,
immed: true, indent: 4, latedef: true, newcap: true, nonew: true, quotmark: single,
undef: true, unused: true, strict: true, trailing: true, browser: true */
(function ($) {
'use strict';
$.fn.serializeObject = function () {
@richardscarrott
richardscarrott / event-order.html
Created Sep 5, 2013
Logs out touch and mouse event order and records which events are actually prevented when `e.preventDefault` is called.
View event-order.html
<!doctype html>
<html>
<head>
<title>
Event order
</title>
<style type="text/css">
* {
margin: 0;
@richardscarrott
richardscarrott / gist:8470929
Last active Jan 3, 2016
jquery.clickoutside.js
View gist:8470929
/*
* invokes 'focusout' / 'blur' type effect on any element
*
* NOTE: binds to html element so ensure namespace is passed in for manual unbinding.
*/
(function ($, undefined) {
var defaults = {
namespace: 'clickOutside', // namespace to unbind at later time (currently manual)
@richardscarrott
richardscarrott / NetworkError.js
Created Jan 11, 2016
Wrapper around `window.fetch`
View NetworkError.js
'use strict';
// http://stackoverflow.com/questions/31089801/extending-error-in-javascript-with-es6-syntax
class ExtendableError extends Error {
constructor(message) {
super();
this.message = message;
this.stack = (new Error()).stack;
this.name = this.constructor.name;
}
@richardscarrott
richardscarrott / events.js
Created Feb 18, 2016
View events.js
const EventEmitter = require('events');
const myEmitter = new EventEmitter();
function handler1() {
console.log('first handler');
myEmitter.removeListener('event', handler2);
}
function handler2() {
@richardscarrott
richardscarrott / add.js
Last active Apr 1, 2016
View add.js
function add(val = 0, ...args) {
let sum = args.reduce((prev, curr) => {
return prev + curr;
}, val);
let ret = add.bind(this, sum);
ret.value = () => sum;
ret.add = ret;
return ret;
}