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!');
});