Logger: Custom Logs

index.html

<section>
  <h1>Logger</h1>
  <ul>
    <li><code>var log = new Logger();</code></li>
    <li class=log-info>
      <code>log.info(Hey, here’s some ‘info’, the number 2 is equal to:", 2)</code>
      <code symbol="і">Hey, here’s some ‘info’, the number 2 is equal to: <strong>2</strong></code>
    </li>
    <li class=log-pass>
      <code>log.pass("Great Job! You ‘pass’!")</code>
      <code symbol="✓">Great Job! You ‘pass’!</code>
    </li>
    <li class=log-warn>
      <code>log.warn("Watch yourself. I will only ‘warn’ you once...")</code>
      <code symbol="◬">Watch yourself. I will only ‘warn’ you once...</code>
    </li>
    <li class=log-fail>
      <code>log.fail("Woah, bro! Total ‘fail’! This is totally not what you were looking for.")</code>
      <code symbol="!">Woah, bro! Total ‘fail’! This is totally not what you were looking for.</code>
    </li>
    <li class=log-go>
      <code>log.go("Let’s just ‘go’ with something a bit more basic.")  </code>
      <code symbol="→">Let’s just ‘go’ with something a bit more basic.</code>
    </li>
    <li class=log-go>
      <code>log.go("Check the inspector, foo.")  </code>
      <code symbol="→">Check the inspector, foo.</code>
    </li>
  </ul>
</section>

Logger: Custom Logs.markdown

Logger: Custom Logs

Check the Inspector!

A method for logging that isn’t boring. Styling inspired by @jscottsmith’s informative pen.

A Pen by Jake Albaugh on CodePen.

License.

script.js

// 
// set up a new logger
//

var log = new Logger();



//
// example usage
// 

log.info("Hey, here’s some ‘info’, the number 2 is equal to:", 2);
log.pass("Great Job! You ‘pass’!");
log.warn("Watch yourself. I will only ‘warn’ you once...");
log.fail("Woah, bro! Total ‘fail’! This following object is totally not what you were looking for.", { awesome: false } );
log.go("Let’s just ‘go’ with something a bit more basic.");
log.info([0,1,2,3,4,5], { more: 'data'} );



//
// the goods
//

function Logger() {
  
  return {
  
    //
    // private methods
    //

    private: {

      //
      // available colors
      // based on colors in @jscottsmith’s pen 
      // http://codepen.io/jscottsmith/pen/VLzMLo
      //

      colors: {
        red: "#EC5f67",
        orange: "#F99157",
        green: "#81CC79",
        blue: "#6699CC",
        gray: "#555",
        white: "#f9f9f9"
      },



      //
      // scheme generator. take a hex color
      //

      scheme: function(color) {
        var line_height = "line-height: 16px;",
            // title-specific styles
            title_color = "color: " + this.colors.white + ";",
            title_background = "background-color: " + color + ";",
            title_font = "font-size: 14px;" + line_height,
            title_block = "padding: 2px 8px; border-radius: 3px;",
            title_style = title_color + title_background + title_font + title_block,
            // basic text styles
            text_color = "color: " + color + ";",
            text_padding = "padding: 4px 4px;", // vertical needs to match title for vertical centering
            text_font = "font-size: 11px;" + line_height,
            text_style = text_font + text_color + text_padding,
            // universal styles
            bold = "font-weight: bold;";

        var scheme = {
          title: title_style,
          content: text_style,
          integer: text_style + bold
        };

        // return scheme
        return scheme;

      },



      //
      // condensed log function. takes a title, scheme of two values, and infinite remaining arguments
      //  

      log: function(/**/) {

        var args = arguments,
            // color scheme variables
            title = args[0], scheme = args[1],
            // collections to be combined in output
            msg = [], strs = "", data = [];

        // for each remaining argument
        for(var i = 2; i <= args.length - 1; i++){
          // if a string, we want to add it after title and add color
          if (typeof args[i] != "object") {
            // create the string
            var str = "%c" + args[i];
            // add string to our strings
            strs += str;

            // if not a string, it is integer or boolean and we want to style it differently
            if (typeof args[i] != "string") {
              msg.push(scheme.integer);
            } else {
              msg.push(scheme.content);
            }
          } else {
            data.push(args[i]);
          }
        }

        // the log that matters
        if (msg.length > 0) {
          var msg = ["%c" + title + strs, scheme.title].concat(msg);
          console.log.apply(console, msg);
        }
        
        // log objects, arrays, html etc if exists
        if (data.length > 0) {
          if (msg.length == 0) {
            var title = ["%c"+title+"%cdata →", scheme.title, scheme.integer];
            console.log.apply(console, title);
          }
          console.log.apply(console, data);
        }
      },



      //
      // message method takes existing static vars array and
      // adds variable number of arguments
      //

      message: function(msg,args) {
        for(var i = 0; i < args.length; i++) msg.push(args[i]);
        return msg;
      }

    },


    //
    // begin public methods
    // getting char entities from http://dev.w3.org/html5/html-author/charref
    //

    info: function(/**/) { // `/**/` to represent infinite params
      var msg = this.private.message(["і", this.private.scheme(this.private.colors.blue)], arguments);
      this.private.log.apply(null, msg);
    },

    warn: function(/**/) {
      var msg = this.private.message(["◬", this.private.scheme(this.private.colors.orange)], arguments);
      this.private.log.apply(null, msg);
    },

    pass: function(/**/) {
      var msg = this.private.message(["✓", this.private.scheme(this.private.colors.green)], arguments);
      this.private.log.apply(null, msg);
    },

    fail: function(/**/) {
      var msg = this.private.message(["!", this.private.scheme(this.private.colors.red)], arguments);
      this.private.log.apply(null, msg);
    },

    go: function(/**/) {
      var msg = this.private.message(["→", this.private.scheme(this.private.colors.gray)], arguments);
      this.private.log.apply(null, msg);
    }


  }
  
}

style.scss

$items: info, warn, pass, fail, go;
$colors: (
  info: #6699CC,
  warn: #F99157,
  pass: #81CC79,
  fail: #EC5f67,
  go:   #555
);

body { 
  color: white;
  background-color: #111;
  background-image: linear-gradient(top left, #222, #111);
  background-size: cover;
  background-position: center;
  height: 100vh;
}

section {
  margin: 0 auto; 
  width: 90%;
  max-width: 700px;
}

@import url(http://fonts.googleapis.com/css?family=Montserrat:700);

$shadow: ();
$start-shadow: ();
@for $i from 1 through length($colors) {
  $color: rgba(map-get($colors,nth($items, $i)),0.4);
  $colortrans: rgba(map-get($colors,nth($items, $i)),0);
  $inc: 16px;
  $shadows: (
    $inc*$i $inc*$i 0px $colortrans,
    $inc*-$i $inc*-$i 0px $colortrans,
    $inc*-$i $inc*$i 0px $colortrans,
    $inc*$i $inc*-$i 0px $colortrans,
    $inc*$i 0px 0px $colortrans,
    $inc*-$i 0px 0px $colortrans,
    0px $inc*-$i 0px $colortrans,
    0px $inc*$i 0px $colortrans
  );
  @each $shad in $shadows {
    $shadow: append($shadow, $shad, comma);
  }
  $start-shadows: (
    0px 0px 0px $color,
    0px 0px 0px $color,
    0px 0px 0px $color,
    0px 0px 0px $color,
    0px 0px 0px $color,
    0px 0px 0px $color,
    0px 0px 0px $color,
    0px 0px 0px $color
  );
  @each $shad in $start-shadows {
    $start-shadow: append($start-shadow, $shad, comma);
  }
}

h1 { 
  text-align: center; 
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  font-size: 4em;
  font-weight: 700;
  margin: 1em 0;
  letter-spacing: 0.125em;
  color: rgba(white,1);
  text-shadow:$start-shadow;
  animation: 
    shadow 2s ease-out infinite,
    spacing 2s ease-out infinite;
  
}

@keyframes spacing {
  0%, 100% { letter-spacing: 0.125em; }
  50% { letter-spacing: 0.25em; }
}
@keyframes shadow {
  0%, 50% { text-shadow: $start-shadow; }
  100%    { text-shadow: $shadow; }
}

ul {
  margin: 0;
  font-size: 13px;
  box-shadow: 0px 2px 0px 2px rgba(#999,0.3); 
  border-radius: 3px;
  color: #555;
  box-sizing: border-box;
  list-style: none;
  padding: 12px;
  background: rgba(#FFF,0.9);
  background: linear-gradient(top left, #eee, #ddd);
  background-repeat: no-repeat;
  li + li {
    margin-top: 1.6em; 
  }
  li[class^="log"] {
    code { 
      display: block; 
    }

    code:last-child {
      margin: 4px 0;
      padding: 6px 4px;
      line-height: 16px; 
      font-size: 11px;
      border-top: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;
      background: white;
      &::before {
        content: attr(symbol);
        padding: 2px 8px; 
        margin-right: 4px;
        border-radius: 3px;
        font-size: 14px;
        color: #f9f9f9;
      }
    }
  }
}

@each $item, $color in $colors {
  li.log-#{$item} {
    code:last-child { color: $color; }
    code:last-child::before {
      background: $color;
    }
  }
}