crometrics
TODO: Quick marketing use case / maybe a screenshot
Installation
# npm install phantomjs -g npm install --save-dev crometrics
Usage
Standalone
Make sure browserify is installed, either in your project or globally (npm install browserify -g
)
//test.jsvar slugify = ; var articleTitle = 'How to use the module library!';var articleSlug = ;
Build your code: browserify test.js -o output.js
Inside a project
;
NOTE: ES6 +browserify compilation best used alongside gulp-clearbuild
Modules
append-css
Appends css once jQuery + head element have finished loading.
;; ;
console-polyfill
@tomfuertes - Can you help fill in a description and example for this one?
//example code here
cookie
Sets, gets, and deletes a cookie with a given name, value, and optional expiration date (in days).
; var cookieName = 'the-name-of-my-cookie';var cookieVal = 'the-value-of-my-cookie'; cookie;cookie; //Outputs 'the-value-of-my-cookie'cookie;
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.
; //The inner function will only be called after the user has stopped scrolling for 100ms;
debug
debugger;
activation helper based on cro_debug=true
in query param. Also sets a cookie like in the log
helper so future pageviews have debugger;
enabled as well.
; { ; ;} ### domready Runs a ;
get-param
Gets a param value from location.search.
; //When run on the page: http://test.com?name=bobconsole; //Outputs: "bob"
load-css
Loads a CSS file asynchronously.
; ;
load-script
Loads a script and fires callback.
; { console;};;
log
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.
; ; //Outputs to the console when run from http://localhost:8000/ but not http://clientwebsite.com
notify
Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.
; $; // or pass in optional message style (e.g. success, info, warn, or error)$;
onload-css
Adds onload support for asynchronous stylesheets loaded with loadCSS. Used with loadCSS above.
; var stylesheet = ;;
preload
Preloads images.
; var arrayOfLoadedImages = ;
report
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
return-visitor
Fires code when a user returns to an experiment.
; ;
slugify
Returns the 'slug' of a string (replaces non-word characters with hyphens).
; var articleTitle = 'How to use the module library!';var articleSlug = ;console; //Outputs: how-to-use-the-module-library
store
Exposes a simple pattern to get / set from localStorage.
; store;store; //Returns 'value'store;
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.
; //The inner function will only be called every 100ms while the user is scrolling;
timpl
Uses double-handlebar syntax to template a string with a data object.
; console; //Outputs: <div>Bob</div>
when
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.
{ console;}; ; //or ; //or //Runs $('.this-div').css('color', 'red'); as soon as the element is found; //Stop the when loop by passing 'stop' as the first argument; //To stop all when loops after a certain amount of time;
wrap
Helper pattern for try / catch / report.
// example code here
License
See LICENSE file.