<?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/"
	>

<channel>
	<title>Webgyani &#187; Uncategorized</title>
	<atom:link href="http://webgyani.com/category/uncategorized/feed/" rel="self" type="application/rss+xml" />
	<link>http://webgyani.com</link>
	<description>A cognitive perspective on web</description>
	<lastBuildDate>Mon, 31 May 2010 16:25:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>&#8220;new&#8221; operator in JavaScript</title>
		<link>http://webgyani.com/2010/04/new-operator-in-javascript/</link>
		<comments>http://webgyani.com/2010/04/new-operator-in-javascript/#comments</comments>
		<pubDate>Tue, 20 Apr 2010 13:47:18 +0000</pubDate>
		<dc:creator>Arnab</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://webgyani.com/?p=140</guid>
		<description><![CDATA[In JavaScript, there’s an operator called new which we use to create an instance of an object (i.e Constructor function). So, what does new do? Well, it ensures that you always get an object when you use it with a constructor function. By the way, there’s no difference between a constructor function and a normal function, both are same. The term constructor function is used to indicate that we can create an object of that type using the new operator. Consider the below example: function Foo(){ this.name = 'Foo'; } var f = new Foo(); f.name // =&#62; Foo The above code pretty much says that you first create an instance of the constructor function (note the upper case first letter, this is a convention, not a rule ) using new operator, once that statement executes you now have an object as the value of “f” and in next line [Continue... <span class="meta-nav">&#8594;</span>]]]></description>
			<content:encoded><![CDATA[<p>In JavaScript, there’s an operator called <strong>new</strong> which we use to create an instance of an object (i.e Constructor function). So, what does <em><strong>new</strong></em> do? Well, it ensures that you always get an object when you use it with a constructor function. By the way, there’s no difference between a constructor function and a normal function, both are same. The term constructor function is used to indicate that we can create an object of that type using the <strong>new</strong> operator. <span id="more-140"></span>Consider the below example:</p>
<pre><code>function Foo(){
    this.name = 'Foo';
}
var f = new Foo();
f.name // =&gt; Foo
</code></pre>
<p>The above code pretty much says that you first create an instance of the constructor function (note the upper case first letter, this is a convention, not a rule ) using new operator, once that statement executes you now have an object as the value of “<em>f</em>” and in next line it simply prints the “<em>name”</em> property of that object, which in this case is an instance variable of the constructor function “<em>Foo”. </em></p>
<p>Consider below example and guess what will be the value of “<em>f”</em>:</p>
<pre><code>function Foo(){
    this.name = 'Foo';
    return 'Foo';
}
var f = new Foo();
f.name // =&gt; Foo
</code></pre>
<p>Interesting thing is that in this case the value of “<em>f” </em>is still an object, but we did return a String, so why the hell “<em>f”</em> contains an object? Well, the purpose of the <strong>new</strong> keyword is to ensure that you always get an object, so anything other than object is discarded, if you return an object then that will be used else a new object is created and returned. So, if we replace our return statement using the following code then the value of “<em>f”</em> will have a different value altogether and accessing “<em>f.name</em>” will result in “<em>undefined</em>”:</p>
<pre><code>return { prop: 'Foo' };</code></pre>
<p>Interestingly, if you return “<em>null”</em> then that will be NOT be used, even though you might think that <em>null</em> is an object and &#8220;<code>typeof(null) === ‘object’</code>&#8220;, so it should use that. In fact, it does not, it appears that <strong>new</strong> returns only objects which can evaluate to truthy value.</p>
<p>Another thing is that if you return a <em>function</em> other than object then the function will be used, the reason is functions are objects too, only difference is that they are special objects, that’s why there’s a separation between objects and functions, the <em>typeof</em> operator handles that properly, but in this case it appears that the <strong>new</strong> doesn’t bother about that.</p>
<p>So, this is what the <strong>new</strong> operator does in JavaScript, if you have anything else to share please feel free to comment.</p>
]]></content:encoded>
			<wfw:commentRss>http://webgyani.com/2010/04/new-operator-in-javascript/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Simulated chaining in JavaScript</title>
		<link>http://webgyani.com/2010/02/simulated-chaining-in-javascript/</link>
		<comments>http://webgyani.com/2010/02/simulated-chaining-in-javascript/#comments</comments>
		<pubDate>Wed, 10 Feb 2010 17:30:54 +0000</pubDate>
		<dc:creator>Arnab</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://webgyani.com/?p=115</guid>
		<description><![CDATA[Kyle Simpson (aka @getify) has written an excellent post on chaining in JavaScript and how you can take it to the next level. Here is a little excerpt from the original post: Just so we’re all on the same page, “chaining” is this wonderful functional property of languages like JavaScript (which treat a function as a first-class citizen). It essentially amounts to making a function call, and the return value from the function is itself either another callable function, or more often, an object that has functions which are directly callable Check out the article http://blog.getify.com/2010/02/simulated-chaining-in-javascript/]]></description>
			<content:encoded><![CDATA[<p>Kyle Simpson (aka @getify) has written an excellent post on chaining in JavaScript and how you can take it to the next level. Here is a little excerpt from the original post:</p>
<blockquote><p>Just so we’re all on the same page, “chaining” is this wonderful functional property of languages like JavaScript (which treat a function as a first-class citizen). It essentially amounts to making a function call, and the return value from the function is itself either another callable function, or more often, an object that has functions which are directly callable</p></blockquote>
<p>Check out the article <a href="http://blog.getify.com/2010/02/simulated-chaining-in-javascript/">http://blog.getify.com/2010/02/simulated-chaining-in-javascript/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://webgyani.com/2010/02/simulated-chaining-in-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>10 things a frontend engineer should know</title>
		<link>http://webgyani.com/2010/01/10-things-a-frontend-engineer-should-know/</link>
		<comments>http://webgyani.com/2010/01/10-things-a-frontend-engineer-should-know/#comments</comments>
		<pubDate>Wed, 13 Jan 2010 17:24:38 +0000</pubDate>
		<dc:creator>Arnab</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://webgyani.com/2010/01/10-things-a-frontend-engineer-should-know/</guid>
		<description><![CDATA[Frontend engineering as it stands today is a bit of vague and unspecified territory, it’s still not clearly understood may be because of the lack of clarity around stuffs a frontend engineer does. To simply put, frontend engineering means understanding the browsers best, the work of a frontend engineer is what you see when you do “view source”. So, how can you become a frontend engineer? In this post I’ll list down some of the things that a would be frontend engineer should know about. Frontend engineers write software using HTML, CSS and JavaScript, and yes I meant ‘writing software’, because if you look at modern day web applications like Gmail, Yahoo! Mail, Google Wave all are complex applications which involves significant amount of JavaScript, CSS, HTML and other technologies. So basically it means a frontend engineer should be specialized in HTML, CSS and JavaScript. Below are the list of [Continue... <span class="meta-nav">&#8594;</span>]]]></description>
			<content:encoded><![CDATA[<p>Frontend engineering as it stands today is a bit of vague and unspecified territory, it’s still not clearly understood may be because of the lack of clarity around stuffs a frontend engineer does. To simply put, frontend engineering means understanding the browsers best, the work of a frontend engineer is what you see when you do “view source”. So, how can you become a frontend engineer? In this post I’ll list down some of the things that a would be frontend engineer should know about. Frontend engineers write software using HTML, CSS and JavaScript, and yes I meant ‘writing software’, because if you look at modern day web applications like Gmail, Yahoo! Mail, Google Wave all are complex applications which involves significant amount of JavaScript, CSS, HTML and other technologies. So basically it means a frontend engineer should be specialized in HTML, CSS and JavaScript. </p>
<p> <span id="more-114"></span>
<p>Below are the list of things that I would expect to see in a would be frontend engineer:</p>
<p>&#160;</p>
<ul>
<li><strong>Semantic and non-semantic markup</strong> &#8211; Understanding the differences between semantic and non-semantic HTML is a key area in web development, in HTML we have different tags with different semantic meaning, a frontend engineer should know which tag to use when, it’s not a good practice to use &lt;DIV&gt; tag to display paragraphs even if both &lt;P&gt; and &lt;DIV&gt; visually look similar. </li>
<li><strong>Rendering modes</strong> – Every browser for the sake of backward compatibility has implemented two types of rendering modes, and browser’s use DOCTYPE tag as the rendering mode switcher. It’s important to know about rendering modes because they drastically affect the way browsers render a webpage. Primarily, there are two rendering modes “Standards mode” and “Quirks mode”, some browsers even have “almost standards mode”. In “standards mode” browser will try to display a webpage in the most efficient way possible, where as in “quirks mode” browser will display the page in a backward compatible way. </li>
<li><strong>Structure, presentation and behavior</strong> – These are the key design elements in building websites. The structure (HTML), presentation/styling (CSS) and behavior (JavaScript) should be separated out, which helps make you page modular and maintainable. Remember it also speeds up your site, because the presentation and behavior layer will likely be cached by the browser, which results in faster downloads. Use meaningful markup with Class and Ids as the possible hook for adding styling and behavior. Never use inline event handlers in your HTML, instead use Unobtrusive JavaScript to attach event handlers, which helps keep the markup clean. </li>
<li><strong>Ability to hand code your HTML</strong> – There are some WYSIWYG editors out there in the market, but I would recommend not to use any one of them, instead learn to write HTML by hand coding, because this will give you the ability to create a visual picture of your page layout in your mind, if you continue this practice after some time you will notice that you can almost tell how many DIVs you need to create a particular layout just seeing that design. Remember that all those big web applications out there were created by hand coding HTML and CSS, once you are proficient writing HTML then you can use some code auto-completion utilities to speed things up a little bit. </li>
<li><strong>CSS and browser quirks</strong> – The CSS stands for ‘Cascading Style Sheets’, here ‘Cascading’ means a way to determine which CSS rules are going to apply on a particular element. So it’s important to know how <em>Specificity</em>, <em>Order</em>, <em>Inheritance</em> and above all the <em>Box Model</em> are being calculated. Some browsers have terribly wrong implementation of some CSS standards so it is important to have the knowledge regarding browser workarounds, there are CSS hacks and fixes available for some browsers most notably Internet Explorer, which you can use or you might consider using <em>conditional-comments a</em>s a way to include special style sheet for that depending on your needs. Another thing in this context is the knowledge regarding ‘<a href="http://www.google.co.in/search?q=hasLayout" rel="nofollow" target="_blank">hasLayout</a>’ concept in IE6/7, this concept is one of the main reasons behind CSS bugs in above mentioned browsers. </li>
<li><strong>JavaScript Language</strong> – Learn this language, it’s no toy language anymore and it’s not even distantly related with Java excluding the naming similarity. It is an Object-oriented language with <em>prototypal inheritance</em> pattern. This is the language which drives modern day web applications, since the advent of Ajax this period has seen a tremendous growth of JavaScript. I believe that the way <strong>HTML 5</strong> is heading this language is going to be one of the most important programming languages in the next decade. JavaScript was designed in a hurry, so there are some rough edges and some incorrect implementation, hence it’s important to know the good and bad parts of the language. In modern web applications JavaScript interacts heavily with DOM(Document Object Model), so having a good understanding of DOM methods, traversal techniques, DOM manipulation are necessary. I recommend picking up <a href="http://www.amazon.com/Professional-JavaScript-Developers-Wrox-Programmer/dp/047022780X" rel="nofollow">Professional JavaScript for Web Developers</a>. </li>
<li><strong>JavaScript and CSS Frameworks</strong> – Once you are well familiar with all the above concepts, it’s time to pick up few JavaScript and CSS frameworks. Nevertheless, the JavaScript Frameworks that you should check out are <a href="http://jquery.com/" rel="nofollow" target="_blank">jQuery</a>, <a href="http://developer.yahoo.com/yui/" rel="nofollow" target="_blank">YUI</a> and <a href="http://www.dojotoolkit.org/" rel="nofollow" target="_blank">Dojo</a> etc. and for CSS Frameworks there are <a href="http://wiki.github.com/stubbornella/oocss" rel="nofollow" target="_blank">OOCSS</a>, <a href="http://960.gs/" rel="nofollow" target="_blank">960.gs</a> and <a href="http://www.blueprintcss.org/" rel="nofollow" target="_blank">Blueprint</a> etc.. Even though you can go through with those libraries, I would recommend you should go through their source code whenever possible, this will give you a lot of insight into what’s happening and how those libraries have organized their code, you’ll learn a lot, I guarantee. </li>
<li><strong>Website Optimization</strong> – This is a very important point, and you just cannot ignore it&#160; anymore. Latency is one of the main reason behind slow websites, but you can do very little about it, so focus on areas where optimization can give you significant result. Learn how to cache your assets using proper HTTP headers, serve your assets using Gzip, optimize images (there are some good tools around one example is <a href="http://github.com/kristoferbaxter/SmallerMaker" rel="nofollow" target="_blank">SmallerMaker</a> ), know how browsers do parallel downloading, consider using ‘Lazy Loading’ techniques, load scripts on-demand/on the fly when required and use CSS sprites where suitable(although you can take a peek at <em><a href="http://www.stevesouders.com/blog/2009/11/16/cssembed-automatically-data-uri-ize/" rel="nofollow" target="_blank">Data URIs</a></em>). For more info check out <a href="http://www.stevesouders.com/" rel="nofollow" target="_blank">stevesouders.com</a>. </li>
<li><strong>Staying up-to-date</strong> – The frontend technologies are changing almost everyday, so it’s very necessary to stay up-to-date, you got to keep an eye on the stuffs happening around JavaScript, HTML 5, CSS3 and other best practices, which will help you gather information and knowledge upfront, which you can later use in your work. </li>
<li><strong>Communication and co-ordination</strong> – Last but not the least, this is a very important job that a frontend engineer has to do everyday with his peers, managers and creative designers. He/she has to communicate well in terms of what can be possible in the browser, how changing something can improve or degrade accessibility or performance. I have seen designers often like to design interfaces by pouring every bit of their creativity and aesthetic sense, which is a good thing definitely, but in a real world implementing those interfaces using HTML/CSS is sometimes impossible, hence it is the frontend engineer who should actually communicate with the designers about what can be done and what can not. In some cases he/she often has to push back some features which might introduce too much complexity or impact the performance of the application as a whole, and while doing so I would expect that a good frontend engineer to come out with alternate solutions in a constructive way. As frontend engineers sit somewhere between middle-tier, creative and product management, so their efforts are directly related with these people, communicating and coordinating properly will definitely serve well. </li>
</ul>
<p>&#160;</p>
<p>&#160;</p>
<p>Well if you want to be a frontend engineer make sure that you know stuffs I mentioned above, these are just the beginning by the way, there are a lot of things that you will learn eventually, but don’t forget to make sure that your base is strong, do a lot of practice, ask questions, read articles and blogs and finally think like a frontend engineer. All the best.</p>
<p>&#160;</p>
<p>&#160;</p>
<p><em>Disclaimer: The use of the word ‘engineer’ is not meant to do anything with ‘Engineering discipline’ at al, I know traditional engineers do a lot of hard work to achieve that academic qualification, as working in frontend also involves similar amount of hard work that’s why the term has been used here to refer the collective effort of those people.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://webgyani.com/2010/01/10-things-a-frontend-engineer-should-know/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>New JavaScript library to load files on the fly</title>
		<link>http://webgyani.com/2009/12/new-javascript-library-to-load-files-on-the-fly/</link>
		<comments>http://webgyani.com/2009/12/new-javascript-library-to-load-files-on-the-fly/#comments</comments>
		<pubDate>Wed, 02 Dec 2009 14:32:12 +0000</pubDate>
		<dc:creator>Arnab</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://webgyani.com/?p=78</guid>
		<description><![CDATA[They call it LABjs which stands for &#8220;Loading and Blocking JavaScript&#8221;, it&#8217;s a cool new way of loading JavaScript files on the fly, the project is a handywork Kyle Simpson with the help of Steve Souders, the creator of &#8220;Page Speed&#8221; Firebug plugin, the library seems pretty interesting. See what they say about their library: LABjs’ primary goal is to replace the “&#60;script&#62; tag soup” in your pages (you know, all that garbage that clutters up your &#60;head&#62; or the end of your &#60;body&#62;) with a simple and expressive API that gives you complete control over the loading and executing behavior of your scripts. Check out the full detail here http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/ Updated: Post updated to include the name of Kyle Simpson the primary author of the library.]]></description>
			<content:encoded><![CDATA[<p>They call it LABjs which stands for &#8220;Loading and Blocking JavaScript&#8221;, it&#8217;s a cool new way of loading JavaScript files on the fly, the project is a handywork Kyle Simpson with the help of Steve Souders, the creator of &#8220;Page Speed&#8221; Firebug plugin, the library seems pretty interesting. See what they say about their library:</p>
<blockquote><p>LABjs’ primary goal is to replace the “&lt;script&gt; tag soup” in your pages (you know, all that garbage that clutters up your &lt;head&gt; or the end of your &lt;body&gt;) with a simple and expressive API that gives you complete control over the loading and executing behavior of your scripts.</p></blockquote>
<p>Check out the full detail here <a href="http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/">http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/</a></p>
<p><strong>Updated:</strong> Post updated to include the name of Kyle Simpson the primary author of the library.</p>
]]></content:encoded>
			<wfw:commentRss>http://webgyani.com/2009/12/new-javascript-library-to-load-files-on-the-fly/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
