TODO: Quick marketing use case / maybe a screenshot
# npm install phantomjs -g
npm install --save-dev clearhead
Make sure browserify is installed, either in your project or globally (npm install browserify -g
)
//test.js
var slugify = require('clearhead/slugify');
var articleTitle = 'How to use the Clearhead module library!';
var articleSlug = slugify(articleTitle);
Build your code: browserify test.js -o output.js
import timpl from 'clearhead/timpl';
NOTE: ES6 +browserify compilation best used alongside gulp-clearbuild
Appends css once jQuery + head element have finished loading.
import css from './v1.scss';
import appendCss from 'clearhead/append-css';
appendCss(css);
Provides a method of avoiding nested callbacks when performing multiple asynchronous operations (note that this module does not enforce that the operations be asynchronous). The module exposes two methods series
and waterfall
.
series(queue, iterator, [done])
Applies the function iterator
to each item in the queue
array, in sequence.
The iterator
is called with an item from the list, and a done callback for when it
has finished.
import { series } from 'clearhead/async';
// Sum array items asynchronously using a series.
series([1, 2, 3, 4], (curr, next, prev = 0) => {
// curr => the current item value
// prev => the previous item value
// next => the callback function with previous bound to the current item or the first argument passed to next on the previous iteration.
setTimeout(() => {
next(prev + curr);
}, 0);
}, (result) => {
// do something with the result
});
waterfall(queue)
Runs the queue
array of functions in sequence, each passing its results to the next in
the array.
import { waterfall } from 'clearhead/async';
waterfall([
function start(next) {
next(0);
},
function add2(running, next) {
next(running + 2);
},
function multiplyBy5(running, next) {
next(running * 5);
},
function(result) {
// do something with the result
},
]);
Breaks an array into smaller arrays of a given length.
import batch from 'clearhead/batch';
var longArray = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var smallerArrays = batch(longArray, 2);
/*
smallerArrays -> [
['zero', 'one'],
['two', 'three'],
['four', 'five'],
['six', 'seven'],
['eight', 'nine']
]
*/
@tomfuertes - Can you help fill in a description and example for this one?
//example code here
Sets, gets, and deletes a cookie with a given name, value, and optional expiration date (in days).
import cookie from 'clearhead/cookie';
var cookieName = 'the-name-of-my-cookie';
var cookieVal = 'the-value-of-my-cookie';
cookie.set(cookieName, cookieVal, 365);
cookie.get(cookieName); //Outputs 'the-value-of-my-cookie'
cookie.del(cookieName);
Sends information to CoreMetrics
import coremetrics from 'clearhead/coremetrics';
coremetrics(0123456789);
Returns a curried function that will not be called until all arguments received.
import curry from 'clearhead/curry';
var madlib = curry(function(pronoun, adjective, noun) {
console.log(pronoun+' is a '+adjective+' '+noun);
});
var myMadlib = madlib('Tesla');
//...
myMadlib = myMadlib('awesome');
//...
myMadlib('scientist');
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/debounce';
//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));
Provide a light-weight promise implementation.
import Deferred from 'clearhead/Deferred';
function doSomethingAsync() {
const dfd = Deferred();
setTimeout(() => {
if (true) dfd.resolve('it worked');
else dfd.reject('it failed');
}, 1000);
return dfd.promise();
}
doSomethingAsync()
.success(function successHandler() {})
.fail(function failureHandler() {});
Runs a function on domready - to be used on sites that don't have jQuery right away and/or not at all but you need to wait till the DOM is ready to run something.
import domready from 'clearhead/domready';
domready(function() {
console.log('The dom is ready! Do your thing.');
});
Gets a param value from location.search.
import getParam from 'clearhead/get-param';
//When run on the page: http://test.com?name=bob
console.log(getParam('name')); //Outputs: "bob"
Fires strings into auto-detected analytics installs.
const goal = require('clearhead/goal').bind(null, 'exp1-foo');
goal('click', '#bar');
Sends information to googleAnalytics.
import googleAnalytics from 'clearhead/google-analytics';
googleAnalytics(1234567, 'my-custom-variable');
Exposes information to googleTagManager by setting a global variable.
import googleTagManager from 'clearhead/google-tag-manager';
googleTagManager(1234567, 'my-custom-variable');
Loads a CSS file asynchronously.
import loadCSS from 'clearhead/load-css';
loadCSS('../styles/styles.css', null, media);
Loads a script and fires callback.
import loadScript from 'clearhead/load-script';
function optCallBack() {
console.log('my callback function is firing after the script loads!');
};
loadScript('../src/main.js', optCallBack);
Like a regular console.log but only fires in dev environments (localhost, preview links, debug cookies etc) so you can leave it in your code while pushing to production.
import log from 'clearhead/log';
log('Something is happening'); //Outputs to the console when run from http://localhost:8000/ but not http://clientwebsite.com
Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.
import notify from 'clearhead/notify';
$.notify('Hello!');
// or pass in optional message style (e.g. success, info, warn, or error)
$.notify('Uh oh!', 'warn');
Gives all browsers object.assign capabilities.
import anything from 'clearhead/object-assign-polyfill';
var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
Adds onload support for asynchronous stylesheets loaded with loadCSS. Used with loadCSS above.
import onloadCSS from 'clearhead/onload-css';
var stylesheet = loadCSS('path/to/mystylesheet.css');
onloadCSS(stylesheet, function() {
console.log('Stylesheet has asynchronously loaded.');
});
Adds a few functions (on
, off
, fadeIn
, fadeOut
) to Optimizely's version of jQuery.
import polyfill from 'clearhead/optimizely-jquery-polyfill';
polyfill($); // local ref to optimizely.$
Preloads images.
import preload from 'clearhead/preload';
var arrayOfLoadedImages = preload('./imgs/img01.jpg', './imgs/img02.jpg', './imgs/img03.jpg', './imgs/img04.jpg');
Sends an error back to GA as events for wallboards. Why a module? Because not all clients load window.ga so this just reverse engineers the endpoint using a beacon.
//example code here
Fires code when a user returns to an experiment.
import returnVisitor from 'clearhead/return-visitor';
returnValue('unique-name-for-tracking-users-for-just-this-call', function() {
console.log('The user was last here over 30min ago');
});
Returns the 'slug' of a string (replaces non-word characters with hyphens).
import slugify from 'clearhead/slugify';
var articleTitle = 'How to use the Clearhead module library!';
var articleSlug = slugify(articleTitle);
console.log(articleSlug); //Outputs: how-to-use-the-clearhead-module-library
Exposes a simple pattern to get / set from localStorage.
import store from 'clearhead/store';
store.set('key', 'value');
store.get('key'); //Returns 'value'
store.del('key');
Activates an Optimizely experiment after a specified time
import activateExperiment from 'clearhead/time-triggered-manual-activation';
activateExperiment(1445021756, 9876543210); //After 18:55:56 GMT on Fri, 16 Oct 2015, Optimizely experiment 9876543210 will be activated
Runs a supplied callback only between the specified start and end times
import timeWindow from 'clearhead/time-window';
var callback = function(){
console.log('Callback successfully called!');
};
timeWindow(1445021756, 2147483647, callback); //Logs 'Callback successfully called!' since the current time is probably between 18:55:56 GMT on Fri, 16 Oct 2015 and 03:14:07 GMT on Tue, 19 Jan 2038
To use a trusted server time instead of relying on the client time, try passing the response from http://i.clrhd.me/timestamp as the currentTime parameter
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/throttle';
//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));
Uses double-handlebar syntax to template a string with a data object.
import timpl from 'clearhead/timpl';
console.log(timpl('<div>{{name}}</div>', {name: 'Bob'})); //Outputs: <div>Bob</div>
Sends a prop to SiteCatalyst.
const track = require('clearhead/track').bind(null, 'prop52');
track('some-event');
Sends information to Google Universal Analytics.
import universalAnalytics from 'clearhead/universal-analytics';
universalAnalytics(1234567, 'my-custom-variable');
Polls for a jQuery element, and executes code when the element is found.
Can be silenced (so it doesn't blow up your console with log statements) by adding silentWhen=true as a query parameter to the page or creating a silentWhen variable on the window and setting it to true.
function callBackFun() {
console.log('it happened!');
};
when('.this-div', callBackFun);
//or
when('.this-div', function($el) {
console.log($el.text());
});
//or
//Runs $('.this-div').css('color', 'red'); as soon as the element is found
when('.this-div', 'css', 'color', 'red');
//Stop the when loop by passing 'stop' as the first argument
when('stop');
//To stop all when loops after a certain amount of time
setTimeout(function(){
when('stop');
}, 2000);
Helper pattern for try / catch / report.
// example code here
See LICENSE file.