Cuttle Interview

Cuttle.com Javascript developer interview

HTML

<script src="http://blueimp.github.com/cdn/js/mocha.min.js"></script>
<script src="http://blueimp.github.com/cdn/js/expect.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/async/1.22/async.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/3.2.5/stylesheets/foundation.min.css">
<!-- Be it known that I hate writing raw HTML and would prefer to use Haml or its ilk -->
<!-- Also, the jsfiddle editor sucks. -->
<!-- INTRODUCTION SECTION -->
  <h1>stephan.com <small>jsFiddle Application</small></h1>

  <h3>You haz found a Javascript Developer!</h3>

  <p>
    <strong>stephan.com</strong> is an underfunded developer. 
    <a href="https://stephan.com/about">More about me.</a>
  </p>

  <p>
    I am seeking an exceptional <strong>employer</strong>
    who is as passionate about innovation as I am, 
    as forward-leaning as myself, who can
    <a href='http://en.wikipedia.org/wiki/List_of_Greek_phrases#.CE.94.CE.B4'>
      give me a place to stand on from which I may move the earth  
    </a>    
  </p>

  <h5>Your requirements, annotated:</h5>

  <ul>
    <li>
      A solid understanding of Javascript: 
      <em>Have you read 
        <a target="_blank" href="http://shop.oreilly.com/product/9780596517748.do">
          <u>The Good Parts</u>
        </a>?
      </em>
      <ul>
        <li>No.  Well, I've skimmed it, but I've found the good parts on my own.</li>
        <li>
          I've grown to love Javascript, particularly since learning jQuery.
          It's a funny situation.  Javascript was foisted on us by the browser manufacturers.
          We would have been stuck with whatever they gave us, perhaps some Von Neumann
          Algol-like imperative language, but instead, we got Lisp in C's clothing.
        </li>
        <li>
          You may find it interesting to check out my 2007 iPhone web app, 
          <a href="http://stephan.com/software/ififteen">iFifteen</a>.
          Read the code :)
       ...

CSS

/* let it be known that I hate raw CSS and would prefer to use SASS or its kin */

ul, ol {
    margin-left: 20px;
}

@-webkit-keyframes pulse {
    from{color: orange;}
    to {color: blue;}
}

span.ahem {
    color: orange;
    /* I do hope you're using a webkit browser */
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

#mocha ul,#mocha li{margin:0;padding:0;}
#mocha ul{list-style:none;}
#mocha h1,#mocha h2{margin:0;}
#mocha h1{margin-top:15px;font-size:1em;font-weight:200;}
#mocha h1 a{text-decoration:none;color:inherit;}
#mocha h1 a:hover{text-decoration:underline;}
#mocha .suite .suite h1{margin-top:0;font-size:.8em;}
.hidden{display:none;}
#mocha h2{font-size:12px;font-weight:normal;cursor:pointer;}
#mocha .suite{margin-left:15px;}
#mocha .test{margin-left:15px;}
#mocha .test.pending:hover h2::after{content:'(pending)';font-family:arial;}
#mocha .test.pass.medium .duration{background:#C09853;}
#mocha .test.pass.slow .duration{background:#B94A48;}
#mocha .test.pass::before{content:'✓';font-size:12px;display:block;float:left;margin-right:5px;color:#00d6b2;}
#mocha .test.pass .duration{font-size:9px;margin-left:5px;padding:2px 5px;color:white;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.2);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.2);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.2);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;}
#mocha .test.pass.fast .duration{display:none;}
#mocha .test.pending{color:#0b97c4;}
#mocha .test.pending::before{content:'◦';color:#0b97c4;}
#mocha .test.fail{color:#c00;}
#mocha .test.fail pre{color:black;}
#mocha .test.fail::before{content:'✖';font-size:12px;display:block;float:left;margin-right:5px;color:#c00;}
#mocha .test pre.error{color:#c00;max-height:300px;overflow:auto;}
#mocha .test pre{display:inline-block;font:12px/1.5...

JavaScript

// Set up mocha for tests
mocha.setup('bdd');

function stephan() { 
window.console && console.log("     _             _\n    | |           | |\n ___| |_ ___ _ __ | |__   __ _ _ __    ___ ___  _ __ ___\n/ __| __/ _ \\ '_ \\| '_ \\ / _` | '_ \\  / __/ _ \\| '_ ` _ \\\n\\__ \\ ||  __/ |_) | | | | (_| | | | || (_| (_) | | | | | |\n|___/\\__\\___| .__/|_| |_|\\__,_|_| |_(_)___\\___/|_| |_| |_|\n            | |\n            |_|");
}

///// PROBLEM 1 /////
// This problem attempts to create
// an array of four functions, each
// returning the numbers 1-4

function createHandlers() {
    var handlers = [],
        i;
    
    // Iterate 4 times
    for(i = 1; i <= 4; i++) {
        console.log("Creating handler: " + i);
        // Add new handler to handlers array
        (function(i) {
            handlers.push(function() {
                return i;
            });
        })(i)        
    }
    
    // To be very honest with you, this took me a surprisingly long time
    // and was driving me nuts, because I've worked with this _concept_ before
    // a zillion times.  Once I figured it out I realized - I have never used
    // a self-invoking function before.  In similar cases in the past,
    // I've used things like jQuery's iterators.  I've got it now :)
    // Feel free to look at my update history and make fun of my flailing :)
    
    // Call each function
    // Should log: 1, 2, 3, 4
    handlers.forEach(function(handler) {
        console.log("Handler returned: " + handler());
    });
    
    return handlers;
}
///// END Problem 1 /////




///// PROBLEM 2 /////
// This problem uses caolan's "async" 
// library https://github.com/caolan/async
//
// Two dice rolls occur in parallel, 
// passing their results to the final callback.

function rollTwoDiceAsync(callback) {
    // Run two rolls in parallel
    
    // oh, cool, that was easy... once I got my head around how caolan's async works.
    async.parallel([
        function(done) {
           ...