merlinmann

Merlin's Wisdom Project

Or: “Everybody likes being given a glass of water.”

By Merlin Mann.

It's only advice for you because it had to be advice for me.

paulirish

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.

cfj

var _log = console.log;

window.console.log = function(log){
  _log.call(console, log.reverse ? log.reverse() : typeof log === 'string' ? log.split('').reverse().join('') : typeof log === 'number' ? log.toString().split('').reverse().join('') : typeof log === 'boolean' ? !log : log);
};

cfj

window.console.clog = function(log){
    var message = typeof log === 'object' ? '%cLooks like you\'re trying to log an ' : '%cLooks like you\'re trying to log a ',
        style = 'background:url(http://i.imgur.com/SErVs5H.png);padding:5px 15px 142px 19px;line-height:280px;';
    console.log.call(console, message + typeof log + '.', style);
};

cfj

window.console.loge = function (msg) {
  var gifs = ['wink','shake-space','peepers','prizza','hat','gradient','fat','rainbow','sunglasses','derp','shake'],
  wow = ['', 'wow! ', 'amaze! ', 'dazzle! '],
  adjs = ['so', 'such', 'many', 'much', 'very'],
  randomizr = function (a) { return a[Math.floor(Math.random() * a.length)];},
  message = '%c ' + randomizr(wow) + randomizr(adjs) + ' ' + typeof msg + ': ',
  css = 'background-image: url(http://d1e3ezyatlol8u.cloudfront.net/img/212/doge-' + randomizr(gifs) + '-212.gif); background-size: 80px 80px; background-repeat: no-repeat; font-family: \'Comic Sans MS\', cursive; padding: 25px; line-height: 64px; color: white; font-weight: 800; width: 100%; display: block;';
  console.log.apply(console, typeof msg === 'object' ? [message, css, msg] : [message += msg, css]);
};

jwalton

Graphing Widget

The graphing widget shows graphs using the Rickshaw graphing library. The names of data fields should be (vaguely) familiar if you've used Rickshaw before.

It's recommended that you replace the /assets/javascripts/rickshaw.min.js from your dashboard with the latest from here.

Supported HTML data fields