JavaScript – Simple Copy and Clone

There’s a bunch of ways to do this. I think what follows is the most simple, logical, portable and transparent. Copy: var copy = function(to, from, deep){ for(var key in from){ if(from.hasOwnProperty(key)){ if(deep && typeof from[key] == ‘object’){ to[key] = arguments.callee.call(null, {}, from[key], deep); } else { to[key] = from[key]; } } } return to; […]

Simple HTML (string) to DocumentFragment (usable Node)

var htmlToFragment = function(html){ var proxy = document.createElement(‘div’); proxy.innerHTML = html; var fragment = document.createDocumentFragment(); while(proxy.firstChild){ fragment.appendChild(proxy.firstChild); } return fragment; };

JavaScript – recursively construct (provide) a namespace

var provide = function(string){ var parts = string.split(‘.’); var first = parts.shift(); if(!(first in this)){ this[first] = {}; } if(parts.length > 0){ string = parts.join(‘.’); arguments.callee.call(this[first], string); } }; Use like: provide(‘org.upshots.widgets’); org.upshots.widgets.SomeWidget = function(){}; POC: http://jsfiddle.net/moagrius/4L31fxoy/1/

JavaScript – get index of child element

var getChildIndex = function(child){ var parent = child.parentNode; var children = parent.children; var i = children.length – 1; for (; i >= 0; i–){ if (child == children[i]){ break; } } return i; }; POC: http://jsfiddle.net/moagrius/kamcb6gr/

Change content of before or after psuedo element with JavaScript

Set the content to an attribute, and change the attribute with script. #some-id:after { content: attr(data-something); } document.getElementById(‘some-id’).dataset.something = new Date(); POC: http://jsfiddle.net/moagrius/9vt04bch/

Simple JavaScript to Query Parameter Serializer

var serialize = function(data, name) { var product = []; for(var property in data) { if (data.hasOwnProperty(property)) { var key = property; if(name){ key = name + ‘[‘ + property + ‘]’; } var value = data[property]; var string = (value && typeof value == ‘object’) ? serialize(value, key) : encodeURIComponent(key) + ‘=’ + encodeURIComponent(value); […]

Seriously Simple JavaScript Cookie Management

Here’s the basic idea of one way to manage cookies with JavaScript. As always, there are more robust libraries available, but here’s the upshot: var CookieManager = function(){}; CookieManager.instance = null; CookieManager.getInstance = function(){ if(CookieManager.instance == null){ CookieManager.instance = new CookieManager(); } return CookieManager.instance; }; CookieManager.prototype.get = function(key){ key = key + “=”; var parts […]

Why does indexOf return -1

Both Array.prototype.indexOf and String.prototype.indexOf (as well as all their counterparts in other languages) return -1 when a match is not found. This can seem less-than-obvious to new learners. I often use this example to illustrate why: var getIndex = function(array, element){ var i = array.length; while(–i >= 0){ // this could be “i in array” […]

Simple requestAnimationFrame polyfill

While there are definitely better versions, as always I’m concerned with the fundamental function – and for requestAnimationFrame it’s pretty straightforward: window.requestAnimationFrame = function(callback){ return window.setTimeout(function(){ callback(+(new Date())); }, 20); }; window.cancelAnimationFrame = window.clearTimeout;

Basic JavaScript Tasks (vanilla, framework agnostic)

Create a reference var someVariable = true; Create a function var someFunction = function(a, b, c){ console.log(a, b, c); }; // or… function someFunction(a,b,c){ console.log(a, b, c); } Create an array var someArray = [1,2,3]; Create an object var someObject = {}; Assign properties to an object someObject.someProperty = “someValue”; // or… var someProperty = […]