clearhead-utilities v1.0.15
Clearhead Utilities
These are commonly used utility functions that can be selectively used in experiments via ES6 imports.
Installation
This module can be added directly to an experiment folder's package.json file or manually installed via:
npm install clearhead-utilities --save-dev
Usage
Import via your experiment code:
import { getCookie, slugify, when } from 'clearhead-utilities';
Utility Functions
console-proxy
For use when a site's console is overwritten to an empty function. Sets the console object back to it's original state.
import { consoleProxy } from 'clearhead-utilities';
// Call consoleProxy to reset console back to its original state
consoleProxy();
console.log('The console is back');
cookie
Sets, gets, and deletes a cookie with a given name, value, and optional expiration date (in days).
import { getCookie, setCookie, deleteCookie } from 'clearhead-utilities';
getCookie('cookie-name');
setCookie('cookie-name', 'cookie-value', 365);
deleteCookie('cookie-name');
debounce
Prevents a function from being recalled repeatedly. The function will be called again after it stops being called for N milliseconds.
See https://css-tricks.com/the-difference-between-throttling-and-debouncing/ for a good writeup for the difference between debounce and throttle.
import { debounce } from 'clearhead-utilities';
// The inner function will only be called after the user has stopped scrolling for 100ms
$(window).on('scroll', debounce(function() {
console.log('The user started scrolling and this function didn\'t execute until there was a 100ms break in the scrolling');
}, 100));
dollar-to-float
Turns dollar format string into a "mathable" float.
import { dollarToFloat } from 'clearhead-utilities';
const cartValue = dollarToFloat('$59.00'); // Returns 59
float-to-dollar
Turns floats into a dollar format string with commas.
import { floatToDollar } from 'clearhead-utilities';
const dollarValue = floatToDollar(59.00); // Returns "$59.00"
load-script
Loads a script and fires callback.
import { loadScript } from 'clearhead-utilities';
function optCallBack() {
console.log('my callback function is firing after the script loads!');
};
loadScript('../src/main.js', optCallBack);
preload
Preloads images.
import { preload } from 'clearhead-utilities';
const arrayOfLoadedImages = preload('./imgs/img01.jpg', './imgs/img02.jpg', './imgs/img03.jpg', './imgs/img04.jpg');
slugify
Returns the 'slug' of a string (replaces non-word characters with hyphens).
import { slugify } from 'clearhead-utilities';
const articleTitle = 'How to use Clearhead utilities!';
const articleSlug = slugify(articleTitle);
console.log(articleSlug); // Outputs: how-to-use-clearhead-utilities
throttle
Borrowed from http://underscorejs.org/docs/underscore.html
Returns a function, that, when invoked, will only be triggered at most once during a given window of time. Normally, the throttled function will run as much as it can, without ever going more than once per wait duration; but if you’d like to disable the execution on the leading edge, pass {leading: false}. To disable execution on the trailing edge, ditto.
See https://css-tricks.com/the-difference-between-throttling-and-debouncing/ for a good writeup for the difference between throttle and debounce.
import { throttle } from 'clearhead-utilities';
// The inner function will only be called every 100ms while the user is scrolling
$(window).on('scroll', throttle(function() {
console.log('You\'ll see this message every 100ms while the user is still scrolling');
}, 100));
wait-for
Uses a recursive setTimeout to wait for a condition to be true and then runs a callback. It has a default interval of 50ms and default timeout of 20 seconds.
import { waitFor } from 'clearhead-utilities';
waitFor(
() => {
return document.querySelector('.something') &&
window.someOtherVariable;
},
() => {
console.log('Callback fn');
}
);
when
Polls for a DOM element, and executes code when the element is found. It times out after DOM ready.
import { when } from 'clearhead-utilities';
when('.this-div', elements => {
console.log('Found elements!');
});