Skip to content

Instantly share code, notes, and snippets.

/**
* Creates a string of an element, showing the node name and all attributes.
* This is mainly useful for debugging in Internet Explorer where a DOM node
* representation isn't shown in the console.
*
* @param {Element} elem Element to stringify.
* @return {string} String representation of the element.
*/
function stringifyElem(elem) {
@Skateside
Skateside / dom.js
Created April 22, 2014 14:51
Playing with simply but highly-efficient DOM selections
var dom = {
toArray: function (nodes) {
var array = [];
if (nodes) {
array = typeof nodes.length === 'number' ?
Array.prototype.slice.call(nodes) :
@Skateside
Skateside / watch.js
Created April 21, 2015 10:04
Watch for attribute changes
/**
* watch(element, attribute, handler)
* - element (Element): Element whose attribute should be watched for changes.
* - attribute (String): Attribute to watch.
* - handler (Function): Function to execute when the attribute changes.
*
* `watch` allows DOM Nodes to have their attributes watched for changes.
* Internally, this function uses the most efficient mean possible to watch for
* the change (more in the **Configuring** section).
*
@Skateside
Skateside / jquery.imagepromise.js
Last active August 29, 2015 14:20
Convert images of a given element into promises and trigger an event when they all load.
/*
MIT license.
Copyright (c) 2015 James "Skateside" Long
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
@Skateside
Skateside / addEventListener.js
Created July 12, 2012 21:41
I'm working on a polyfill for addEventListener. When it's complete, it will work with custom events, support removeEventListener and support the DOMContentLoaded event
// Shim to make sure that we've got the modern functions and methods that we
// need, namely [].forEach, [].map and Object.keys
(function () {
var undef, // = undefined;
isStringArray = 'a'[0] === 'a', // Used in toObject.
toString = Object.prototype.toString, // Used for class checking.
hasDontEnumBug = !{toSring: null}.propertyIsEnumerable('toString'),
@Skateside
Skateside / extend.js
Created July 29, 2012 22:06
I've been looking at Sugar and RightJS and I figured I'd start playing with my own version. I like what these things do to the language, they make it seem a lot more sensible. Ultimately this would add the ES5 and ES6 methods as well as some more new ones
// This is very similar to the standard implimentation of Object.extend but the
// important difference here is that this method will not overwrite any existing
// method of the source object. This makes it idea for updating native objects.
if (!Object.hasOwnProperty('update')) {
(function () {
'use strict';
var setProp = function (source, property, value) {
Object.defineProperty(source, property, {
@Skateside
Skateside / Basic shim.js
Created October 8, 2012 20:26
Started using mixins quite a bit so I built a few functions to make it easier.
// These shims patch methods that the SK80 micro-library uses. References to the
// ES5 spec have been included to ensure that the shims are as close to
// standards as possible.
(function () {
'use strict';
var isStringArray = 'a'[0] === 'a',
objProto = Object.prototype,
toString = objProto.toString;
@Skateside
Skateside / supportsSelector.js
Created November 14, 2012 10:18
CSS selector support ion a handy function
// Detects whether or not a given CSS selector is supported by the current
// browser.
//
// Takes:
// selector (String) The CSS selector to test.
// Returns:
// (Boolean) true if the selector is supported, false
// otherwise.
var supportsSelector = (function () {
@Skateside
Skateside / prototype.js
Last active October 14, 2015 01:08
Just a simpler version of SK80.create from the mixin micro library. Note to self: integrate this
/**
* Extends one object with another. The object in the first argument is
* modified.
*
* @param {Object} source Source object to extend.
* @param {Object} extra Additional properties to add to the source object.
* @return {Object} Modified source object.
*/
function extendObject(source, extra) {
@Skateside
Skateside / createClass.js
Last active December 14, 2015 15:18
A handy function that creates a class in JavaScript
var createClass = (function () {
'use strict';
// Basic no-operation function
var noop = function () {
return;
},
// Tests to see whether or not regular expressions can be called on