<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Random Ramblings!</title>
	<atom:link href="http://vikasrao.wordpress.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://vikasrao.wordpress.com</link>
	<description></description>
	<lastBuildDate>Wed, 08 May 2013 03:31:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='vikasrao.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://s2.wp.com/i/buttonw-com.png</url>
		<title>Random Ramblings!</title>
		<link>http://vikasrao.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://vikasrao.wordpress.com/osd.xml" title="Random Ramblings!" />
	<atom:link rel='hub' href='http://vikasrao.wordpress.com/?pushpress=hub'/>
		<item>
		<title>Standard CSS3 Selectors</title>
		<link>http://vikasrao.wordpress.com/2012/04/21/standard-css3-selectors/</link>
		<comments>http://vikasrao.wordpress.com/2012/04/21/standard-css3-selectors/#comments</comments>
		<pubDate>Sat, 21 Apr 2012 23:27:12 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[CSS3]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[attribute selector]]></category>
		<category><![CDATA[CSS nth child]]></category>
		<category><![CDATA[CSS selectors]]></category>
		<category><![CDATA[dojo.query]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/?p=241</guid>
		<description><![CDATA[Here&#8217;s a table with all the standard CSS3 selectors. This is a really great reference and this can be used to either query nodes using dojo.query or to use in a browser which supports these. Most modern browsers do, IE versions will have quirks as usual so don&#8217;t rely on this in Internet Explorer 8 and [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=241&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Here&#8217;s a table with all the standard CSS3 selectors. This is a really great reference and this can be used to either query nodes using <a href="http://dojotoolkit.org/reference-guide/1.7/dojo/query.html" target="_blank">dojo.query</a> or to use in a browser which supports these. Most modern browsers do, IE versions will have quirks as usual so don&#8217;t rely on this in Internet Explorer 8 and below. Also, this table is from the above linked dojo.query page, I just find it very useful to have it handy during programming.</p>
<table border="1">
<tbody valign="top">
<tr>
<td>*</td>
<td>any element</td>
</tr>
<tr>
<td>E</td>
<td>an element of type E</td>
</tr>
<tr>
<td>E[foo]</td>
<td>an E element with a “foo” attribute</td>
</tr>
<tr>
<td>E[foo=”bar”]</td>
<td>an E element whose “foo” attribute value is exactly equal to “bar”</td>
</tr>
<tr>
<td>E[foo~=”bar”]</td>
<td>an E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “bar”</td>
</tr>
<tr>
<td>E[foo^=”bar”]</td>
<td>an E element whose “foo” attribute value begins exactly with the string “bar”</td>
</tr>
<tr>
<td>E[foo$=”bar”]</td>
<td>an E element whose “foo” attribute value ends exactly with the string “bar”</td>
</tr>
<tr>
<td>E[foo*=”bar”]</td>
<td>an E element whose “foo” attribute value contains the substring “bar”</td>
</tr>
<tr>
<td>E[hreflang|=”en”]</td>
<td>an E element whose “hreflang” attribute has a hyphen-separated list of values beginning (from the left) with “en”</td>
</tr>
<tr>
<td>E:root</td>
<td>an E element, root of the document</td>
</tr>
<tr>
<td>E:nth-child(n)</td>
<td>an E element, the n-th child of its parent</td>
</tr>
<tr>
<td>E:nth-last-child(n)</td>
<td>an E element, the n-th child of its parent, counting from the last one</td>
</tr>
<tr>
<td>E:nth-of-type(n)</td>
<td>an E element, the n-th sibling of its type</td>
</tr>
<tr>
<td>E:nth-last-of-type(n)</td>
<td>an E element, the n-th sibling of its type, counting from the last one</td>
</tr>
<tr>
<td>E:first-child</td>
<td>an E element, first child of its parent</td>
</tr>
<tr>
<td>E:last-child</td>
<td>an E element, last child of its parent</td>
</tr>
<tr>
<td>E:first-of-type</td>
<td>an E element, first sibling of its type</td>
</tr>
<tr>
<td>E:last-of-type</td>
<td>an E element, last sibling of its type</td>
</tr>
<tr>
<td>E:only-child</td>
<td>an E element, only child of its parent</td>
</tr>
<tr>
<td>E:only-of-type</td>
<td>an E element, only sibling of its type</td>
</tr>
<tr>
<td>E:empty</td>
<td>an E element that has no children (including text nodes)</td>
</tr>
<tr>
<td>E:link</td>
<td></td>
</tr>
<tr>
<td>E:visited</td>
<td>an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)</td>
</tr>
<tr>
<td>E:active</td>
<td></td>
</tr>
<tr>
<td>E:hover</td>
<td></td>
</tr>
<tr>
<td>E:focus</td>
<td>an E element during certain user actions</td>
</tr>
<tr>
<td>E:target</td>
<td>an E element being the target of the referring URI</td>
</tr>
<tr>
<td>E:lang(fr)</td>
<td>an element of type E in language “fr” (the document language specifies how language is determined)</td>
</tr>
<tr>
<td>E:enabled</td>
<td></td>
</tr>
<tr>
<td>E:disabled</td>
<td>a user interface element E which is enabled or disabled</td>
</tr>
<tr>
<td>E:checked</td>
<td>a user interface element E which is checked (for instance a radio-button or checkbox)</td>
</tr>
<tr>
<td>E::first-line</td>
<td>the first formatted line of an E element</td>
</tr>
<tr>
<td>E::first-letter</td>
<td>the first formatted letter of an E element</td>
</tr>
<tr>
<td>E::selection</td>
<td>the portion of an E element that is currently selected/highlighted by the user</td>
</tr>
<tr>
<td>E::before</td>
<td>generated content before an E element</td>
</tr>
<tr>
<td>E::after</td>
<td>generated content after an E element</td>
</tr>
<tr>
<td>E.warning</td>
<td>an E element whose class is “warning” (the document language specifies how class is determined).</td>
</tr>
<tr>
<td>E#myid</td>
<td>an E element with ID equal to “myid”.</td>
</tr>
<tr>
<td>E:not(s)</td>
<td>an E element that does not match simple selector s</td>
</tr>
<tr>
<td>E F</td>
<td>an F element descendant of an E element</td>
</tr>
<tr>
<td>E &gt; F</td>
<td>an F element child of an E element</td>
</tr>
<tr>
<td>E + F</td>
<td>an F element immediately preceded by an E element</td>
</tr>
<tr>
<td>E ~ F</td>
<td>an F element preceded by an E element</td>
</tr>
</tbody>
</table>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/css3/'>CSS3</a>, <a href='http://vikasrao.wordpress.com/category/html5/'>HTML5</a>, <a href='http://vikasrao.wordpress.com/category/javascript/'>JavaScript</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/attribute-selector/'>attribute selector</a>, <a href='http://vikasrao.wordpress.com/tag/css-nth-child/'>CSS nth child</a>, <a href='http://vikasrao.wordpress.com/tag/css-selectors/'>CSS selectors</a>, <a href='http://vikasrao.wordpress.com/tag/css3/'>CSS3</a>, <a href='http://vikasrao.wordpress.com/tag/dojo-query/'>dojo.query</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/241/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/241/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=241&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2012/04/21/standard-css3-selectors/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
		<item>
		<title>JavaScript &#8211; Common Array operations</title>
		<link>http://vikasrao.wordpress.com/2012/04/01/javascript-common-array-operations/</link>
		<comments>http://vikasrao.wordpress.com/2012/04/01/javascript-common-array-operations/#comments</comments>
		<pubDate>Sun, 01 Apr 2012 23:41:29 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[compare 2 arrays javascript]]></category>
		<category><![CDATA[Javascript array comparison]]></category>
		<category><![CDATA[search 2 dimensional array]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/?p=224</guid>
		<description><![CDATA[Below are a few common operations one might come across. I&#8217;ve used Array.map() and Array.forEach() at times which requires JavaScript 1.6 or higher, but I&#8217;m not sure if older versions of Internet Explorer would support them. You might have to use a regular for loop there or use a library like Dojo, etc. To check [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=224&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Below are a few common operations one might come across. I&#8217;ve used Array.map() and Array.forEach() at times which requires JavaScript 1.6 or higher, but I&#8217;m not sure if older versions of Internet Explorer would support them. You might have to use a regular for loop there or use a library like Dojo, etc.</p>
<p>To check if an element exists in a 2-D array &#8211; Needle in a Haystack</p>
<pre class="brush: jscript; title: ; notranslate">

function findNeedle(num) {
  var arr = [[2, 3, 5], [6, 8, 9], [14, 16, 19], [44, 66, 67]];
  for (var i = 0; i &lt; arr.length; i++) {
    if (arr[i][0] &gt; num) {
      return (arr[i - 1] ? arr[i - 1].indexOf(num) &gt; -1 : false);
    }
  }
}

console.log(findNeedle(8)); // this one is faster because it just looks at the first element of each array.

function findNeedle2(num) {
  var arr = [[2, 3, 5], [6, 8, 9], [14, 16, 19], [44, 66, 67]];
  var flattenedArr = arr.map(function(item) {
    return item.join();
  });

  return flattenedArr.join().indexOf(num) &gt; -1;
}

console.log(findNeedle2(3));  //this one constructs a big string out of the whole array and then does an indexOf on it.

</pre>
<p>To check if 2 arrays are equal:</p>
<pre class="brush: jscript; title: ; notranslate">
function checkIfEqual(arr1, arr2) {
  if (arr1.length != arr2.length) {
    return false;
  }
  //sort them first, then join them and just compare the strings
  return arr1.sort().join() == arr2.sort().join();
}
var arr1 = [2, 3, 5, 6];
var arr2 = [5, 6, 2, 3];

checkIfEqual(arr1, arr2);

</pre>
<p>To convert an arguments object in a function to an Array, do this:</p>
<pre class="brush: jscript; title: ; notranslate">
function add() {
 return [].slice.call(arguments); // note that Array.prototype.slice.call works as well, but [].slice is concise and cool
}

console.log(add(2,3,5));
</pre>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/javascript/'>JavaScript</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/compare-2-arrays-javascript/'>compare 2 arrays javascript</a>, <a href='http://vikasrao.wordpress.com/tag/javascript-array-comparison/'>Javascript array comparison</a>, <a href='http://vikasrao.wordpress.com/tag/search-2-dimensional-array/'>search 2 dimensional array</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/224/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/224/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=224&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2012/04/01/javascript-common-array-operations/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
		<item>
		<title>JavaScript &#8211; common String operations</title>
		<link>http://vikasrao.wordpress.com/2012/04/01/comma-separate/</link>
		<comments>http://vikasrao.wordpress.com/2012/04/01/comma-separate/#comments</comments>
		<pubDate>Sun, 01 Apr 2012 18:57:25 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[comma separated numbers]]></category>
		<category><![CDATA[palindrome]]></category>
		<category><![CDATA[really long number in javascript]]></category>
		<category><![CDATA[String literal]]></category>
		<category><![CDATA[String primitive]]></category>
		<category><![CDATA[String typeof]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/2012/04/01/comma-separate/</guid>
		<description><![CDATA[Comma separated numbers: To capitalize a word: To check if a String is a palindrome &#8211; &#8220;word that may be read the same way in either direction&#8221; Note that String &#8220;literals&#8221; are not always equal to String objects. If a number is too long so that it cant be represented as a number but instead needs a String [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=212&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Comma separated numbers:</p>
<pre class="brush: jscript; title: ; notranslate">
//formats 10000045.555 as &quot;10,000,045.555&quot;, etc
var num = 10000045.555;
//convert to string and split the string into two if there's a decimal point
var strArr = (num + '').split('.');
var n = strArr[0];

//if there's a decimal, store it
var rhs = strArr.length &gt; 1 ? &quot;.&quot; + strArr[1] : '';

//with the whole number, split the last 3 digits, put it at the 0th index of the array
var arr = [];
while(n.length &gt; 3) {
 arr.unshift(n.substring(n.length - 3, n.length));
 n = n.substr(0, n.length -3);
}
//anything left in the string, add it to the start of the array
(n.length &gt; 0 ) ? arr.unshift(n) :'';

console.log(arr.join() + rhs);

</pre>
<p>To capitalize a word:</p>
<pre class="brush: jscript; title: ; notranslate">

//note how you can access the first character of a string, or its 0th index like you would for an array. You can also do str.charAt(0).

var str = &quot;brian&quot;;
str = str[0].toUpperCase() + str.substring(1,str.length);

</pre>
<p>To check if a String is a palindrome &#8211; &#8220;word that may be read the same way in either direction&#8221;</p>
<pre class="brush: jscript; title: ; notranslate">
//when you split a string, it coverts to an array, which you can reverse and re-join it which gives you a String.
var str = &quot;abba&quot;;
str.split('').reverse().join('') == str
</pre>
<p>Note that String &#8220;literals&#8221; are not always equal to String objects.</p>
<pre class="brush: jscript; title: ; notranslate">
var a = 'a';
var b = new String('a');
a == b; // true
a === b; // false, because === checks for type AND value

typeof a; //&quot;string&quot;
typeof b; // &quot;object&quot;

//valueOf() fixes this

a.valueOf() === b.valueOf() //true
</pre>
<p>If a number is too long so that it cant be represented as a number but instead needs a String representation &#8211; you need a special way of performing operations on it. For example: to subtract 1 from a really long number(represented as a String)</p>
<pre class="brush: jscript; title: ; notranslate">
function subtractOne(num) {
 if(num[num.length-1]*1 === 0) {
 return subtractOne(num.substr(0, num.length-1)) + '9';
 }
 else {
 return num.substr(0, num.length-1) + ('' + num.charAt(num.length-1)*1 -1);
 }
}

subtractOne('1890273492865564687318970981034899286348912374'); //prints &quot;1890273492865564687318970981034899286348912373&quot;
</pre>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/javascript/'>JavaScript</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/comma-separated-numbers/'>comma separated numbers</a>, <a href='http://vikasrao.wordpress.com/tag/palindrome/'>palindrome</a>, <a href='http://vikasrao.wordpress.com/tag/really-long-number-in-javascript/'>really long number in javascript</a>, <a href='http://vikasrao.wordpress.com/tag/string-literal/'>String literal</a>, <a href='http://vikasrao.wordpress.com/tag/string-primitive/'>String primitive</a>, <a href='http://vikasrao.wordpress.com/tag/string-typeof/'>String typeof</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/212/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/212/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=212&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2012/04/01/comma-separate/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
		<item>
		<title>JavaScript quiz from Perfection Kills</title>
		<link>http://vikasrao.wordpress.com/2011/08/25/javascript-quiz-from-perfection-kills/</link>
		<comments>http://vikasrao.wordpress.com/2011/08/25/javascript-quiz-from-perfection-kills/#comments</comments>
		<pubDate>Thu, 25 Aug 2011 14:54:26 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[interview questions]]></category>
		<category><![CDATA[JavaScript quiz]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/?p=203</guid>
		<description><![CDATA[I came across this JavaScript quiz on a very cool blog and since I really enjoy solving such problems, I took the quiz. The result was humbling, and I was eager to find out why I got some of the questions wrong. I figured out why each problem behaves the way it does so I [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=203&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>I came across <a href="http://perfectionkills.com/javascript-quiz/" target="_blank">this JavaScript quiz</a> on a very cool blog and since I really enjoy solving such problems, I took the quiz. The result was humbling, and I was eager to find out why I got some of the questions wrong. I figured out why each problem behaves the way it does so I put them together for others below.</p>
<pre class="brush: jscript; title: ; notranslate">
1. (function(){
      return typeof arguments;
    })();

</pre>
<p>(a) “object” (b) “array” (c) “arguments” (d) “undefined”</p>
<p>The answer is (a). The arguments array is of type &#8220;object&#8221;. My first instinct was to think its an array, until I realized there was a typeof to be considered.</p>
<pre class="brush: jscript; title: ; notranslate">
2. var f = function g(){ return 23; };
    typeof g();
</pre>
<p>(a) “number” (b) “undefined” (c) “function” (d) Error</p>
<p>This results in an error because the function g has been assigned to the var f. So the answer is (d)</p>
<pre class="brush: jscript; title: ; notranslate">
3. (function(x){
      delete x;
      return x;
    })(1);
  </pre>
<p> (a) 1 (b) null (c) undefined (d) Error</p>
<p> I made the mistake of assuming I could delete x, but apparently you cannot delete arguments inside a function. So the answer is 1 which is option (a).</p>
<pre class="brush: jscript; title: ; notranslate">
4. var y = 1, x = y = typeof x;
    x;
  </pre>
<p>(a) 1 (b) “number” (c) undefined (d) “undefined”</p>
<p>The answer here is &#8220;number&#8221;, because after assigning a value of 1 to y, x is also assigned that value. Doing a typeof on 1 obviously yields &#8220;number&#8221;.</p>
<pre class="brush: jscript; title: ; notranslate">
5. (function f(f){
      return typeof f();
    })(function(){ return 1; });
  </pre>
<p> (a) “number” (b) “undefined” (c) “function” (d) Error</p>
<p> Notice that we pass a function which returns 1 to the function f, which inturn executes the passed function and evaluates the type of the returned value. So typeof 1 results in &#8220;number&#8221; which is option (a)</p>
<pre class="brush: jscript; title: ; notranslate">
 6. var foo = {
      bar: function() { return this.baz; },
      baz: 1
    };
    (function(){
      return typeof arguments[0]();
    })(foo.bar);
 </pre>
<p> (a) “undefined” (b) “object” (c) “number” (d) “function”</p>
<p> This returns &#8220;undefined&#8221; because when the foo.bar function is executed, &#8220;this&#8221; refers to the window scope which ofcourse knows nothing about baz. How do you fix this?<br />
 Remember how to use JavaScript&#8217;s call() and apply()? If not, check <a href="http://vikasrao.wordpress.com/2011/06/09/javascripts-call-and-apply-methods/" target="_blank">here</a><br />
 In this case, we need to specify the &#8220;this&#8221; to be the object &#8220;foo&#8221;, like this:</p>
<pre class="brush: jscript; title: ; notranslate">
 var foo = {     
      bar: function() { return this.baz; },
      baz: 1
    };
    (function(){
      return typeof arguments[0].call(foo);
    })(foo.bar);
    </pre>
<pre class="brush: jscript; title: ; notranslate">
7.  var foo = {
      bar: function(){ return this.baz; },
      baz: 1
    }
    typeof (f = foo.bar)();
  </pre>
<p> (a) “undefined” (b) “object” (c) “number&#8221; (d) “function”</p>
<p> The above returns &#8220;undefined&#8221; because assigning foo.bar to a global variable &#8220;f&#8221; means the value of &#8220;this&#8221; inside foo.bar is &#8220;window&#8221;, and again, since window would not have a baz property, the value is undefined. </p>
<pre class="brush: jscript; title: ; notranslate">
 8. var f = (function f(){ return &quot;1&quot;; }, function g(){ return 2; })();
    typeof f;
  </pre>
<p> (a) “string” (b) “number” (c) “function” (d) “undefined”</p>
<p> This one tripped me up! The comma apparently executes the function on its right. &#8220;,&#8221; is a left-associative operator which returns the value on its right, which makes the above to be var f = 2. typeof 2 will return &#8220;number&#8221; which is option (b).</p>
<pre class="brush: jscript; title: ; notranslate">
 9. var x = 1;
    if (function f(){}) {
      x += typeof f;
    }
    x;
  </pre>
<p>(a) 1 (b) “1function” (c) “1undefined” (d) NaN</p>
<p>This returns &#8220;1undefined&#8221; because x+ typeof f where &#8220;f&#8221; is undefined returns 1 + &#8220;undefined&#8221; = &#8220;1undefined&#8221;. Also note how if(function(){}) evaluated to true.</p>
<pre class="brush: jscript; title: ; notranslate">
10.  var x = [typeof x, typeof y][1];
    typeof typeof x;
  </pre>
<p>(a) “number” (b) “string” (c) “undefined” (d) “object”</p>
<p>typeof &#8220;y&#8221; which is undefined returns &#8220;undefined&#8221;, typeof &#8220;undefined&#8221; is &#8220;string&#8221;, and another typeof on it still returns &#8220;string&#8221;.</p>
<pre class="brush: jscript; title: ; notranslate">
11. (function(foo){
      return typeof foo.bar;
    })({ foo: { bar: 1 } });
  </pre>
<p>(a) “undefined” (b) “object” (c) “number” (d) Error</p>
<p>This one is simple, typeof foo.bar is a trick question because the argument foo is just an object, so to really get the &#8220;bar&#8221; value, it has to be typeof foo.foo.bar in this case. Either way, the answer is &#8220;undefined&#8221;.</p>
<pre class="brush: jscript; title: ; notranslate">
12. (function f(){
      function f(){ return 1; }
      return f();
      function f(){ return 2; }
    })();
  </pre>
<p>(a) 1 (b) 2 (c) Error (e.g. “Too much recursion”) (d) undefined</p>
<p>I made the mistake of thinking the value is 1, but if you pay careful attention, you&#8217;ll realize both functions are called f, which means when return f() executes, function returns value 2 because its been parsed second. So the answer is &#8220;2&#8243;.</p>
<pre class="brush: jscript; title: ; notranslate">
13. function f(){ return f; }
    new f() instanceof f;
  </pre>
<p>(a) true (b) false</p>
<p>This evaluates to false because new f() returns a function which is not an instanceof the function f. </p>
<pre class="brush: jscript; title: ; notranslate">
14. with (function(x, undefined){}) length;
  </pre>
<p> (a) 1 (b) 2 (c) undefined (d) Error</p>
<p> This evaluates to 2, because the functions length is the number of expected arguments. </p>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/javascript/'>JavaScript</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/interview-questions/'>interview questions</a>, <a href='http://vikasrao.wordpress.com/tag/javascript-quiz/'>JavaScript quiz</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/203/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/203/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=203&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2011/08/25/javascript-quiz-from-perfection-kills/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
		<item>
		<title>Subscribing to Facebook Graph API&#8217;s real time updates using CURL.</title>
		<link>http://vikasrao.wordpress.com/2011/07/05/subscribing-to-facebook-graph-apis-real-time-updates-using-curl/</link>
		<comments>http://vikasrao.wordpress.com/2011/07/05/subscribing-to-facebook-graph-apis-real-time-updates-using-curl/#comments</comments>
		<pubDate>Tue, 05 Jul 2011 21:51:11 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[Facebook graph API]]></category>
		<category><![CDATA[Facebook real time updates]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/?p=198</guid>
		<description><![CDATA[Facebook allows you to subscribe to an application user&#8217;s activity on Facebook, so that you can subscribe to them, and use that information for various things. This is great because (the other alternative is) having to run a daemon process in order to find out a user&#8217;s Facebook activity is painful. However, as awesome as [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=198&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Facebook allows you to subscribe to an application user&#8217;s activity on Facebook, so that you can subscribe to them, and use that information for various things. This is great because (the other alternative is) having to run a daemon process in order to find out a user&#8217;s Facebook activity is painful. </p>
<p>However, as awesome as this service is, understanding their documentation on this topic is a whole another matter. I found it almost impossible to decipher, as a lot of things were unclear or left unexplained. Look here: <a href="http://developers.facebook.com/docs/reference/api/realtime/" target="_blank">http://developers.facebook.com/docs/reference/api/realtime/</a></p>
<p>Luckily I found a blog post explaining how to do this, <a href="http://chaolam.wordpress.com/2010/06/07/implementing-facebook-real-time-updates-api-with-curl-examples/" target="_blank">here</a> it is. </p>
<p>I&#8217;ll run down the steps again below, as a few of the steps are now easier:</p>
<p>1. Get access token: <a href="https://developers.facebook.com/tools/access_token/" target="_blank">https://developers.facebook.com/tools/access_token/</a> gives you access tokens to all your apps on facebook.</p>
<p>2. Check if access token works:</p>
<pre class="brush: perl; title: ; notranslate">
curl &quot;https://graph.facebook.com/&lt;appid&gt;/subscriptions?access_token=&lt;access token from  step (1)&gt;&quot;
</pre>
<p>Since you originally have no subscriptions, you get: </p>
<p>{&#8220;data&#8221;:[]} or some kind of error. </p>
<p>3. If you got empty JSON back in step 2, now you can subscribe to updates(here I want to subscribe to user checkins):</p>
<pre class="brush: perl; title: ; notranslate">
curl -F 'object=user' \
-F 'callback_url=&lt;callback url you have to implement&gt;' \
-F 'fields=checkins' \
-F 'verify_token=&lt;secret token&gt;' \
&quot;https://graph.facebook.com/&lt;your-app-id&gt;/subscriptions?access_token=&lt;access token from (1)&quot;
</pre>
<p>The callback_url should be something along the lines of: <a href="https://github.com/facebook/php-sdk/blob/master/examples/example.php" target="_blank">https://github.com/facebook/php-sdk/blob/master/examples/example.php</a></p>
<p>This call should return &#8220;null&#8221; if successful. Once you have subscribed to updates, Facebook starts posting activities of all your application users to the callback_url above.</p>
<p>4. To verify step 3 was successful, run step 2 again, and this time, it should return something like this:</p>
<pre class="brush: jscript; title: ; notranslate">
{&quot;data&quot;:[{&quot;object&quot;:&quot;user&quot;,&quot;callback_url&quot;:&quot;http:\/\/yourdomain.com\/callback.php&quot;,&quot;fields&quot;:[&quot;checkins&quot;],&quot;active&quot;:true}]}
</pre>
<p>The above response means the subscription to updates about user checkins are now active. Hopefully this helps people who are confused about how to get real time updates working.</p>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/facebook-graph-api/'>Facebook graph API</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/facebook-graph-api/'>Facebook graph API</a>, <a href='http://vikasrao.wordpress.com/tag/facebook-real-time-updates/'>Facebook real time updates</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/198/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/198/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=198&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2011/07/05/subscribing-to-facebook-graph-apis-real-time-updates-using-curl/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
		<item>
		<title>Accessing user&#8217;s Facebook checkins via Graph API</title>
		<link>http://vikasrao.wordpress.com/2011/07/05/accessing-users-facebook-checkins-via-graph-api/</link>
		<comments>http://vikasrao.wordpress.com/2011/07/05/accessing-users-facebook-checkins-via-graph-api/#comments</comments>
		<pubDate>Tue, 05 Jul 2011 21:22:35 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[Facebook graph API]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Facebook connect]]></category>
		<category><![CDATA[graph api]]></category>
		<category><![CDATA[Graph API checkins]]></category>
		<category><![CDATA[me/checkins]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/?p=195</guid>
		<description><![CDATA[Your application might want to use a user&#8217;s checkin data in various ways, I outline below how to fetch a user&#8217;s facebook checkin information and get the Facebook page for that location. First of all, you need to have the permissions to access a user&#8217;s checkin data. Look at http://developers.facebook.com/tools/explorer for information on this. Once [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=195&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Your application might want to use a user&#8217;s checkin data in various ways, I outline below how to fetch a user&#8217;s facebook checkin information and get the Facebook page for that location. </p>
<p>First of all, you need to have the permissions to access a user&#8217;s checkin data. Look at <a href="http://developers.facebook.com/tools/explorer" target="_blank">http://developers.facebook.com/tools/explorer</a> for information on this.</p>
<p>Once you have the required permissions and the user is logged in via Facebook connect:</p>
<pre class="brush: jscript; title: ; notranslate">

//dojo.hitch to make the object scope available
FB.api(&quot;/me/checkins&quot;, dojo.hitch(this, function(response){
	if(response.data &amp;&amp; response.data.length &gt; 0) {
		dojo.forEach(response.data, function(item) {
            var locationId = item.id; 
            var locationName = item.place.name; //name of the place
            // To get a Facebook link to the location
            var locationLink = this.getLocationLink(locationName, locationId);
            console.log(locationLink); //print location link
        });
	}
}));

/**
* Output like this: http://www.facebook.com/pages/Espetus-Churrascaria-Brazilian-Steakhouse/166393336742282
*/
getLocationLink: function(locationName, locationId) {        
        var baseURL = 'http://wwww.facebook.com/pages/';
        var locationNameArr = locationName.split(' ');
        var locationLink = '';
        for(var i = 0; i &lt; locationNameArr.length; i++) {
            locationLink += locationNameArr[i];
            if(i != locationNameArr.length-1) locationLink += &quot;-&quot;;
        }        
        return baseURL + locationLink + '/' + locationId;
    },
    
</pre>
<p>More information on whats available with the Checkin object is outlined here: <a href="http://developers.facebook.com/docs/reference/api/checkin/" target="_blank">http://developers.facebook.com/docs/reference/api/checkin/</a></p>
<p>The /me/checkins request usually returns the most recent 25 checkins, with a hook to access more of the checkin information if required. </p>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/facebook-graph-api/'>Facebook graph API</a>, <a href='http://vikasrao.wordpress.com/category/javascript/'>JavaScript</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/facebook-connect/'>Facebook connect</a>, <a href='http://vikasrao.wordpress.com/tag/graph-api/'>graph api</a>, <a href='http://vikasrao.wordpress.com/tag/graph-api-checkins/'>Graph API checkins</a>, <a href='http://vikasrao.wordpress.com/tag/mecheckins/'>me/checkins</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/195/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/195/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=195&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2011/07/05/accessing-users-facebook-checkins-via-graph-api/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
		<item>
		<title>Facebook Graph API &#8211; Facebook connect using JavaScript</title>
		<link>http://vikasrao.wordpress.com/2011/07/05/facebook-graph-api-facebook-connect-using-javascript/</link>
		<comments>http://vikasrao.wordpress.com/2011/07/05/facebook-graph-api-facebook-connect-using-javascript/#comments</comments>
		<pubDate>Tue, 05 Jul 2011 21:04:34 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[Facebook graph API]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Facebook connect]]></category>
		<category><![CDATA[FB.getLoginStatus]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/?p=192</guid>
		<description><![CDATA[To use facebook connect on your website, or to allow a user to login to your website using facebook, its important to use Facebook Connect. I prefer doing this via JavaScript because its the language I am most comfortable with. Basics on how to set up and register a facebook app have been covered elsewhere, [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=192&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>To use facebook connect on your website, or to allow a user to login to your website using facebook, its important to use Facebook Connect. I prefer doing this via JavaScript because its the language I am most comfortable with. </p>
<p>Basics on how to set up and register a facebook app have been covered <a href="http://ottopress.com/2010/how-to-setup-your-facebook-connect-application/" target="_blank">elsewhere</a>, over here I&#8217;m going to focus on the code which makes this happen.</p>
<p>To get started, make sure you import the Facebook JavaScript file. You also need to add a div whose id is fb-root, and you also specify your application credentials. For example:</p>
<pre class="brush: jscript; title: ; notranslate">

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;http://connect.facebook.net/en_US/all.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  FB.init({
    appId  : 'YOUR APP ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
  });
&lt;/script&gt;

</pre>
<p>Once you do this, the FB object becomes available for use in your application. The best way to invite the user to login and/or provide permissions to your application is to use the FB.getLoginStatus() method:</p>
<pre class="brush: jscript; title: ; notranslate">
FB.getLoginStatus(function(response) {
	(response.session) ? showAccountInfo(): showLoginButton(); 
	FB.Event.subscribe('auth.statusChange', function() { // do something when auth status changes }); 
});
</pre>
<p>If the user is not logged in or has not provided the required permissions to your application, display the login button. </p>
<pre class="brush: jscript; title: ; notranslate">
&lt;img style=&quot;cursor: pointer;&quot; 
onclick=&quot;FB.login( function(response) {yourObject.onStatus(response)},{ perms: 'email,publish_stream,offline_access,user_checkins,friends_birthday' })&quot;
src=&quot;https://s-static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif&quot;/&gt;
</pre>
<p>The image, when clicked, calls the onStatus() method. &#8220;yourObject&#8221; assumes you are writing Object oriented JavaScript and the object is available in the namespace. </p>
<p>The permissions requested above are: email,publish_stream,offline_access,user_checkins,friends_birthday. You may want less, more or just the default information facebook makes available about every user. More information on permissions is available here: <a href="https://developers.facebook.com/tools/explorer" target="_blank">https://developers.facebook.com/tools/explorer</a></p>
<p>Thats it! The steps to have a user login and provide the required permissions to your application using the Facebook Graph API using JavaScript.</p>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/facebook-graph-api/'>Facebook graph API</a>, <a href='http://vikasrao.wordpress.com/category/javascript/'>JavaScript</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/facebook-connect/'>Facebook connect</a>, <a href='http://vikasrao.wordpress.com/tag/facebook-graph-api/'>Facebook graph API</a>, <a href='http://vikasrao.wordpress.com/tag/fb-getloginstatus/'>FB.getLoginStatus</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/192/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/192/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=192&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2011/07/05/facebook-graph-api-facebook-connect-using-javascript/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
		<item>
		<title>Preventing JavaScript memory leaks with Dojo disconnect</title>
		<link>http://vikasrao.wordpress.com/2011/06/24/preventing-javascript-memory-leaks-with-dojo-disconnect/</link>
		<comments>http://vikasrao.wordpress.com/2011/06/24/preventing-javascript-memory-leaks-with-dojo-disconnect/#comments</comments>
		<pubDate>Sat, 25 Jun 2011 05:47:36 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[dojo.connect]]></category>
		<category><![CDATA[dojo.disconnect]]></category>
		<category><![CDATA[memory leaks in javascript]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/?p=189</guid>
		<description><![CDATA[One of the things with using event listeners in JavaScript is that it causes memory leaks. This causes the website performance to slow down after a while. A pretty good description of how and why these memory leaks happen is explained here. In Dojo, attaching events to an element are done as below: Eugene Lazutkin&#8217;s [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=189&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>One of the things with using event listeners in JavaScript is that it causes memory leaks. This causes the website performance to slow down after a while. A pretty good description of how and why these memory leaks happen is explained <a href="http://www.javascriptkit.com/javatutors/closuresleak/index3.shtml" target="_blank">here</a>.</p>
<p>In Dojo, attaching events to an element are done as below:</p>
<pre class="brush: jscript; title: ; notranslate">
dojo.connect(dojo.byId('elementId'), 'onclick'/*or other events*/, scope/*context*/, function(event) {
   //do something when the event happens.
});
</pre>
<p>Eugene Lazutkin&#8217;s solution <a href="http://stackoverflow.com/questions/1214624/dojo-disconnect-question/1215532#1215532" target="_blank">here</a> on StackOverflow is perfect in my opinion. I&#8217;ve started using it in all the Dijit widgets I&#8217;ve been writing. I put this in the destroy() method of the widget.</p>
<pre class="brush: jscript; title: ; notranslate">
dojo.forEach(handles, dojo.disconnect);
</pre>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/javascript/'>JavaScript</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/dojo-connect/'>dojo.connect</a>, <a href='http://vikasrao.wordpress.com/tag/dojo-disconnect/'>dojo.disconnect</a>, <a href='http://vikasrao.wordpress.com/tag/memory-leaks-in-javascript/'>memory leaks in javascript</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/189/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/189/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=189&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2011/06/24/preventing-javascript-memory-leaks-with-dojo-disconnect/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
		<item>
		<title>Understanding CSS box model properly</title>
		<link>http://vikasrao.wordpress.com/2011/06/16/understanding-css-box-model-properly/</link>
		<comments>http://vikasrao.wordpress.com/2011/06/16/understanding-css-box-model-properly/#comments</comments>
		<pubDate>Fri, 17 Jun 2011 06:05:36 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[css box model]]></category>
		<category><![CDATA[dojo.position]]></category>
		<category><![CDATA[html box model]]></category>
		<category><![CDATA[margin]]></category>
		<category><![CDATA[padding]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/?p=184</guid>
		<description><![CDATA[I&#8217;ve noticed a lot of developers are unsure of how the box model concept works with respect to how rectangles are created for elements laid out on the DOM tree. Although this document explains it pretty well, I built a small example which I feel also demonstrates the core concept reasonably well. http://jsfiddle.net/thxzc/1/ 4 main [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=184&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>I&#8217;ve noticed a lot of developers are unsure of how the box model concept works with respect to how rectangles are created for elements laid out on the DOM tree. Although this <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">document</a> explains it pretty well, I built a small example which I feel also demonstrates the core concept reasonably well. </p>
<p><a href="http://jsfiddle.net/thxzc/1/" target="_blank">http://jsfiddle.net/thxzc/1/</a></p>
<p>4 main concepts to properly understand the box model:</p>
<ol>
<li><strong>Content:</strong> The actual content area with a width and height specified to it.</li>
<li><strong>Padding:</strong> Clears space inside the rectangle created for the content rectangle above. This padding also assumes he background color of the content area.
</li>
<li><strong>Margin:</strong> Clears space OUTSIDE the rectangle created for the content rectangle above. </li>
<li><strong>Border:</strong> The border wraps around the content area/rectangle + the padding. It may or may not have its own color.</li>
</ol>
<p>The actual size of the node includes the padding and the border. So if the width of a node is 200px, and it has a 10px padding and 1px border around it. Its real width is 222px(width + paddingLeft + paddingRight + borderLeft + borderRight).</p>
<p>Execute the example again and you will see how the height and width of the content area are computed: <a href="http://jsfiddle.net/thxzc/1/" target="_blank">http://jsfiddle.net/thxzc/1/</a></p>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/javascript/'>JavaScript</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/css-box-model/'>css box model</a>, <a href='http://vikasrao.wordpress.com/tag/dojo-position/'>dojo.position</a>, <a href='http://vikasrao.wordpress.com/tag/html-box-model/'>html box model</a>, <a href='http://vikasrao.wordpress.com/tag/margin/'>margin</a>, <a href='http://vikasrao.wordpress.com/tag/padding/'>padding</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/184/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/184/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=184&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2011/06/16/understanding-css-box-model-properly/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
		<item>
		<title>Removing duplicates from a JavaScript object array</title>
		<link>http://vikasrao.wordpress.com/2011/06/09/removing-duplicates-from-a-javascript-object-array/</link>
		<comments>http://vikasrao.wordpress.com/2011/06/09/removing-duplicates-from-a-javascript-object-array/#comments</comments>
		<pubDate>Fri, 10 Jun 2011 01:37:04 +0000</pubDate>
		<dc:creator>vikasvrao</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[filter duplicates from array]]></category>
		<category><![CDATA[Remove duplicates from Javascript array]]></category>

		<guid isPermaLink="false">http://vikasrao.wordpress.com/?p=180</guid>
		<description><![CDATA[Removing duplicates from a JavaScript array is an often encountered problem but after searching around, I have found very few good solutions to this. I wrote a small program but I realized that my solution had a O(n2) complexity. So I asked on twitter if someone knew of a better solution: Dont like my method [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=180&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Removing duplicates from a JavaScript array is an often encountered problem but after searching around, I have found very few good solutions to this. I wrote a small program but I realized that my solution had a O(n2) complexity. So I asked on twitter if someone knew of a better solution:</p>
<blockquote class='twitter-tweet'><p>Dont like my method to filter duplicates in an array using JavaScript. Anyone have a better approach? <a href="http://bit.ly/mt1H7f" rel="nofollow">http://bit.ly/mt1H7f</a> <a href="http://twitter.com/search?q=%23javascript" title="#javascript">#javascript</a> <a href="http://twitter.com/search?q=%23dojo" title="#dojo">#dojo</a>&mdash; <br />&nbsp; (@vikasrao) <a href='http://twitter.com/#!/vikasrao/status/77134502132064256' data-datetime='2011-06-04T22:07:53+00:00'>June 04, 2011</a></p></blockquote>
<p>My friend pointed out that I can use a map. Since a JavaScript object is essentially a map. I came up with:</p>
<pre class="brush: jscript; title: ; notranslate">
var arr = [
    { name: &quot;a&quot;, age: 24},
    { name: &quot;b&quot;, age: 25},
    { name: &quot;a&quot;, age: 24},
    { name: &quot;b&quot;, age: 25}
];

var newarr = [];
var unique = {};

dojo.forEach(arr, function(item) {
    if (!unique[item.age]) {
        newarr.push(item);
        unique[item.age] = item;
    }
});

console.log(dojo.toJson(newarr)); //prints [{&quot;name&quot;:&quot;a&quot;,&quot;age&quot;:24},{&quot;name&quot;:&quot;b&quot;,&quot;age&quot;:25}]
</pre>
<p>Here&#8217;s a JsFiddle link for the above code: <a href="http://jsfiddle.net/k6v3R/1/" target="_blank">http://jsfiddle.net/k6v3R/1/</a></p>
<p>I&#8217;m sure there are better solutions out there, but the complexity for the above code is O(n) although I&#8217;m thinking I don&#8217;t need to use both an object and an array to filter unique items. </p>
<br />Filed under: <a href='http://vikasrao.wordpress.com/category/javascript/'>JavaScript</a> Tagged: <a href='http://vikasrao.wordpress.com/tag/filter-duplicates-from-array/'>filter duplicates from array</a>, <a href='http://vikasrao.wordpress.com/tag/remove-duplicates-from-javascript-array/'>Remove duplicates from Javascript array</a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/vikasrao.wordpress.com/180/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/vikasrao.wordpress.com/180/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=vikasrao.wordpress.com&#038;blog=2314041&#038;post=180&#038;subd=vikasrao&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://vikasrao.wordpress.com/2011/06/09/removing-duplicates-from-a-javascript-object-array/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	
		<media:content url="http://2.gravatar.com/avatar/285b210dadc7b994f64ef19485a44c7d?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">vikasvrao</media:title>
		</media:content>
	</item>
	</channel>
</rss>
