tag:blogger.com,1999:blog-99255482018-03-16T16:56:47.080+05:30Coding Ninja: c#, mvc, sql, javascript,angularjs,bi,qlikview,enterprise,architectureMy technical notes, the lessons learned, the mistakes commited, the rectification made and my journey towards understanding the technology, life and the hidden power in our own little universe.Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.comBlogger112125blogspot/tKLRIhttps://feedburner.google.comtag:blogger.com,1999:blog-9925548.post-19547264103734673572014-12-31T12:32:00.001+05:302014-12-31T12:32:39.347+05:30How to Switch to OpenDNS or Google DNS to Speed Up Web Browsing<a href="http://www.howtogeek.com/164981/how-to-switch-to-opendns-or-google-dns-to-speed-up-web-browsing/">How to Switch to OpenDNS or Google DNS to Speed Up Web Browsing</a>: <br /><br /><br /><br /><a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/0LSWRh98HaA" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/12/how-to-switch-to-opendns-or-google-dns.htmltag:blogger.com,1999:blog-9925548.post-14864307248197082282014-12-31T12:21:00.001+05:302014-12-31T12:21:08.396+05:30177 Days of GitHub<a href="https://ryanseys.com/blog/177-days-of-github/">177 Days of GitHub</a>: <br /><br /><br /><br /><a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/ClU8YQncsUg" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/12/177-days-of-github.htmltag:blogger.com,1999:blog-9925548.post-73473821085842932312014-12-30T23:00:00.001+05:302014-12-30T23:00:03.363+05:30How CNN, Youtube, Amazon, Etsy and Basecamp Have Evolved Their Design over the Years | Placeit Blog<a href="http://blog.placeit.net/how-websites-evolved-design/">How CNN, Youtube, Amazon, Etsy and Basecamp Have Evolved Their Design over the Years | Placeit Blog</a>: <br /><br /><br /><br /><a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/R6pPupj0gnw" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/12/how-cnn-youtube-amazon-etsy-and.htmltag:blogger.com,1999:blog-9925548.post-14289595912141903752014-12-30T22:05:00.001+05:302014-12-30T22:05:27.680+05:30Mastering Mathematics and Computer Science<div dir="ltr" style="text-align: left;" trbidi="on">I am trying to put down a list which will enable one master mathematics (self study). &nbsp;Initially this is a random list of links, but will be organized subsequently based on skill level.<br /><br /><br /><br /><span style="font-size: large;">Mastering Mathematics</span><br /><br />1. &nbsp;Algebra, Algebra 2, AP Statistics, Calculus, Calculus 2, Geometry, Pre-Calculus, Trigonomery<br /><a href="http://www.profrobbob.com/home">http://www.profrobbob.com/home</a><br /><br />UMKC: Richard Delaware<br />College Algebra:<a href="https://www.youtube.com/playlist?list=PLDE28CF08BD313B2A">&nbsp;https://www.youtube.com/playlist?list=PLDE28CF08BD313B2A</a><br />Calculus 1 -&nbsp;<a href="https://www.youtube.com/playlist?list=PLF5E22224459D23D9">https://www.youtube.com/playlist?list=PLF5E22224459D23D9</a><br /><br />2. NPTEL<br />Core Mathematics 1 (sem 1 and sem 2)<br /><a href="https://www.youtube.com/playlist?list=PLC227B27A948C1E66">https://www.youtube.com/playlist?list=PL3A87B93CB9912EC1</a><br /><br />Mathematics in India (from Vedic Period to Modern times)<br /><a href="https://www.youtube.com/playlist?list=PLbMVogVj5nJThf31TNSQzuN7zqxe7HdRN">https://www.youtube.com/playlist?list=PLbMVogVj5nJThf31TNSQzuN7zqxe7HdRN</a><br /><br />Probability and Statistics<br /><a href="https://www.youtube.com/playlist?list=PL6C92B335BD4238AB">https://www.youtube.com/playlist?list=PL6C92B335BD4238AB</a><br /><br />Mathematical Logic<br /><a href="https://www.youtube.com/playlist?list=PL2EB5662A0D455A81">https://www.youtube.com/playlist?list=PL2EB5662A0D455A81</a><br /><br /><span style="font-size: large;">Mastering Computer Science</span><br /><br />MIT: Mathematics for Computer Science<br /><a href="https://www.youtube.com/playlist?list=PLB7540DEDD482705B">https://www.youtube.com/playlist?list=PLB7540DEDD482705B</a><br /><br />The syllabus and other information can be found at the MIT opencourseware website.<br /><a href="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-042j-mathematics-for-computer-science-fall-2010/video-lectures/">http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-042j-mathematics-for-computer-science-fall-2010/video-lectures/</a><br /><br />NPTEL: Discrete Mathematical Structures<br /><a href="https://www.youtube.com/playlist?list=PL0862D1A947252D20">https://www.youtube.com/playlist?list=PL0862D1A947252D20</a><br /><br /></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/OgD-yvpN5Qg" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/12/mastering-mathematics-and-computer.htmltag:blogger.com,1999:blog-9925548.post-35761963199744798322014-07-16T15:49:00.001+05:302014-07-16T15:49:29.095+05:307 Blogs You Should Really Read If You Are A Student Programmer<a href="http://www.makeuseof.com/tag/7-blogs-really-read-student-programmer/">7 Blogs You Should Really Read If You Are A Student Programmer</a>: <br /><br /><br /><br /><a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/7QZuHkgsK-I" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/07/7-blogs-you-should-really-read-if-you.htmltag:blogger.com,1999:blog-9925548.post-45721034544081693002014-07-16T12:42:00.001+05:302014-07-16T12:42:24.875+05:30Google Online Security Blog: Announcing Project Zero<a href="http://googleonlinesecurity.blogspot.in/2014/07/announcing-project-zero.html">Google Online Security Blog: Announcing Project Zero</a>: <br /><br /><br /><br /><a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/Nmax7fUJHF4" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/07/google-online-security-blog-announcing.htmltag:blogger.com,1999:blog-9925548.post-77341667880939488232014-07-15T15:12:00.000+05:302014-07-15T15:12:03.126+05:30C# Abstract Class Vs. Interface - Building a simple rule engine<div dir="ltr" style="text-align: left;" trbidi="on">In this video post we will briefly go over the difference between abstract class and an interface. &nbsp;This is one of the most confusing concepts for beginners to understand. In the following video we will walkthrough step by step through these concepts and build a simple RuleEngine as a demo.<br /><br />Please do note that this rule engine is not fully functional and production ready, but is demonstrated to make the concepts clear.<br /><br />Please leave your constructive comments and also suggestions about future videos, if you like to have on any specific topics.<br /><br /><iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/tYbVDTTWVUA" width="560"></iframe></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/LBUV_23z0TU" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/07/c-abstract-class-vs-interface-building.htmltag:blogger.com,1999:blog-9925548.post-60543499084427189462014-06-27T11:35:00.000+05:302014-06-27T11:35:26.184+05:30HTML5 Canvas Apprenticeship - Part -4 - Drawing circles and arcs<div dir="ltr" style="text-align: left;" trbidi="on">In this video tutorial we will look at drawing some basic circle and arc. &nbsp;We will also look at how to convert from degrees to radians and viceversa as these functions uses radians instead of degrees for angles. &nbsp;In subsequent videos we will be going over these functions in details.<br /><br /><iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/XHfi2FpDgn8" width="560"></iframe></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/fWZ5l4EtPkY" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/06/html5-canvas-apprenticeship-part-4.htmltag:blogger.com,1999:blog-9925548.post-2962837660562653692014-06-26T19:00:00.003+05:302014-06-26T19:00:42.655+05:30HTML5 Canvas Apprenticeship - Part -3 - Drawing basic shapes<div dir="ltr" style="text-align: left;" trbidi="on">Let's move ahead in our HTML5 canvas video series and learn to draw basic shapes. &nbsp;In this video we will learn how to draw basic drawing elements like lines, rectangles. In the next video we will learn how to draw circles and arcs.<br /><br /><iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/hPr54zuphyw" width="560"></iframe></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/Ki2zQNryQpo" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/06/html5-canvas-apprenticeship-part-3.htmltag:blogger.com,1999:blog-9925548.post-52752220805842390462014-06-26T18:57:00.001+05:302014-06-26T18:57:38.543+05:30HTML5 Canvas Apprenticeship - Part -2 - Understanding how to set canvas size<div dir="ltr" style="text-align: left;" trbidi="on">The second post in this video series gives a simple example to understand how to set canvas size. &nbsp;Basically there are two ways to set the canvas size, using canvas elements properties and by using the CSS. &nbsp;Watch the video to understand more.<br /><br /><iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/CZb8wnYemBg" width="560"></iframe></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/MFMvp5SIJrE" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/06/html5-canvas-apprenticeship-part-2.htmltag:blogger.com,1999:blog-9925548.post-15228897773158907202014-06-26T18:54:00.003+05:302014-06-26T19:01:27.839+05:30HTML5 Canvas Apprenticeship Video Series - Part 1<div dir="ltr" style="text-align: left;" trbidi="on">Welcome back again. &nbsp;Just a short update on videos. &nbsp;I have started publishing videos on HTML5 Canvas Apprenticeship. &nbsp;The series of videos will take you &nbsp;from 0 to mastering HTML5 canvas element in no time.<br /><br />All the source code for this series is available on github @&nbsp;<a href="https://github.com/tekacademylabs/html5canvas-apprenticeship">https://github.com/tekacademylabs/html5canvas-apprenticeship</a><br /><br />Preview the first part here which cover the introduction to the series.<br /><br /><iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/0mo93FyF0Hc" width="560"></iframe></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/lRU2J1xK7ZM" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/06/welcome-back-again.htmltag:blogger.com,1999:blog-9925548.post-14531603299740627252014-06-26T18:51:00.002+05:302014-06-26T18:51:52.407+05:3001- Introduction to QlikVeiw Extensions Development Videos<div dir="ltr" style="text-align: left;" trbidi="on">Starting June 2014 I have started posting video tutorials on youtube.com. &nbsp;The first video is on QlikView extensions development and I am progressively planning to add tons of tutorials on various topics including HTML5 development, game programming, web development, mobile develpment, design patterns, single page applications and much more.<br /><br />Please be patient with the videos as I am slowly improving the quality as I learn more about the recording process.<br /><br />Enjoy the video here..<br /><br /><iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/ijWEwOyY2zU" width="560"></iframe></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/pxkQqkV8jWc" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/06/01-introduction-to-qlikveiw-extensions.htmltag:blogger.com,1999:blog-9925548.post-57421855071953878152014-03-24T18:23:00.003+05:302014-03-24T18:23:39.136+05:30maartenba/MvcSiteMapProvider<a href="https://github.com/maartenba/MvcSiteMapProvider">maartenba/MvcSiteMapProvider</a>: <br /><br /><br /><br /><a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/j1Cd7uFhHxg" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/03/maartenbamvcsitemapprovider.htmltag:blogger.com,1999:blog-9925548.post-22259993587239565232014-03-24T18:23:00.001+05:302014-03-24T18:23:11.133+05:30How to install Windows 7/Windows 8 using your pendrive (command-line installation) - Windows+8 - Windows 7<a href="http://www.tomshardware.com/faq/id-1841151/install-windows-windows-pendrive-command-line-installation.html">How to install Windows 7/Windows 8 using your pendrive (command-line installation) - Windows+8 - Windows 7</a>: <br /><br /><br /><br /><a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/NQ25ccn3ec0" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/03/how-to-install-windows-7windows-8-using.htmltag:blogger.com,1999:blog-9925548.post-81393615008314445862014-03-24T18:22:00.001+05:302014-03-24T18:22:47.741+05:30HTML5 History: Clean URLs for Deep-linking Ajax Applications<a href="http://www.codemag.com/Article/1301091">HTML5 History: Clean URLs for Deep-linking Ajax Applications</a>: <br /><br /><br /><br /><a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/CK3fiJRLCT4" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/03/html5-history-clean-urls-for-deep.htmltag:blogger.com,1999:blog-9925548.post-58031844682431060282014-03-23T21:34:00.000+05:302014-03-23T21:34:15.698+05:30Long Hiatus and Back Again<div dir="ltr" style="text-align: left;" trbidi="on">After a long hiatus, I am about to resurrect this blog. &nbsp;Watch out for interesting post.</div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/u37k5oKUIKg" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2014/03/long-hiatus-and-back-again.htmltag:blogger.com,1999:blog-9925548.post-86960876582874329492012-06-15T22:43:00.001+05:302012-06-15T22:43:26.317+05:30Back to quality education with Udacity and KhanAcademy<div dir="ltr" style="text-align: left;" trbidi="on">A slight deviation from my usual posts and this time I am reflecting on the state of education, when I was a school student and the new digital era being revolutionized by the likes of Udacity, KhanAcademy and Coursera.<br /><br />Every child goes through this phase, and its the decision that he makes, at that point, that may change the future course of his life.<br /><br />Every child has a dream and every dream has some limitations, which are constrained by our imaginations and most of which are self created. &nbsp;As a child I always wanted to study and understand mathematics and its applications, but was never able to.<br /><br />I never understood what my teacher was teaching, as it was a pure mechanical process. &nbsp;Put a formula, here and a formula there and you get the solution. &nbsp;They never made us ponder why things work the way it does.<br /><br />For me mathematics was one of most dreaded subjects and also one which I loved most, for being one of the subject on my top hate list. &nbsp;Pretty contradictions, and that's what thoughts are.<br /><br />I always wanted to master this beautiful subject, but never found a teacher. There were many teachers who used to teach, but none to educate. The most shattering thing for me with my math experience was when I was in my 5th grade, and I scored &nbsp;of &nbsp;1 point out of &nbsp;100 in my preliminary exams, because I never ever studied what was taught, because I never understood anything, and things never interested me.<br /><br />And that 1 point, I guess could be because my handwriting was good at that point in time. That's what I thought (though that was not the case, because at that time my handwriting was terrible). &nbsp;So, you could now imagine the state of mind of a 5th grader and his hope with his further math education. &nbsp;(Hope my kid won't be reading this blog after couple of years).<br /><br />Teachers are not bad, but their teaching experience faired very badly at that time. &nbsp;It's not there fault. There weren't simply any &nbsp;finishing school where teachers could polish their teaching skills based on different students needs. There are some good teachers who go out of the way to explain things, but my math teacher when I was in &nbsp;5th grade was not one of them. &nbsp;Though, it may not be teacher's fault &nbsp;and they were doing a good job, as other students were passing the exams and also the students to teachers ratio was something like 1/65. &nbsp;May be I didn't had a mathematical bent of mind.<br /><br />Somehow I passed these school exams, and luckily while I was in my 7th grade we moved to another city Kalyan (remote location in Mumbai).<br /><br />Parents thought with a change in place, my attitude towards education might change. &nbsp;And to some extent they were right, though I was not very good at math, until when I was in 10th grade.<br /><br />It was during my study in 10th grade, that I realized that math is a beautiful subject again and special thanks goes to my tuition teacher, Joy Sir (of St. Mary's classes, Kalyan), for beautifully explaining the subjects. &nbsp;And I did pretty well with math, from thereon.<br /><br />The only problem and mistake I did was in my 11th and 12th high college , I skipped math and took up a useless secretarial course (as I thought during that time secretarial course for commerce student was more useful that math and all my friends opted for this subject) and that was one of my biggest educational decision mistake that I committed. &nbsp;From thereon, I lost interest in math, and somehow passed my mandatory first year math college course and was fully involved more than hundred percent devoting my time to computer applications. &nbsp;But somehow, this lack of mathematical education, always haunted and interested me.<br /><br />And then came KhanAcademy.org. &nbsp;After about 15 years from graduating from college, I again fall in love with Math, but this time with a purpose. &nbsp;I don't want my kids, to go through the same process of lack of understanding and lack of awareness on the purpose of education and the role it can play to shape their future.<br /><br />I want them to appreciate the subject not only math, but science, economics, history, law and others. &nbsp;I rather want them to experience the subject rather than learning by rote. &nbsp;And I am very thankful to these wonderful online academies who are doing a great job.<br /><br />Now coming back to Udacity, they are special to me. &nbsp;Two new courses on statistics and discrete math is being shortly offered in the coming weeks.<br /><br /><a href="http://www.udacity.com/overview/Course/st101/CourseRev/1">http://www.udacity.com/overview/Course/st101/CourseRev/1</a><br /><a href="http://www.udacity.com/overview/Course/cs221/CourseRev/1">http://www.udacity.com/overview/Course/cs221/CourseRev/1</a><br /><br />What better opportunity will I get to test and brush up my math skill (which is very negligible) from the finest professors in the world.<br /><br />I have committed myself to complete both the courses in the next 7 weeks after it starts no matter what it takes me to complete and to get permanently rid of this math phobia. &nbsp;At least I will try.<br /><br />I have tried many Udacity courses in the past couple of months, but never completed any. &nbsp;My purpose then was to learn things which I wanted and selectively watch courses that I like. &nbsp;And I am glad I did that. &nbsp;Almost all of Udacity's courses are simply great and 100 percent educational.<br /><br />You want &nbsp;to learn programming, take CS101 and build a search engine. &nbsp;You are an intermediate programmer take CS253- Web Application Engineering and build a blog engine and wiki in the process, understand caching and other useful aspects of computer science. &nbsp;You want some advanced stuff, take CS387 - Applied Cryptography.<br /><br />I guarantee you will love these courses. &nbsp;Even though the language of programming used is Python, but that is of least concerned as what matters most is the concept and ideas that you learn during this course.<br /><br />Also, its always better to know yet another language apart from the language you program for your bread and butter.<br /><br />Also, there are many more courses that are coming up and I am sure you will find your choice of course.<br /><br />I will highly encourage other people who are on the same state of mind like me to try these courses out. &nbsp;Not only for yourself but for others around you, who may require genuine quality guidance from someone who has gone through this phase of life.<br /><br />Hopefully education will not be the same again. Learnings will be fun and enjoyable. &nbsp;And that may be the precise reason &nbsp;why I like teaching and taking up some professional training activity from time to time, because I want people to understand the crux of the matter. <br /><br />The key thing is to understand the foundation of any subject , polish your basic skills, learn to communicate effectively , write better, and you will grow into a exceptional professional in any field which you may choose to study.<br /><br />Another thing &nbsp;that I will do is to blog all my learnings from this courses, as micro books on my upcoming website <a href="http://www.ownabook.org/">http://www.ownabook.org/</a><br /><br />I hope my mistakes could be a learning points for the kids around me.<br /><br />Happy learning!<br /><br />P.S: &nbsp;This post in no way is trying to undermine the importance of teacher nor is addressed to any specific person. &nbsp;These are just my thoughts and my perception based on what I have experienced and thought of sharing. &nbsp;No hard feelings for any one. &nbsp;I love and respect my teachers and it was because of the support of some great teachers who had given me opportunity to try and work out things going out of their way that enabled me to get confident in my area of study.</div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/02FVUWRRqQI" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2012/06/back-to-quality-education-with-udacity.htmltag:blogger.com,1999:blog-9925548.post-13578239915447131062012-06-11T18:14:00.000+05:302012-06-11T18:14:10.631+05:30Quickly build a jQuery watermark plugin with HTML5 and modenizr support<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">In this edition of blog post, we will quickly build a jQuery watermark pluigin for input controls. &nbsp;This is an adapted post from &nbsp;<a href="http://uniquemethod.com/html5-placeholder-text-jquery-fallback-with-modernizr">http://uniquemethod.com/html5-placeholder-text-jquery-fallback-with-modernizr</a>. &nbsp;I have quickly refactored the code as a jQuery plugin. &nbsp;The author in the above blog post has done a great job of summarizing the concept.<br /><br />A watermark or placeholder text is an indicator by input controls as to what data could be enter in the field. &nbsp;It's kind of a hint to user entering the data.<br /><br />HTML5 has native support for watermark in the form of "placeholder" attribute. &nbsp;Any text that you put in the placeholder attribute will show as watermark in modern browsers.<br /><br />For browsers that doesn't yet support HTML5, jQuery comes to the rescue. &nbsp;Also, we are using Modernizr for feature detection.<br /><br />Modernizr is an excellent feature detection library, with which we can detect for support of modern standard by browsers.<br /><br /><br /></div><div>You can see a working version here</div><iframe height="240" src="http://jsfiddle.net/rajeshpillai/UG7yd/3/embedded/" style="height: 300px; width: 100%;" width="320"></iframe><br /><br />You can use this plugin, in the following manner.<br /><br /><span class="js-variable" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">$</span><span class="js-punctuation" style="color: #666666; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">(</span><span class="js-string" style="color: #aa2222; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">".placeholder"</span><span class="js-punctuation" style="color: #666666; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">)</span><span class="js-punctuation" style="color: #666666; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">.</span><span class="js-property" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">watermark</span><span class="js-punctuation" style="color: #666666; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">(</span><span class="js-punctuation" style="color: #666666; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">)</span><span class="js-punctuation" style="color: #666666; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">;</span><br /><div style="text-align: -webkit-auto;"><span style="color: #666666; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;"><span style="font-size: 12px; line-height: 15px;"><br /></span></span></div><div style="text-align: left;">The above jQuery code finds all elements with a class of "placeholder" and applies the watermark() function to it.</div><div style="text-align: left;"><br /></div><div style="text-align: left;">The sample input element is shown below.</div><div style="text-align: left;"><br /></div><div style="text-align: left;"><span class="whitespace" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">&nbsp;</span><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">&lt;</span><span class="xml-tagname" style="color: #aa00bb; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">label</span><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">&gt;</span><span class="xml-text" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">Name</span><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;"><span class="xml-tagname" style="color: #aa00bb; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">label</span><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">&gt;</span><br style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;" /><span class="whitespace" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">&nbsp;</span><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">&lt;</span><span class="xml-tagname" style="color: #aa00bb; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">input&nbsp;</span><span class="xml-attname" style="color: blue; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">class</span><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">=</span><span class="xml-attribute" style="color: #228811; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">"placeholder"&nbsp;</span><span class="xml-attname" style="color: blue; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">placeholder</span><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">=</span><span class="xml-attribute" style="color: #228811; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">"Enter your full name."&nbsp;</span><span class="xml-attname" style="color: blue; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">type</span><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">=</span><span class="xml-attribute" style="color: #228811; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">"text"&nbsp;</span><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;">/&gt;</span></span></div><div style="text-align: left;"><span class="xml-punctuation" style="font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 15px; text-align: -webkit-auto;"><br /></span></div><div style="text-align: left;">Do note the above input element has a class of &nbsp;"placeholder" and also a placeholder attribute which is set to "Enter you full name". &nbsp;This placeholder text will be shown as watermark in the input element. &nbsp;Also, HTML5 browser directly understands and render this placeholder attribute appropriately.<br /><br />Rather than bloating this post, I have added appropriate comment in the jsfiddle. &nbsp;In case anyone needs further&nbsp;clarifications, please drop a comment.</div><div style="text-align: left;"><br /></div><div style="text-align: left;">Enjoy~!.</div></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/gKsw5rQFGb0" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com0http://rajeshpillai.blogspot.com/2012/06/quickly-build-jquery-watermark-plugin.htmltag:blogger.com,1999:blog-9925548.post-12654348677504651092012-06-08T00:01:00.000+05:302012-06-08T09:10:12.035+05:30A new startup initiative: Ownabook.org - A community site<div dir="ltr" style="text-align: left;" trbidi="on">Lately there has been a traction from my usual work, and was thinking about starting something very different and helpful to the community. &nbsp;Various ideas where jumping in my mind, but as usual ideas are ideas and of no use unless it sees the light of the day. &nbsp; Did tried attempt at various small open source projects, in PHP, rails, MVC, jQuery, but never completed any of them fully. &nbsp;Something always stopped me at the last moment.<br /><br />But the good thing is there was tremendous&nbsp;learning&nbsp;in all these activities. &nbsp;Learned a ton. &nbsp;But one thing always hounded my mind, my incomplete OSS projects.<br /><br />So, this time, didn't thought much, &nbsp;just jumped straight in, took the code editor and begin designing my ideas as code. &nbsp;One of the outcome is <a href="http://ownabook.org/" target="_blank" title="Own a book">http://ownabook.org</a>, a community initiative were some lucky bookwormers may get cool books, absolutely free. &nbsp;That's not all, once the site is up, there will be unique features and opportunities to grab.<br /><br />The idea behind this is to keep the reading habits alive in people, and doing my bit in the way. &nbsp;It's not about winning a free, book, its about what you do with it. &nbsp;It's about sharing. &nbsp;As time goes by, there will be intelligent quizzes, tips, puzzles, which keeps your brain tickle. &nbsp;Keep it alive, and in the process win a book. &nbsp;Those things are still in my head, but will soon come out in the form of code.<br /><br />I will definitely release this as OSS, once I get all basic things done correctly, as I don't want to share bad code. &nbsp; Believe me there will be some real gems in the code, in terms of design, coding pattern and much more, which definitely I have learned from the ever helping communities in the internet.<br /><br />Also, planning to setup up a place in the site to offer books to needy students, children, in remote places, but don't have any idea about how go about doing that.<br /><br />If anyone reads this post, and knows something in this direction, then do leave a comment.<br /><br />Enough ranting.... regular post will resume soon. &nbsp;Plan to finish Javascript series and then start with MVC 4.<br /><br />Enjoy reading!</div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/4p7lYKNZHZQ" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com1http://rajeshpillai.blogspot.com/2012/06/new-startup-initiative-ownabookorg.htmltag:blogger.com,1999:blog-9925548.post-23848343794253295592012-04-09T10:59:00.000+05:302012-06-11T07:29:17.201+05:30Building a jQuery PPT like presentation - Part 1<div dir="ltr" style="text-align: left;" trbidi="on">This is more a video post and it covers how to build a simple PPT like presentation using jQuery. This is very elementary at this stage and we will incrementally add features to this.<br /><br />The first version is a very rough one and cover elementary ideas and proof of concept.<br /><br />Hope you like this. Do please note the video doesn't have any voice as I am still improving my recording skills (and also having a bad throat since couple of days). In any case, I do think action speaks louder that words.. (though this is just an excuse).<br /><br />The URL for the source code is at <a href="http://jsbin.com/ovaxop/edit#source" target="_blank" title="jQuery Presentation Object">http://jsbin.com/ovaxop/edit#source</a><br /><br /><iframe frameborder="0" height="360" src="http://www.youtube.com/embed/fk4k6e-JoNw" width="600"></iframe></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/r5S_AUq4LOo" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com8http://rajeshpillai.blogspot.com/2012/04/building-jquery-ppt-like-presentation.htmltag:blogger.com,1999:blog-9925548.post-64473479427844920972012-03-28T13:53:00.000+05:302012-06-11T20:02:20.911+05:30JavaScript Function Spaghetti Code<div dir="ltr" style="text-align: left;" trbidi="on">In this post we will have a look at the spaghetti code created by functions and how to avoid them. First lets quickly go through why this is a cause of concern.<br /><br /><a href="http://rajeshpillai.tekacademy.com/wp-content/uploads/2012/03/spaghetti-code-1.png"><img alt="" class="alignnone size-full wp-image-104" height="223" src="http://rajeshpillai.tekacademy.com/wp-content/uploads/2012/03/spaghetti-code-1.png" title="spaghetti-code-1" width="400" /></a><br />Problems with Function Spaghetti Code<br /><ul><br /><li>Variables/ functions are added to the global scope</li><br /><li>The code is not modular</li><br /><li>There's potential for duplicate function names</li><br /><li>Difficult to maintain</li><br /><li>No namespace sense.</li></ul><br />Let's take for example the following set of functions and check whats the issue with them.<br /><pre>// file1.js</pre><br /><pre>function saveState(obj) {<br />&nbsp; &nbsp; // write code here to saveState of some object<br />&nbsp; &nbsp; alert('file1 saveState');<br />}</pre><br /><pre>// file2.js (remote team or some third party scripts)<br />function saveState(obj, obj2) {<br />&nbsp; &nbsp; &nbsp;// further code...<br />&nbsp; &nbsp; alert('file2 saveState");<br />}</pre><br />Now the problem here is if your application is using saveState() then the execution of saveState() which one to call is determined by the script loading. &nbsp;The later script overrides same functions already defined by earlier script.<br />For e.g.<br /><br />If this script is references as<br /><pre>&lt;script src="file1.js" type="text/javascript"&gt;&lt;/script&gt;<br />&lt;script src="file2.js" type="text/javascript"&gt;&lt;/script&gt;</pre><br />Then the function defined in file2.js will be overriding the one defined in file1.js. If you change the order the order of overriding changes. So, you can see this is a cause of concern if you have a n application which depends of javascripts both internal and from third party. One way to solve this problem is with closures.<br /><br /><h2> Closure</h2><blockquote>...an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. ~ Douglas Crockford</blockquote>In JavaScript yo can nest function and the nested function has access to all the variables and functions defined by its parent. This seems very simple and straightforward, but this is a very complex concept under the hood. Its like a function still holds the variables around its environment even after the function seems out of scope. Let us quickly go through an example.<br /><br /><pre>// The getDate() function returns a nested function which refers the 'date' variable defined <br />// by outer function getDate()<br />function getDate() {<br /> var date = new Date(); // This variable stays around even after function returns<br /><br /> // nested function<br /> return function () {<br /> return date.getMilliseconds();<br /> }<br />}<br /><br />Now if you call this function as shown below, you will see that the inner function holds on <br />the the date variable.<br /><br />// Once getDate() is executed the variable date should be out of scope and it is, but since <br />// the inner function<br />// referenes date, this value is available to the inner function.<br />var dt = getDate();<br /><br />alert(dt());<br />alert(dt());<br /><br /><br />The output of the above alert will be the same value of date.getMilliseconds();</pre><br />Let's take another look at closure and use a module kind of pattern..<br /><br /><pre>var MyDate = function () {<br /> var date = new Date();<br /> var getMilliSeconds = function () {<br /> return date.getMilliseconds();<br /> }<br />}<br /><br />var dt = new MyDate();<br /><br />alert(dt.getMilliSeconds()); // This will throw error as getMilliSeconds is not accessible.</pre><br />Make the following changes<br /><pre>var MyDate = function () {<br /> var date = new Date();<br /> var getMilliSeconds = function () {<br /> return date.getMilliseconds();<br /> };<br /> return {<br /> getMs : getMilliSeconds<br /> }<br />}</pre><br />What you are doing above is encapsulating all your logic in a namespace, in this case MyDate, and only<br />returning public methods to the outside world as an object literal.<br /><br />You can use this as shown below..<br /><br /><pre>var dt = new MyDate();<br />alert(dt.getMs()); // This should work.</pre><br />The above construct is very similar to "The Revealing Module Pattern", which we will cover in <br />subsequent posts.<br /><br />Now let's solve the original problem of saveState.<br /><br /><pre>function App() {<br /> var save = function (o) {<br /> // write code to save state here..<br /> // you have acces to 'o' here...<br /> alert(o);<br /> };<br /> <br /> return {<br /> saveState: save<br /> };<br />}<br /><br />var app = new App();<br /><br />app.saveState({ name: "rajesh"});</pre><br />Your application can use this as follows, without worrying about other saveStates floating around...<br /><br /><pre>var app = new App();<br />app.saveState({ name: "rajesh"});</pre><br />To conclude, we had look at why function spaghetti coding is bad and how to avoid this by using closure and module pattern.<br /><br />In subsequent post we will look at how to create namespace and dig into deeper of the module pattern.<br /><br />Hopefully you will find this useful.</div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/oFTnjyTG3UE" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com9http://rajeshpillai.blogspot.com/2012/03/javascript-function-spaghetti-code.htmltag:blogger.com,1999:blog-9925548.post-8147010126294996102012-03-23T13:19:00.000+05:302018-03-15T19:08:23.645+05:30JavaScript - The this keyword<div dir="ltr" style="text-align: left;" trbidi="on"><strong>"this" is one of the most misunderstood construct in JavaScript. &nbsp;To understand this first lets go through how to create a construction function in JavaScript. &nbsp;A constructor function is a function which is used to create instances of objects in JavaScript.</strong><br /><br />You define a constructor function using the same notation that you use to define a normal JavaScript function. &nbsp;The convention to follow is to capitalize the first letter of the function name.<br /><br />This requirement is not enforced by the JavaScript language but it is a generally accepted practice and there are many benefits which we will shortly discuss.<br /><br />Let's define a constructor function to hold our menu information.<br /><br /><pre class="csharpcode">function Menu() {<br /><br />}</pre><br />So, in the above snippet you have a constructor function named Menu defined. At present this function doesn't do anything good.<br /><br />Let's see how to invoke this function<br /><br /><pre>var menu = new Menu();</pre><br />Let's add some public properties to this function.<br /><pre class="csharpcode">function Menu() {<br /> this.menuName = "File";<br />}</pre><br />Let's create an instance and see how we can use this.<br /><br /><pre class="csharpcode">var menu = new Menu();<br />alert(menu.menuName);</pre><br />If you run the above code, you should get an alert with a value "File". &nbsp;This is not so interesting.<br /><br />Let's pass, in the name information to the function.<br /><br /><pre class="csharpcode">function Menu (name) {<br />&nbsp; &nbsp; this.menuName = name;<br />}</pre><br />Now you can call this function as shown below.<br /><br /><pre class="csharpcode">var menu = new Menu("file");<br />alert (menu.menuName); // You will still get an alert with a value 'file'</pre><br />Isn't this interesting now. &nbsp; Now the point to remember is that nothing in JavaScript prevents you from invoking this function directly.<br /><br />For e.g.<br /><br /><pre class="csharpcode">var menu = Menu("file");</pre><br />What do you think the output of the above will be if you do an<br /><pre>alert(menu.menuName);</pre><br />You will get an error similar to "Uncaught TypeError: Cannot read property 'menuName' of undefined".<br /><br />You can see this in action here<br /><br /><iframe height="240" src="http://jsfiddle.net/rajeshpillai/DC8LZ/embedded/" style="height: 300px; width: 100%;" width="320"></iframe><br /><br /><br />Why? &nbsp;Any idea? &nbsp;Also, there is a side effect to this. &nbsp; You accidentally created a global variable "menuName".<br /><br />You don't believe me. &nbsp;Try doing an<br /><br /><pre class="csharpcode">alert(menuName); &nbsp; // OR<br />alert(window.menuName);</pre><br />Ok. Lets get a bit deeper into how this thing work. &nbsp;By default a constructor functions always returns an instance of the function object &nbsp;on which the "new" is called upon.<br /><br />If you directly invoke a constructor function without creating a new instance, then that function is executed rather than an object being constructed. So, the return value of that function invocation will be undefined as you are not explicitly returning any value from the function.<br /><br />So, all assignment to "this". goes to the global window object and you accidentally create globals.<br /><blockquote>Always name your constructor function starting with an uppercase.</blockquote>The primary reason why this is an issue is because JavaScript don't force you to construct object of constructor function as for JavaScript execution engine there is no difference between the two.<br /><br />This is where naming convention plays an important role. Name all your constructor function starting with an uppercase letter. This way it will be very easy for you to detect if there is any unintentional misuse of the constructor function. Besides there are certain tools like "jslint" which warns you if you directly invoke a constructor function which has a name starting with uppercase.<br /><br />Ok, so how to avoid this problem. &nbsp;What we want is whenever the user uses the Menu function either as direct function call or as a constructor function we need the function to return a menu object to the user.<br /><br />A simple solution is to return an anonymous object from the constructor function with required properties attached to it.<br /><br /><pre>function&nbsp;Menu(name)&nbsp;{<br />&nbsp; &nbsp;&nbsp;return&nbsp;{<br />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;menuName&nbsp;:&nbsp;name<br />&nbsp; &nbsp;&nbsp;};<br />}</pre><br />We can use this function either by direct call, or through constructor invocation, we will always get the correct object, without creating globals.<br /><br />Why this works is because constructor function by default returns the instance of the object on which it is invoked. &nbsp;The other interesting thing is we can return any thing from this constructor function. &nbsp;We will use this feature to return correct object back to the caller.<br /><br /><pre>var&nbsp;menu&nbsp;=&nbsp;Menu("file"); / called directly<br />alert(menu.menuName); // alerts 'file'<br /><br />var&nbsp;menu1&nbsp;=&nbsp;new&nbsp;Menu("Help"); // call with new<br />alert(menu1.menuName); // alerts 'Help'<br /><br />// alert(menuName); &nbsp;// See no, globals</pre><br /><h2>this Gets tricky</h2><br />Take this example below. We have a simple function which returns stock quote. Pretty simple example in this case.<br /><br /><pre>function StockQuote() {<br /> this.quote= "12,13,343,343";<br /> this.getQuote= function() {<br /> //this is expected to be a reference to the current instance<br /> return this.quote; <br /> }<br />}</pre><br />Now lets' say we need to get the quote in the next 3 seconds..<br /><br /><pre>var quote = new StockQuote();<br />// call the getQuote function in 3 seconds.<br />setTimeout(quote.getQuote, 3000);</pre><br />Many beginner JS dev may think this may work, but it won't. It'll give an error saying that quote is undefined. This is because there is no binding of functions to instances in JavaScript. Whenever the instance isn't explicitly stated, then "this" becomes windows object (at least in the browser, as js runs in other environment as well). Writing quote.getQuote() indicates that you want "this" to belong to quote, so it will work correctly. However, the setTimeout function only has a reference to that function. When it calls it, after 3 seconds, it is not aware of "quote", so JavaScript sets this to window.<br /><br /><h2>"Fixing" this</h2>There are several ways of forcing this to be what you intend to be and many of them uses some unique features of JavaScript.<br /><br />The three important ones are<br /><ul><li>apply</li><li>call</li><li>bind</li></ul><br />apply is a member of every function. It says "invoke this function on this object (change the context of the object).<br /><br /><br />Before solving the setTimeout problem lets briefly have a discussion on Lexical Scroping in JavaScript.<br /><br />Lexical scoping allows you to access local variables in a parent function by the child functions. i.e. if a function is defined withing another function, it can access its own local variables as well as those of the function it was defined within.<br /><br />Now let's solve the setTimeout problem with Lexical scoping.<br /><br /><pre>var myQuote = new Quote();<br />setTimeout( function() {<br /> myQuote.getQuote();<br />}, 3000);</pre><br />We created a new anonymous function which we are passing to the setTimeout. Our new function can access myQuote, so it just applies it to the getQuote function.<br /><br />Solving setTimeout problem using "bind".&nbsp; Here "bind" is more useful than the other two methods.<br /><br /><pre>var myQuote = new Quote();<br />setTimeout(myQuote.getQuote.bind(myQuote), 3000);</pre><br />The bind() method returns a new method with the context changed based on the first parameter that is passed.<br /><br />The difference between call and apply is subtle and only varies in the way parameters are passed. apply requires the second parameter to be array which represents the parameters to the function , and call accepts an argument list.<br /><br />Let's quickly look at the syntax of both the functions.<br /><pre>fun.call(object, arg1, arg2, ....);<br /><br />fun.apply(object, [argsArray]);</pre><br />Hope you have enjoyed this post.<br /><br />In subsequent post we will look at how to avoid this edge cases by using various well known pattern and practices.</div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/5S__IVyx6TU" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com5http://rajeshpillai.blogspot.com/2012/03/javascript-this-keyword.htmltag:blogger.com,1999:blog-9925548.post-29424211354043278872012-03-23T10:09:00.000+05:302012-06-08T09:10:33.894+05:30JavaScript ScopeIn this blog post we will dig deeper into various aspects of JavaScript scope. This is a pretty interesting topic and also a topic which confuses many beginning JavaScript programmers.<br/><br/>Understanding JavaScript scope helps you write bug free programs (hmm.. atleast helps your troubleshoot things easily)<br/><br/>Scope control the visibility and lifetimes of variables and parameters. This is important from the perspective of avoiding naming collisions and provides memory management service.<br/><br/>Unlike other languages, JavaScript does not have block level scope. For e.g. take for instance the following piece of c# code.<br/><pre class="csharpcode">public void Main () {<br/> int a = 5;<br/> if (true) {<br/> int b = 10;<br/> }<br/> // This will throw compile time error as b is not defined<br/> // and not within the scope of function Main();<br/> Console.WriteLine(b);<br/>}</pre><br/>If you write the same code in JavaScript, then the value of 'b' will be available outside the 'if' block. The reason for this is JavaScript does not have block level scope. Scopes works at the function level and because of a feature called 'hoisting' all variable declaration in JavaScript is moved to the top of the function.<br/><br/>You can read more about hoisting here <a title="JavaScript Hoisting" href="http://rajeshpillai.tekacademy.com/hoisting/" target="_blank">http://rajeshpillai.tekacademy.com/hoisting/</a><br/><pre class="csharpcode">function scopeDemo() {<br/> var a = 5;<br/> if (true) {<br/> var b = 10;<br/> }<br/> // This will work even though 'b' is defined inside if block because of 'hoisting'<br/> alert(b);<br/>}<br/><br/>scopeDemo(); // Invoke the function</pre><br/><blockquote>Remember, Scope in JavaScript is at function level and not block level.</blockquote><br/><div>So, contrary to popular guidelines of most programming lanaguage to declare variables as late as possible, in JavaScript it is recommended to declare all your variables as early as possible.</div><br/><div></div><br/><address>Happy Scoping !!!</address><br/><div></div><br/><div>You can try out the demo here<br/><iframe style="width: 100%; height: 300px;" src="http://jsfiddle.net/rajeshpillai/zQj5n/embedded/" width="320" height="240"></iframe></div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/FQAYXbIZErA" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com28http://rajeshpillai.blogspot.com/2012/03/javascript-scope.htmltag:blogger.com,1999:blog-9925548.post-5025621341434985972012-03-22T19:14:00.000+05:302012-06-11T20:05:18.639+05:30Hoisting<div dir="ltr" style="text-align: left;" trbidi="on">Hoisting is one of the feature in JavaScript that puzzles many beginners and intermediate developers. &nbsp;Hoisting is a feature wherein all the variables are moved to the outermost scope, which is function, in JavaScript. &nbsp;This may sometimes result in seemingly strange&nbsp;behavior.<br /><br />Before and after hoisting<br /><br /><a href="http://rajeshpillai.tekacademy.com/wp-content/uploads/2012/03/hoisting-01.png"><img alt="" class="alignnone wp-image-16" height="301" src="http://rajeshpillai.tekacademy.com/wp-content/uploads/2012/03/hoisting-01.png" title="hoisting-01" width="400" /></a><br /><br /><br /><br />The output of the above program is an alert with a value of 10. &nbsp;Traditional logic would have lead us to believe that the value of alert should be undefined. &nbsp;But because of hoisting the variable is moved to the top of function declaration. &nbsp;Its important to realize that only the variable declaration is moved and not the&nbsp;initialization.<br /><blockquote>Recommendation: Always declare your variables at the top of the function scope.</blockquote><br />Similar to variable hoisting we also have function hoisting. &nbsp;Function hoisting has different behaviors based on the fact if the function is an expression or a declaration.<br /><br />A function is an expression if it is assigned to a variable. &nbsp;The assignment may also hold an anonymous or named function. &nbsp; A function declaration is fully hoisted whereas a function expression has the hoisting behaviour of the variables as seen above.<br /><br />Checkout the jsfiddle demo for a running application.<br /><iframe height="240" src="http://jsfiddle.net/rajeshpillai/e6eLv/1/embedded/" style="height: 300px; width: 100%;" width="320"></iframe><br /><br />Watch out for next post where we will be demystifying "scope" in JavaScript.</div><img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/O7W414sbq38" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com3http://rajeshpillai.blogspot.com/2012/03/hoisting.htmltag:blogger.com,1999:blog-9925548.post-88733573979414287532012-03-22T12:38:00.000+05:302012-06-08T09:10:33.919+05:30JavaScript for Web and Library DevelopersThis is my first blog post on my home domain and in this series of posts I will explore various facets of JavaScript language that will help us become better programmers. The idea is tear apart the language and understand how to use the features and build libraries like jquery, knockoutjs, backbonejs.<br/><br/>The idea is not to replicate this libraries, but understand the inner workings using better JavaScript coding practices, design principles and thereby make the web a better place to visit..<br/><br/>We will be covering the following topics, though not in order and there may be addition to this list.<br/><ul><br/> <li>Foundations</li><br/> <li>Patterns</li><br/> <li>Closure</li><br/> <li>this keyword</li><br/> <li>Hoisting</li><br/> <li>Anonymous function</li><br/> <li>Currying</li><br/> <li>Server side JavaScript</li><br/> <li>Canvas</li><br/> <li>etc.</li><br/></ul><br/>Hope you will enjoy this journey with me!<img src="http://feeds.feedburner.com/~r/blogspot/tKLRI/~4/cwedl4Z_97s" height="1" width="1" alt=""/>Rajesh Pillaihttp://www.blogger.com/profile/08436753475330620503noreply@blogger.com6http://rajeshpillai.blogspot.com/2012/03/javascript-for-web-and-library.html