js3.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="that js dude" content="">    
    <title>Intermediate developer</title>

    <link rel="shortcut icon" href="images/favicon.jpg">    
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/zenburn.css">
    <!-- Custom styles for this template -->
    <style>
      /* Move down content because we have a fixed navbar that is 50px tall */
      body {        
        padding-bottom: 20px;
      }
      .purpleBold{
        color:purple;        
        font-weight: bold;
      }
      .gray{
        color: gray;
      }
      .blueish{
        color: rgba(151, 182, 209, 0.98);
      }
      .singInStuff{
        margin-top: 9px;
      }
      #uName{
        margin-top: -7px;
      }
      .skipListItem{
        list-style-type: none;
      }
      .skipListItem a{
        color: inherit;
      }
      a:visited
      { 
        color: rgba(218, 209, 149, 0.98);
      }
      /*style for demo*/
      
    </style>

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
 
  <body>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>JS: tricky Quiz</h1>        
        <h2>part -3: intermediate</h2>
        <p>January 26, 2014</p>
<!--         <div id="fb-root"></div><div class="fb-like" data-href="http://www.thatjsdude.com/interview/js1.htmQuiz" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> &nbsp;<div class="g-plusone"></div>
      -->
      </div> 
    </div>
    <div class="container">
      <!-- Example row of columns -->

      <div class="row center">        
        <!-- <iframe width="853" height="480" src="//www.youtube.com/embed/Rx_JFOSxgpY" frameborder="0" allowfullscreen></iframe> -->
      </div>
           
      <!-- <p class="gray">if you are little more comfortable or claim to be comfortable with javascript, these questions would not be enough for you. more coming</p>
      <p class="gray"> <span class="purpleBold">More Questions</span> <a href="css.html">css interview questions</a>, <a href="html.html">html interview questions</a> </p> -->
      <h2>this could be alogrithm part 2 and mock up will go js4</h2>
      <div>
              <h2>Closure</h2>
              <p><strong>Question:</strong> What is closure? How closure creates encapsulation?</p>
               <p> <strong>Answer:</strong> If you have a function within a function, execution of the inner function will create a scope inside of the outer function- a nested scope. Because the inside function scope is enclosed by the outer function scope, the inner function scope is called a closure (I invented this definition). Remember, to be a closure, you dont have to return a function, you just have to call a function inside a function.</p>
               <pre><code>
function counter(){
    var i = 0;    
    return function(){
       return i++;
    }
}
               </code></pre>
               <pre><code>
var a = counter();
a(); //0
a(); //1
a(); //2
a(); //3
a(); //4
               </code></pre>
              <p><strong>Encapsulation: </strong>You would not be able to access (get or set) the value of "i" from outside. Hence the privacy of the value of "i" is maintained secretly. However, you execute a(), the value of "i" will be increased by one. This is called encapsulation in object oriented programming.</p> 
            </div>
            <div id="checkInteger">
              <h2>Check Integer</h2>
              <p><strong>Question:</strong> How you can verify integer in JavaScript?</p>
              <p><strong>Answer: </strong> There are 5 ways to check integer</p>
              <ol>
                <li>Use build in <code>isInteger</code> method</li>
                <li>parse the number as integer and compare parsed one with the original number. If both are equal, then the provided number is integer. Optionally you can do a whether the provided number is Number or not by is <code>isNaN</code></li>
                <li>If you divide by 1 and remainder is 0, then its integer. You can additionally check whether typeof of the provided number is 'number' or not</li>
                <li>Use <code>Math.round</code> if rounded number is equal to the provided number, then it is integer</li>
                <li>I can't explain this one. sorry dude :p</li>
              </ol>
              <pre><code>
//1. 
Number.IsInteger(num); 
//2. 
num === parseInt(num);
!isNaN(num) && num== parseInt(num);
//3
num%1 === 0; 
typeof num == 'number' && num%1===0
//4
Math.round(num)===num;
//5
num == ~~num; //'1' will give you true
num == num + 0 && num == ~~num;
              </code></pre>        
            </div>
            <div>
              <h2>string to integer</h2>
              <p><strong>Question:</strong> What is the best way to convert string to number in JavaScript?</p>
              <p><strong>Answer:</strong> There are nine different ways to convert a string to number</p>
              <ol>
                <li>Use the Number constructor and pass the number</li>
                <li>use parseInt</li>
                <li>use unary plus (+)</li>
                <li>use parseInt with a base</li>
                <li>use bitwise right shift</li>
                <li>multiply by one will cause force cast</li>
                <li>bitwise NOT</li>
                <li>bitwise OR</li>
                <li>just deduct 0 from the string (number in string type)</li>
              </ol>
              <pre><code>
Number("13268"); //constructor

parseInt("13268"); //parseInt

+"13268"; //unary +

parseInt("13268", 10); //parseInt with base

"13268" >> 0; //bitwise >> (right shift)
"13268" * 1; //multiply by 1
~~"13268"; // bitwise NOT
"13268" | 0 //bitwise OR
"13268" - 0; // minus 0
              </code></pre>
              <p>ref: <a href="http://jsperf.com/number-vs-parseint-vs-plus/26">js perf</a></p>
            </div>
            <div>
              <h2>for in looping</h2>
              <p><strong>Question: </strong> If you loop through [10, 20, 30] by using for-in loop and want to get the sum of all the elements, how will you do it?</p>
              <pre><code>
var numbers = [10, 20, 30];
var sum = 0;
for(var num in numbers){
  sum += num; 
}

console.log(sum);
        </code></pre>
              <p><strong>Answer:</strong> 0012</p>
              <p><strong>Basic:</strong> for in always loop over keys. JavaScript array is inherited from object and all the elements in the array is like key value pair in the object<code>{0:10, 1:20, 2:30}</code> where key is 0, 1, 2 etc. When you are accessing values by passing index, you are actully accessing by key.</p>
              <p>thats why when an index doesnt exist, Javascript returns undefined not array out of index. As the index(key) doesnt exists in the object.</p>
              <p><strong>Explanation:</strong> as for in looping over keys and keys are always string type, its concatenating <code>0+'0'</code> which becomes <code>'00'</code> and then u add '1' and '2'. Which eventually results '0012'. Quite unexpected, isnt it?</p>
              <p><strong>solution:</strong> the solution of this problem is to use <code>num</code> as index to access the value or use a simple for loop</p>
              <pre><code>
var numbers = [10, 20, 30];
var sum = 0;
for(var num in numbers){
  sum += numbers[num]; 
}

console.log(sum);//60
              </code></pre>
            </div>
            <div id="safeCoding">
        <h2>Save hasOwnProperty</h2>
        <p><strong>Question:</strong> If you mistakenly override some of the build in method like <code>hasOwnProperty</code> how you will make sure its works</p>
        <p><strong>Answer:</strong></p>
        <pre><code>
var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // always returns false

// Use another Object's hasOwnProperty and call it with 'this' set to foo
({}).hasOwnProperty.call(foo, 'bar'); // true

// It's also possible to use hasOwnProperty from the Object
// prototype for this purpose
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
        </code></pre>
        <p>ref: Javascript garden</p>
      </div>
            <div id="ajaxCall">
              <h2>Ajax in Native call</h2>
              <p><strong>Question:</strong> JavaScript is single threaded how it makes ajax call while it is doing something else?</p>
              <p><strong>Answer: </strong> By using event queue. When you make an ajax call, an event will be added to the event queue. Besides, you will have some code to handle/ do something when ajax call is done. When server is done executing the request and it returns some data/status. when you receive data/status and if you have new event to be performed on data received, you have event handlers. these event handers will also be added in the event queue. </p>
              <p>could talk about promise pattern. </p>        
              <p>ref: <a href="http://stackoverflow.com/a/7575649/1535443">Handling of Ajax in the background</a></p>
            </div>
      <div id="flattenArray">
        <h2>flatten an array</h2>
        <p><strong>Question:</strong> How would you flatten an array in JavaScript?</p>
        <p><strong>Answer:</strong> flatten of an array means, if one or more array elements are also array, you will took out those elements and you will have a plain array. For example, if you if array is like [1, 2, [3, 4], [5, [6, 7]], 8] your flatten array would be [1, 2, 3, 4,5, 6, 7, 8]</p>
        <pre><code>
function flatten(array) {
      var i = - 1,
          j = 0, 
          length = array ? array.length : 0,
          elm,
          elmLength = 0,
          output = [];

      while (++i &lt; length) {
        elm = array[i];
        //if elm is an array faltten it and then insert each item into output
        if (elm && (Array.isArray(elm))) {
          
          elm = flatten(elm);

          for(j =0, elmLength = elm.length; j &lt;elmLength; j++)
             output.push(elm[j]);

        } 
        else {
          output.push(elm);
        }
      }
      return output;
    }

        </code></pre>
        <p>ref: <a href="https://gist.github.com/penguinboy/762197">look at this one</a></p>
      </div>
      <div id="partOfString">
        <h2>Frist 100 characters</h2>
        <p><strong>Question:</strong>From a crazy long string get the first 100 character. by the way, don't slice the last word. I mean keep it full. </p>
        <p><strong>Answer:</strong></p>
        <pre><code>
function first100Char(str){
   var len = str.length;
   if (len &lt; 100) return str;
   var i =100; 
   while (i&lt;len && str[i]!=' '){
     i++;
  }
  return str.substr(0, i);
}          
        </code></pre>
      </div>
      <div id="duplicateArray">
        <h2>duplicate Array</h2>
        <p><strong>Question:</strong> how do u duplicate an array. for example if you have array like [1, 2, 3] the duplicate array would be [1, 2, 3, 1, 2, 3]</p>
        <p><strong>Answer:</strong> very simple. </p>
        <pre><code>
function arrayDuplicator(arr){

  for (var i =0, len = arr.length, j = len; i&lt;len; i++){
      arr[j++] = arr[i];
  }
  
  return arr;
}
        </code></pre>
      </div>
      <div id="replaceSubstring">
        <p><strong>Question:</strong> replace every "bb" in a given string like "aaabbc" by "ee" and output should be "aaaeec"</p>
        <p><strong>Answer: </strong></p>
        <pre><code>
function replaceStr(str, match, replace){
 var toreplace = '/'+match+'/g';
 return str.replace(toreplace, replace) 
  
}
        </code></pre>
      </div>
      <div id="responsiveWebsite">
        <h2>responsive</h2>
        <p><strong>Question:</strong> What are the things you would consider to make a website responsive?</p>
        <p><strong>Answer:</strong> It depends on what I am trying to do but you can talk about a some of them-</p>
        <ul>
          <li><strong>layout</strong>, keep it simple. dont use div, absolute position or float unnecessarily. kill inline styles. use HTML5 doctype, reset stylesheet, semantic core layout.</li>
          <li><strong>media queries</strong>, to load stylesheet based on the size of the media or apply rules based on the orientation of the media</li>
          <li><strong>breakpoints</strong>, choose the right breakpoints to switch style. common breakpoints are &lt;480px, &lt;768px, &gt;768px. There are three nice to have breakpoints &lt;320px, &gt;769px and &lt;1024px, &gt;1024px.</li>
          <li><strong>flexible</strong>, don't use fixed width rather use relative to viewport size. For example, 50% of the viewport will always be half of the screen and doesn't depend on the device. This is also important for font-size and it is recommended to use something relative like em</li>
          <li><strong>pictures</strong>, pictures are a big of a deal for responsive websites. Right now you can change src attribute of an image based on the media query alone. Hence you can use background-image or use different picture versions and show/hide their parent in media queries.</li>
          <li><strong>max-*, min-*</strong>, you can use <code>max-width:768px;</code> <code>min-height:350px;</code> to apply style</li>
          <li><strong>navigation</strong>, re-layout navigation/ menu in lower resolution is very important</li>
          <li><strong>tools</strong>, don't reinvent the wheel. use bootstrap or similar libraries for responsive website</li>
        </ul>
        <p>ref: <a href="http://www.1stwebdesigner.com/css/responsive-website-tutorial/">responsive tutorial</a>, <a href="http://readwrite.com/2013/04/16/10-developer-tips-to-build-a-responsive-website-infographic#awesm=~ou5vLQZqqXIubV">Read best practices</a></p>
      </div>
      <div>
        <h2>broken links</h2>
        <pre><code>
//same origin
function UrlExists(url) {
  var http = new XMLHttpRequest();
  http.open('HEAD', url, false);
  http.send();
  return http.status != 404;
}
        </code></pre>
      </div>
      <div>
        <h2>Tic tac toe logic</h2>
        <pre><code>
//make an efficient algorithm for this
        </code></pre>
      </div>
      <div id="browserCompatible">
        <h2>browser compatibility</h2>
        <p><strong>Question:</strong> How will you make a website compatible to multiple browsers?</p>
        <p><strong>Answer:</strong></p>
        <ul>
          <li><strong>html</strong>, write valid html. use doctype.</li>
          <li><strong>css</strong>, understand box model, float, clear and other css properties. Remember older browser doesnt support css3</li>
          <li><strong>browser prefix</strong>, dont use browser prefix. Or you could use it if you implement <a href="http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/">graceful degradation</a></li>
          <li><strong>tools</strong>, <a href="http://sixrevisions.com/css/should-you-reset-your-css/">reset</a>, bootstrap, <a href="http://modernizr.com/">modernizr</a>, jquery, etc.</li>          
          <li><strong>never same</strong>, something will never be same across browsers like drop down menu</li>
          <li><strong>internet explorer</strong>, understand problems in IE6, IE7. IE6 becomes problematic when float is overused like double margin on floated elements, negative margin. You can have a stylesheet for IE specific version.</li>
          <li><strong>test</strong>, ther is no alternative to test your website as many browser versions as possible</li>
          <p>ref: <a href="http://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/">cross-browser css coding</a>, <a href="http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/">css3 solutions for IE</a></p>
        </ul>
      </div>
      <div id="compatibilityTest">
        <h2>test compatibility</h2>
        <p><strong>Question:</strong> How would you test browser compatibility of your site?</p>
        <p><strong>Answer:</strong> It becomes tiresome to test all the different browser and versions available. I can check current market share of the browsers and create short list to test. and then i can use lools like <a href="http://browsershots.org/">browsershots</a>, <a href="http://www.browserstack.com/screenshots">browserStack</a>, etc.</p>
        <p>ref: <a href="http://www.hongkiat.com/blog/complete-guide-to-cross-browser-compatibility-check/">compatibility checking tools</a>, <a href="http://www.1stwebdesigner.com/design/tools-browser-compatibility-check/">10 tools</a></p>
      </div>
      <div>
        <h2>Yahoo interview with </h2>
        <p><strong>Question:</strong> Create a function to determine a lotter winner. An object will be passed with person name and number of ticket they purchased</p>
        <p><strong>Answer:</strong> We need to use Math.random</p>
        <pre><code>
// ticketMap = {"John": 15, "Bob": 5}
function LotteryPicker(ticketMap) {
    this.ticketMap = ticketMap;
    this.generateNumber = Math.random;
}

LotteryPicker.prototype.pick = function() {
    var participants = Object.keys(this.ticketMap), 
        len = participants.length,
        total = 0;
   
    for(var i = 0; i&lt;len; i++){
      total += this.ticketMap[participants[i]];
    }
    
    var raminingNumber = this.generateNumber()*total;
 
    
    for(var j =0; j&lt;len; j++){
        if (raminingNumber &lt; this.ticketMap[participants[j]]){
            return participants[j];
        }
        raminingNumber -= this.ticketMap[participants[j]];
    }
};


var picker = new LotteryPicker({"John": 15, "Bob": 5});
picker.generateNumber = function() { return 0.5 };
console.log(picker.pick());
        </code></pre>
      </div>
      <div id="createLayout">
        <h2>Create layout</h2>
        <p><strong>Question:</strong> How would you create layout like below.</p>
        <p><strong></strong></p>
        <img src="images/layout.jpg" alt=" ">
        <p><strong>Interviewer:</strong> Why they put list item in navigation.</p>
        <p><strong>Answer:</strong> one reason could be list items are block elements and those go into a different line and you don't have to explicitly style those. another reason could be semantic so that people could use the functionalities of your site even though there is no style or js. this is called graceful degradation. Like google.com even you disable all style and js still you can search and navigate to the links. This is mostly for older browsers. </p>
        <p>ref: <a href="http://css-tricks.com/wrapup-of-navigation-in-lists/">Lists in Navigation</a>, <a href="http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/">Navigation without list</a>, <a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element">W3.org nav element</a></p>
      </div>
      <div>
        <h3>questions: shutterlock</h3>
        <ul>
          <li><strong>css</strong>, u have two columns. you want a dividing line. first column has a login box and second one has text. sometimes you have very long text and sometimes you have small text. hence either the login box or the text column could be longer. you need to make sure the dividing line goes all the way to bottom. How could you do with plain css</li>
          <li><strong>css</strong>, again you have two box. you want to have them 50% of width with 20px padding. How could you make sure width of the column remains half of the page when user resize the window. without using js. use plain css</li>
          <li><strong>css</strong>, what are the different position in css</li>
          <li><strong>javascript</strong>, what are the problems you could have if you set prototype of an object to another object. What are the other ways to create inheritance in JS</li>
          <li><strong>javascript</strong>, how would you apply animation by using plain javascript.</li>          
          <li><strong>javascript</strong>, how would you cancel a timer in JS</li>
          <li><strong>css</strong>, what are the different position in css. if you have a logo in header. how could you position logo 20 px from left and 30px from top</li>
          <li><strong>javascript</strong>, write a javascript function that will take a number and everytime you call it it will generate a times table. For example, you have a function myFunc. you set var mult = myFunc(3). now when u call mult() u get 3 and then mult, u get 6 and then mult u get 9</li>
          <li><strong>javascript</strong>, how you could use polymorphism in javascript</li>
          <li><strong>javascript</strong>, why you might not be interested to use closure in js</li>
          <li><strong>css-tricks</strong>, <a href="http://css-tricks.com/thought-process-front-end-problem/">add thought process</a></li>
          <li><strong>web design weekly</strong> <a href="http://uxmag.com/articles/when-design-best-practices-become-performance-worst-practices">Best practice becomes bad</a></li>
          <li>what is REST. whart are the verb. which one is called when you load a page</li>
        </ul>
      </div>
      <div>
        <h3>questions: from career cup</h3>
        <li>Write a function to find the nearest link on a webpage given the mouse x,y coordinates. If your algorithm just iterates through all the links, give an idea of how to make it faster. <a href="http://www.careercup.com/question?id=3538036">Career cup</a></li>
      </div>
      <div>
        <h3>algorithm related Question (will some future blog)</h3>
        <ul>
          <li>From two sorted array how would you find common number?</li>
          <li>From web page, how would u find similar words like rat, cat, bat and broom, groom etc.</li>
          <li>pagination problem by Tony. [1] 2 3 4 5, ... 2 3 [4] 5 6 ..., 6 [7] 8 9 10 </li>
          <li>notify any change</li>
          <li>Write a function in Javascript that takes Roman numerals (in String form) and convert it to decimal form. Assume the string is well-formed</li>          
          <li> asked at google... How would you extend Array in JavaScript so that it could add all the values stored in an array</li>
          <li>Google Maps allows you to zoom in and out of satellite maps, with terabytes of data accessible via a very fast interface. How would you go about implementing this functionality</li>          
          <li>Find the max difference of elements from two sorted array with non duplicate integer elements</li>
          <li>find a rotation point of a sorted array.</li>          
          <li> gilt: describe integer into text input: 3216 output: three thousand 2 hundred sixteen</li>
          <li><a href="http://blogs.msdn.com/b/oldnewthing/archive/2014/05/26/10528351.aspx">best way to get the samallest number in a array</a></li>
          <li><a href="http://stackoverflow.com/questions/1684917/what-questions-should-a-javascript-programmer-be-able-to-answer">very good list of questions</a></li>
        </ul>
        <h3>Medium level question for js3</h3>
        <ul>
          <li>Define a function that returns n lines of Pascal’s Triangle. (this question was the entire interview)</li>
          <li>Define a function that takes an array of strings, and returns the most commonly occurring string that array (this question came with an execution time limit)</li>
          <li>Use recursion to log a fibonacci sequence of n length.</li>
          <li>Explain the use cases for, and differences between — bind, apply and call.</li>
          <li>What is the event loop?</li>
          <li>Which new JavaScript / browser features are you most excited about and why?</li>
          <li>What are the differences between functional and imperative programming styles, and explain your preference, if any.</li>
          <li>what is same origin policy with regards to JS</li>                    
          <li>~~3.14 ?? what and why. <a href="http://stackoverflow.com/questions/5971645/what-is-the-double-tilde-operator-in-javascript">answer here</a> or <a href="http://www.joezimjs.com/javascript/great-mystery-of-the-tilde/">great mystery of tilde</a></li>
          <li>difference between cookies, sessionStorage and local storage</li>
          <li>How would you go about implementing a spreadsheet in a browser. Google it. somebody did it couple of days ago</li>
          <li>“Write your own script that does a JSONP request, without using jQuery. Should work with multiple calls to the function and support async.”</li>
          <li>How would you create an accordion-style nav menu using css and javascript without using jQuery</li>
          <li>Design a webpage which can auto post new posts when you reach the bottom of the page by using javascript. So you may use AJAX and some javascript event listeners. But, they do not require you remember the functions names, it will be great as long as you can describe your thought and design</li>
          <li><a href="http://stackoverflow.com/questions/2070359/finding-three-elements-in-an-array-whose-sum-is-closest-to-an-given-number">Finding three elements in an array whose sum is closest to an given number</a></li>
          <li>what is alternative of call back function</li>
          <li>Implement curring arguments</li>
          <li>Second symbol starting index <a href="http://programmingpraxis.com/2013/03/12/an-array-of-two-symbols/#comments">Array of two symbol</a></li>
          <li><a href="http://programmingpraxis.com/2012/11/09/taxicab-numbers/">Determine if a positive number can be expressed as a sum of two cubes?</a></li>
          <li><a href="http://programmingpraxis.com/2012/08/14/4sum/">4SUM</a></li>
          <li>from an array of integers find 10 numbers closest to a given number <a href="http://programmingpraxis.com/2012/11/27/amazon-interview-question/">amazon</a></li>
          <li> Recreate in html and css a linkedin page.</li>
          <li>Can you give me a code snippet that uses the with statement? <a href="https://gist.github.com/addyosmani/d1f3ca715ac902788c2d">text editor Adday osmani</a></li>
          <li>detect useragent in css <a href="http://www.careercup.com/question?id=14410665">career cup</a></li>
          <li>Major difference between Forward and sendRedirect apart from browser calls sendRedirect and container process forward request? <a href="http://www.careercup.com/question?id=13961670">career cup</a></li>
          <li>Expalin JS module pattern. AMD, common JS module. what are the differences</li>
          <li>HTML5 API. </li>
          <li>constructors</li>
          <li>what is monkey patching (used by prototype library). why is it bad</li>
          <li>How would u write a emitter. How could u make it distributed</li>
        </ul>
        <h3>areas to generate question</h3>
        <ul>
          <li>Write the HTML/CSS for a mockup</li>
          <li>what is html5 why you are using it</li>
          <li>garbage collection</li>
          <li>AJAX call in native JavaScript</li>
          <li>DOM access API</li>
          <li>DOM node type</li>
          <li>page request status 200, 400, 500, etc</li>
          <li>request animation frame</li>
          <li>document fragment</li>
          <li>frame rates</li>
          <li>how to check a form is empty</li>
        </ul>
      </div>
<div>
  <!-- <h3 class="purpleBold">Express anger!</h3>
  <p class="gray">Feel free to express your anger (sorry u have to use facebook). also find out mistakes ( technical, wrong answer, spelling, grammar, sentence, whatever), let ur dude learn and grow.</p>
  <div class="fb-comments" data-href="http://www.thatjsdude.com/interview/js1.html" data-numposts="5" data-colorscheme="light"></div>
-->
</div> 
      <hr>

      <footer>
        <p>&copy;thatJSDude <script type="text/javascript">document.write(new Date().getFullYear());</script></p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-2.0.3.min.js"></script>    
    <script src="js/bootstrap.min.js"></script>
    <script src="js/highlight.pack.js"></script>    
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="js/toggleExample.js"></script>
    <script type="text/javascript">
      // //social plugins
      // //g+
      // (function() {
      //   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      //   po.src = 'https://apis.google.com/js/platform.js';
      //   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      // })();
      // //fb
      // (function(d, s, id) {
      //   var js, fjs = d.getElementsByTagName(s)[0];
      //   if (d.getElementById(id)) return;
      //   js = d.createElement(s); js.id = id;
      //   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      //   fjs.parentNode.insertBefore(js, fjs);
      // }(document, 'script', 'facebook-jssdk'));
    </script>
  </body>
</html>