Skip to content

Instantly share code, notes, and snippets.

Richard Scarrott richardscarrott

Block or report user

Report or block richardscarrott

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
richardscarrott / NetworkError.js
Created Jan 11, 2016
Wrapper around `window.fetch`
View NetworkError.js
'use strict';
class ExtendableError extends Error {
constructor(message) {
this.message = message;
this.stack = (new Error()).stack; =;
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 / 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()) {
} else {
richardscarrott / gist:8470929
Last active Jan 3, 2016
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 / box.css
Last active Dec 26, 2019
Fading an element in from display: none; with CSS transitions.
View box.css
.box {
display: block;
background: red;
width: 200px;
height: 200px;
opacity: 1;
.box-hidden {
display: none;
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>
Event order
<style type="text/css">
* {
margin: 0;
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 () {
View gist:4558947
Ply.ui.define('html', {
__elements: {
body: 'body'
__partials: {
body: 'body'
View font-size-comparison.html
<!doctype html>
<title>Font-size unit comparisons</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
You can’t perform that action at this time.