Skip to content

Instantly share code, notes, and snippets.

View font-size-comparison.html
<!doctype html>
<title>Font-size unit comparisons</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
View gist:4558947
Ply.ui.define('html', {
__elements: {
body: 'body'
__partials: {
body: 'body'
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 / 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 / box.css
Last active Feb 8, 2021
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 / 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 / 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 / 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 / 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; =;
View validators.js
'use strict';
* Validators are functions accepting `state` and `prop` where `state` is an object
* containing the entire form state, e.g. `{ email: 'email', password: 'password' }`
* and `prop` refers to the property on `state` to be validated.
* Validators are expected to return a falsy value if valid and a truthy value if
* invalid. This is to allow information re: the error to be returned. e.g.