<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:openSearch="http://a9.com/-/spec/opensearch/1.1/" xmlns:blogger="http://schemas.google.com/blogger/2008" xmlns:georss="http://www.georss.org/georss" xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr="http://purl.org/syndication/thread/1.0" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0"><channel><atom:id>tag:blogger.com,1999:blog-34374221</atom:id><lastBuildDate>Fri, 17 May 2013 00:24:14 +0000</lastBuildDate><category>nodejs</category><category>geekabyte</category><category>JProwork</category><category>Prowork</category><category>javascript</category><category>java</category><category>reddit</category><category>Snippets</category><category>closure</category><title>geekAbyte</title><description>Codes and Rants</description><link>http://geekabyte.blogspot.com/</link><managingEditor>noreply@blogger.com (dade)</managingEditor><generator>Blogger</generator><openSearch:totalResults>78</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/Geekabyte" /><feedburner:info uri="geekabyte" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-6065612063273387808</guid><pubDate>Tue, 30 Apr 2013 09:11:00 +0000</pubDate><atom:updated>2013-04-30T23:55:52.422+01:00</atom:updated><title>April 30, 2013</title><description>&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;This would be the first of my monthly recaps.&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;I intend this to be one of the avenues I sprinkle some
personal touch on this blog: a break from my seemingly impersonal technical
post and rants. I hope I get to sustain it. :)&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;span style="font-family: inherit;"&gt;&lt;b&gt;Trip to Nigeria&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;I was back in Nigeria from 22th March to 5th April. It
did not feel as if I have been away for that long (don’t know if that is a good or bad thing). But the trip was nice. Met up with family and friends, and took
a break from the gray weather of the Netherlands! :p&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;i&gt;&lt;span style="font-family: inherit;"&gt;Hung out at CChub…for
the first time!&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/i&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;Was already out of the country by the time &lt;/span&gt;&lt;a href="http://cchubnigeria.com/" style="font-family: inherit;"&gt;CChub&lt;/a&gt;&lt;span style="font-family: inherit;"&gt; (Co Creation Hub) was kicking
off, so it has always been at the top of my list… a really “must do list”… to pay
CChub a visit whenever am in the country. I did. &lt;/span&gt;&lt;span style="font-family: inherit;"&gt;How could I have not? &amp;nbsp;:)&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;Cchub is as I imagined it to be. I am really
excited that such a space exists, at least if for nothing else (creating
an open innovation ecosystem, Pre-incubation to &lt;/span&gt;start-ups&lt;span style="font-family: inherit;"&gt;&amp;nbsp; gingering
the Tech. community etc.), for providing a shared office space&amp;nbsp;&lt;/span&gt;with constant power and internet&lt;span style="font-family: inherit;"&gt;&amp;nbsp;developers.&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;i&gt;&lt;span style="font-family: inherit;"&gt;Gtbank sucks!&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/i&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;Like really. The customer friendliness of the bank has taken
a rather sad dip. Gtbank used to be the friendly bank: staffs willing to help, smiling and courteous and all; but my experience at the bank was really disheartening. Frowning and
saucy staffs was the order of the day. Sad!&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;Then long queues have started creeping into Gtbank.&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;I spent 2 hours at one of the
Gtbank branch in Ibadan! Reminds me of the horrors of having to go to Union
bank/First bank back then!&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;Not happy that Gtbank is going down this way. :(&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;i&gt;&lt;span style="font-family: inherit;"&gt;Inverters have gone
mainstream!&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/i&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;Well, that&amp;nbsp;&lt;/span&gt;isn't&lt;span style="font-family: inherit;"&gt;&amp;nbsp;surprising..is it?&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;And...&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;i&gt;MTN still sucks!&lt;/i&gt;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;Need
I say more?&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;span style="font-family: inherit;"&gt;&lt;b&gt;Cologn and Bonn...A nice weekend&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;The next weekend after I got back from Nigeria saw me in Germany (&lt;/span&gt;Cologne&lt;span style="font-family: inherit;"&gt;&amp;nbsp;and Bonn). Hung out with a couple of colleagues I worked with last year on
AIESEC International. It was nice to see everyone is fine and doing good. Meet
some other guys in Cologne that were really into rap music...kindred spirits, we are,
I’ll say and we spent some nice&amp;nbsp;time
bopping heads to some Biggie, Coolio, ‘Pac, 50, Dre and Kriss Kross.&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;While in Germany, I even got to &lt;a href="https://twitter.com/dadepo/status/326310114162266112"&gt;compose a poem&lt;/a&gt;…while in a club :)&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;span style="font-family: inherit;"&gt;&lt;b&gt;SimpleJSMap&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;April saw me making &lt;a href="http://geekabyte.blogspot.nl/2013/04/simplejsmap.html"&gt;simpleJsMap&lt;/a&gt; public. It’s A MAP-like implementation that I wrote in Javascript that makes saving stuffs on the client side easier via keys and values.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;span style="font-family: inherit;"&gt;&lt;b&gt;JProwork&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;I also completed most of the work on &lt;a href="http://geekabyte.blogspot.nl/2013/04/jprowork-ready-to-go.html"&gt;JProwork and its ready to go&lt;/a&gt;. JProwork is a Java API
wrapper for &lt;a href="http://prowork.me/"&gt;Prowork&lt;/a&gt;. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;b&gt;&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;span style="font-family: inherit;"&gt;&lt;b&gt;Kicked the Facebook
Addiction&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;April is the month I eventually managed to rid myself off the
attention sucking and time wasting and zombie turning Facebook! It was getting
too much. It was like an addiction and it was getting frustrating. It got to
the point that I&amp;nbsp;&lt;/span&gt;couldn't&lt;span style="font-family: inherit;"&gt;&amp;nbsp;concentrate on a task at work for 30 minutes straight
without having the urge to go check Facebook. At that point it became obvious it
was detrimental to my well-being and I needed to kick it out. I toyed with the idea of totally deleting my account but kept on holding back at the final stages; all
thanks to Facebook’s various tactics and emotional blackmailing during the deletion process.&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;So instead of deleting, I trained my will power to totally
get rid of Facebook. And I did it. I feel a lot better, less drained and
focused now.&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;span style="font-family: inherit;"&gt;&lt;b&gt;Queens Day!&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;Yes today is April 30! And in Netherlands it’s the &lt;a href="http://en.wikipedia.org/wiki/Queens_Day"&gt;Queen’s day&lt;/a&gt;! But in Amsterdam, its not just Queen's Day it is one hell of a&lt;a href="http://www.iamsterdam.com/en-GB/experience/queens-day/whats-on/queens-day-parties"&gt; party&lt;/a&gt;! Somewhat a street carnival.
Everyone &lt;a href="http://25.media.tumblr.com/tumblr_m3ahr9dNSH1r5rdv2o1_500.jpg"&gt;dressed in orange&lt;/a&gt;, on the streets, marijuana smoking, party rocking, and Liquor
flowing! &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;It’s crazy!&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;So you guessed it, once I press the publish link on this
post, I am hitting the streets too!&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;And if you ask me, it is sure a nice way to bring April to an End :)&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/m6OV7AC3yRw/april-30-2013.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2013/04/april-30-2013.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-92547307187367338</guid><pubDate>Sat, 27 Apr 2013 08:47:00 +0000</pubDate><atom:updated>2013-04-27T13:51:25.708+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">Prowork</category><category domain="http://www.blogger.com/atom/ns#">java</category><category domain="http://www.blogger.com/atom/ns#">JProwork</category><title>JProwork Ready to Go</title><description>&lt;b style="font-family: inherit;"&gt;JProwork&lt;/b&gt;&lt;span style="font-family: inherit;"&gt; is a Java wrapper for Prowork.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;b style="font-family: inherit;"&gt;Prowork &lt;/b&gt;&lt;span style="font-family: inherit;"&gt;itself is an intuitive project management app that makes team collaboration easy. It was launched 2011 at&amp;nbsp;&lt;/span&gt;Start-up&lt;span style="font-family: inherit;"&gt;&amp;nbsp;Weekend in Nigeria. It recently won the&amp;nbsp;&lt;/span&gt;&lt;a href="http://blog.prowork.me/post/43976116387/prowork-wins-apps4africa-2012" target="_blank"&gt;Apps4Africa 2012: Business Challenge&lt;/a&gt;.&lt;span style="font-family: inherit;"&gt;&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt; &lt;span style="font-family: inherit;"&gt;For more information, check: &lt;a href="http://prowork.me/about" target="_blank"&gt;About Prowork and the team behind it&lt;/a&gt;&amp;nbsp;and &amp;nbsp;&lt;a href="http://prowork.me/how" target="_blank"&gt;How it works&lt;/a&gt;.&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Overview&lt;/b&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;JProwork is then a Java wrapper for Prowork’s API. It encapsulates the API calls to Prowork and exposes Prowork’s entities as Java objects to the developer.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt; &lt;span style="font-family: inherit;"&gt;As can be seen below:&lt;/span&gt;&lt;br /&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="http://1.bp.blogspot.com/-dO1Zz8gH85w/UXuRffrrqMI/AAAAAAAAAXE/5XAxyaTiql0/s1600/jprowork-geekabyte_screenshot.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" src="http://1.bp.blogspot.com/-dO1Zz8gH85w/UXuRffrrqMI/AAAAAAAAAXE/5XAxyaTiql0/s1600/jprowork-geekabyte_screenshot.png" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt; &lt;br /&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;/div&gt;
&lt;span style="font-family: inherit;"&gt;It sure would make developing on Prowork faster with Java.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt; &lt;span style="font-family: inherit;"&gt;JProwork has been a weekend project for a couple of weeks now and right now it is done as far as covering the existing Prowork's API is concerned. Just need to put some structure here and there regarding versioning before we can have a first official release. But in the meantime you can grab the Source code from &lt;a href="https://github.com/dadepo/jprowork/tree/develop" target="_blank"&gt;Github&lt;/a&gt; and to give it a spin, compile the source, update your class-path as necessary and you should be ready to go:&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Dependencies&lt;/b&gt;&lt;br /&gt;
Jprowork requires &lt;b&gt;&lt;a href="https://code.google.com/p/google-gson/" target="_blank"&gt;Gson&lt;/a&gt;:&amp;nbsp;&lt;/b&gt;&lt;span style="background-color: white; font-family: arial, sans-serif; font-size: 13px; line-height: 16.390625px;"&gt;a Java library that can be used to convert Java Objects into their JSON representation and also to convert a JSON string to an equivalent Java object.&lt;/span&gt;&lt;br /&gt;
&lt;div style="font-family: inherit;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;b&gt;Roadmap and versioning&lt;/b&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
Things left to do? &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
Have a proper versioning structure in place. I plan to go with the format of:&amp;nbsp;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;lt;major&amp;gt;.&amp;lt;minor&amp;gt;.&amp;lt;subminor&amp;gt;&lt;/span&gt; which, in this case, would translate to &amp;nbsp;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;lt;Prowork's API Version&amp;gt;.&amp;lt;Major Changes in Jprowork&amp;gt;.&amp;lt;Minor and Bugfixes&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;
Mavenized JProwork and also have it available as Jar files.&lt;o:p&gt;&lt;/o:p&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Documentation&lt;/b&gt;&lt;br /&gt;
Documentation is in the code. You can grab a copy of the documentation using Javadoc. A generated Javadoc is also included in the repository.&lt;br /&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;span style="font-family: inherit;"&gt;Do give it a spin ;)&lt;br /&gt;
&lt;/span&gt; &lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/3EISD7dkSKs/jprowork-ready-to-go.html</link><author>noreply@blogger.com (dade)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://1.bp.blogspot.com/-dO1Zz8gH85w/UXuRffrrqMI/AAAAAAAAAXE/5XAxyaTiql0/s72-c/jprowork-geekabyte_screenshot.png" height="72" width="72" /><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2013/04/jprowork-ready-to-go.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-8931260651476495710</guid><pubDate>Fri, 19 Apr 2013 23:46:00 +0000</pubDate><atom:updated>2013-04-20T07:32:46.598+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">javascript</category><title>simpleJsMap</title><description>&lt;br /&gt;
I find having to riddle the Dom with stuffs dirty :(&lt;br /&gt;
&lt;br /&gt;
Just because there is no other way to easily keep stuffs on the client side, we sometimes do this; and it is painful! having to unnecessarily pollute the DOM.&lt;br /&gt;
&lt;br /&gt;
I was in such a situation a couple of months back where I was on a project in which stuffs, AKA. the states of the application were being pushed to the DOM attributes just to keep them. &amp;nbsp;Dirty!!!&lt;br /&gt;
&lt;br /&gt;
I&amp;nbsp;didn't&amp;nbsp;want to continue doing this, so instead, I rolled up a little thingy that enabled me put my stuff out of the DOM. :)&lt;br /&gt;
&lt;br /&gt;
I called it &lt;a href="https://github.com/dadepo/simplejsmap" target="_blank"&gt;simpleJsMap&lt;/a&gt;.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;simpleJsMap&lt;/b&gt; is a simple &lt;a href="http://en.wikipedia.org/wiki/Associative_array" target="_blank"&gt;MAP&lt;/a&gt;-like implantation that enables me to keep and retrieve my stuffs easily in the memory via keys and values without having to set things in DOM attributes.&lt;br /&gt;
&lt;br /&gt;
This felt a lot cleaner :)&lt;br /&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;a href="https://github.com/dadepo/simplejsmap" target="_blank"&gt;simpleJsMap is on github&lt;/a&gt; so it can easily be grabbed, and hopefully, someone apart from myself finds it useful. :)&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;h3&gt;
Getting Started&lt;/h3&gt;
&lt;div&gt;
&lt;div&gt;
Include the&lt;b&gt; simplejsmap.js&lt;/b&gt; file into your script. The variable &lt;b&gt;simplejsmap&lt;/b&gt; would then be available.&amp;nbsp;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;lt;script src="//path/to/simplejsmap.js" type="text/javascript"&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;lt;script type="text/javascript"&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;// simplejsmap now available&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
I am a big fan of pure&amp;nbsp;Javascript&amp;nbsp;first before framework, thus simplejsmap is not dependent on any Javascript framework; not even jQuery :p&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
So once you have the script included you ready to go.&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;h3&gt;
&lt;/h3&gt;
&lt;h3&gt;
Function reference&lt;/h3&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;b&gt;createMap()&lt;/b&gt;&lt;br /&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var map = simplejsmap.createMap();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Creates the map like object and assigns it to variable map. You always start using simplejsmap by calling this function.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;b&gt;add(key, value)&lt;/b&gt;&lt;br /&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var map = simplejsmap.createMap();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;map.add("key1", "value one");&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Adds stuff that needs to be kept. The stuff has a value and is associated with a key. Returns true if successfully added and false if not. If the key is already present, nothing happens and false is returned also. To modify the value of a key that is already added, &lt;i&gt;update()&lt;/i&gt; function is used.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
key and value can be of any Javascript type.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;b&gt;update(key, value)&lt;/b&gt;&lt;br /&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var map = simplejsmap.createMap();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;map.update("key1", "updated value");&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Updates the value already added by a given key. &amp;nbsp;If the given key exists, its value is updated. If the key is not found, no update operationis done. False is returned instead.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;b&gt;remove(key)&lt;/b&gt;&lt;br /&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var map = simplejsmap.createMap();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;map.remove("key1");&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Removes a value accessible via the given key. &amp;nbsp;If the given key is already in existence, it is removed and true is returned. If not, false is returned.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;b&gt;get(key)&lt;/b&gt;&lt;br /&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var map = simplejsmap.createMap();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;map.add("key2", "Hello World");&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var val = map.get("key2");&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Gets the value stored via given key.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;b&gt;getLength()&lt;/b&gt;&lt;br /&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var map = simplejsmap.createMap();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var len = map.getLength();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Returns the number of stuffs/keys that has been added.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;b&gt;getKeys()&lt;/b&gt;&lt;br /&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var map = simplejsmap.createMap();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var keys = map.getKeys();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Returns all the keys that has been added as an array.&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/pHHFDXK__8A/simplejsmap.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2013/04/simplejsmap.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-6604094127828443366</guid><pubDate>Fri, 19 Apr 2013 21:37:00 +0000</pubDate><atom:updated>2013-04-19T23:26:26.899+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">javascript</category><category domain="http://www.blogger.com/atom/ns#">closure</category><category domain="http://www.blogger.com/atom/ns#">geekabyte</category><title>Callback functions in loops in Javascript</title><description>&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;In other &lt;a href="http://geekabyte.blogspot.nl/2013/01/now-you-know-what-i-did-last-weekend.html" target="_blank"&gt;to implement &lt;/a&gt;the &lt;/span&gt;&lt;a href="https://github.com/dadepo/redditTwitterBot" style="font-family: inherit;" target="_blank"&gt;Reddit twitter bot&lt;/a&gt;&lt;span style="font-family: inherit;"&gt; for r/Java (&lt;/span&gt;&lt;a href="https://twitter.com/redditJava" style="font-family: inherit;" target="_blank"&gt;@redditJava&lt;/a&gt;&lt;span style="font-family: inherit;"&gt;) and r/programming (&lt;/span&gt;&lt;a href="https://twitter.com/redditprogrammn" style="font-family: inherit;" target="_blank"&gt;@redditprogrammn&lt;/a&gt;&lt;span style="font-family: inherit;"&gt;), I had to get the lists of entries from&amp;nbsp;&lt;/span&gt;Reddit,&amp;nbsp;&lt;span style="font-family: inherit;"&gt;loop through it and call a function to tweet each item. On successfully tweeting, a call back function is called that stores the id of the item that was tweeted. This list of saved Id is checked every time, before tweeting, in other to prevent double tweeting.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;A simple way to get this done is to get the items to be tweeted in a form of an iterable (array or object in javascript), loop through the items and in the loop, put the logic that tweets the item and the call back function.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;A pseudo code would look thus:&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;for (var n=0; n &amp;lt; thingstotweet.length; n++) {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; // tweet function&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; Tweet(thingstotweet[n], function(e,r) {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;// the call back function&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; //if no error, then save the id of the tweet&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; if (!e) {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; Db.save(thingstotweet[n]);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; })&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;}&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;In Javascript, this is a faulty implementation. If you implement such a solution for having callbacks inside a loop you would soon find out that the things gets out of sync. For instance in the tweeting example, one tweet would be sent while a different one would be saved in its place. And the reason is simple: It takes time before the function sending the tweet returns and the call back is called. And since functions call like this in Javascript are non blocking, in the time it takes before the calling function returns and the callback called, the value of n would have changed leading to saving the wrong item.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;For example.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;1.&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;Start the loop when n is 0;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;2.&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;Tweet the item in index 0 in the &lt;i&gt;thingstobetweet&lt;/i&gt; list&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;3.&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;The tweet function is sending the tweet but it takes a couple of seconds.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;4.&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;Value of &lt;b&gt;&lt;i&gt;n&lt;/i&gt;&lt;/b&gt; increased to 1. Still tweet has not been sent, so call back Is not to be called yet&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;5.&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;Value of &lt;b&gt;&lt;i&gt;n&lt;/i&gt;&lt;/b&gt; increased to 2. Still tweet has not been sent, so call back is not to be called yet&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;6.&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;Value of &lt;b&gt;&lt;i&gt;n&lt;/i&gt;&lt;/b&gt; increased to 3. Finally the tweet was sent successfully, time to call the callback&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;7.&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;The call back is called. But &lt;i&gt;&lt;b&gt;n&lt;/b&gt;&lt;/i&gt; is now 3. So &lt;i&gt;thingstobetweet[3]&lt;/i&gt; is saved for a tweet at &lt;i&gt;thingstobetweet[0]&lt;/i&gt;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;How then do you deal with this? What would be the correct way to implement a task that needs a callback function inside a loop?&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;There are two ways I normally implement a solution for this specific&amp;nbsp;&lt;/span&gt;scenario:&lt;br /&gt;
&lt;br /&gt;
&lt;h3&gt;
Use Closures&lt;/h3&gt;
&lt;div&gt;
In a previous post I briefly explained closures in&amp;nbsp;Javascript&amp;nbsp; Dealing with callbacks in loop is a situation where closures can be put to use. The solution is to create a closure for the tweet function. A pseudo implementation would be thus:&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; for (var n=0; n &amp;lt; thingstotweet.length; n++) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; (function(clsn){&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // tweet function&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; Tweet(thingstotweet[clsn], function(e,r) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // call back function&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;//if no error, then save the id of the tweet&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; if (!e) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; Db.save(thingstotweet[clsn]);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; });&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; })(n)&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div style="font-family: 'Courier New', Courier, monospace;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;You can check the &lt;a href="http://geekabyte.blogspot.nl/2013/04/closures-are-hard-not-really-simple.html" target="_blank"&gt;post on closures in Javascript&lt;/a&gt; for more
information and why the&amp;nbsp;&lt;/span&gt;pseudo&lt;span style="font-family: inherit;"&gt;&amp;nbsp;code above works.&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;h3&gt;
Use Recursive Function&lt;/h3&gt;
&lt;div&gt;
The other solution is to implement a recursive function. &amp;nbsp;An implementation would be thus:&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;var &lt;b&gt;tweetRecursive&lt;/b&gt; = function (n) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; if (n &amp;lt; thingstotweet.length) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // tweet function&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;Tweet(thingstotweet[clsn], function(e,r) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // the call back function&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; //if no error, then save the id of the tweet&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; if (!e) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;Db.save(thingstotweet[clsn]);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;b&gt;tweetRecursive(n + 1);&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;});&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; //start the recursive function&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &lt;b&gt;tweetRecursive(0);&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
The logic to send the tweet is defined as a recursive function. &amp;nbsp;This works because the function to tweet the next item (the recursive function) is also called in the callback function. This would ensure that there is no out of sync situation and the correct tweet would be saved for the one that was sent.&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
The only repercussion in this implementation is that it breaks the asynchronous nature as the tweets would be sent in a procedural manner, i.e. one after the other instead of asynchronous fashion.&lt;/div&gt;
&lt;div style="font-family: inherit;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;br /&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/ZwQycpHCQ1E/callback-functions-in-loops-in.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2013/04/callback-functions-in-loops-in.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-2531894769357550053</guid><pubDate>Sat, 06 Apr 2013 19:01:00 +0000</pubDate><atom:updated>2013-04-08T14:40:12.908+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">javascript</category><category domain="http://www.blogger.com/atom/ns#">closure</category><title>Closures are hard? Not really: A simple introduction to closures in Javascript</title><description>&lt;br /&gt;
The concept of closures exists in various programming languages. Javascript is one of such language, and anybody who spends an ample time with it would sooner or later run into situation where using closures is warranted.&lt;br /&gt;
&lt;br /&gt;
But closures are hard? Not really.&lt;br /&gt;
&lt;br /&gt;
So what are closures? From personal experience, giving a detailed pseudo-academic explanation benefits little in really getting the concept; well, at least for me. I realized that even after understanding it, translating that knowledge into practical usage remained a little fuzzy for a while until I had to use it in real projects once or twice after which I sort of formed a personal mental model for it.&lt;br /&gt;
&lt;br /&gt;
So I won’t give a too much detailed explanation. There are tons of posts and articles out there that already did that. I listed some at the end of this post. What I would quickly outline is how I came to understand it to the extent of practical usage.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;a name='more'&gt;&lt;/a&gt;&lt;br /&gt;
&lt;h4&gt;
Understanding Scope&lt;/h4&gt;
To get closures you must understand how scope works in Javascript. The scope is what defined the accessibility to a variable or named function. And in Javascript, it is determined by the function in which the variable is defined. That is, Javascript is function scoped. And one interesting thing about this is that the scope can be nested. i.e. If a variable is defined in a function (an outer scope) and inside that function another function (inner scope) is defined. The variables defined in the first outer scope would be accessible inside the second scope. i.e&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;// global scope&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;function firstScope() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; var outer = “I am outer”;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; function secondScope() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;// I can have access to the scope of firstScope&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;var inner;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;console.log(outer);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; }&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;secondScope();&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;firstScope(); // logs outer since secondscope() is called&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;// but from global scope, n&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;o access to both variable&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;console.log(outer); //undefined variable&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;console.log(inner); //undefined variable&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You won’t be able to do such a thing in a language like PHP where scope is defined by block of code.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;function firstScope() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; $outer = “I am outer”;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; function secondScope() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // I do not have access to $outer&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; echo&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; $outer; // this would give an undefined variable error&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; secondScope();&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;firstScope();&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Now to the interesting part: The magic happens when the inner function which is accessing a variable in the outer function is returned. By this strange situation, all of a sudden the local variable defined in the outer scope gets to survive the execution of the first function. And It becomes available still. This is exactly how a closure is created. ie.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;function firstScope() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; var outer = “I am outer”;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; function secondScope() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // I can have access to the scope of firstScope&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; var inner;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; console.log(outer);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; return secondScope; // secondScope, a function is returned&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var closure = firstScope();&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;closure() // console logs the value of the local variable outer&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
This is something that won’t be possible in a language like C where after the function returns, all local variables are destroyed and are no longer available.&lt;br /&gt;
&lt;br /&gt;
This is how much I would go in explaining Closures. Do check &lt;a href="http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/" target="_blank"&gt;this article&lt;/a&gt; for a more detailed explanation.&lt;br /&gt;
&lt;br /&gt;
After you have wrapped your head around scopes and how they create closures in Javascript, next thing are their practicality.&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
Closures in Real Life&amp;nbsp;&lt;/h4&gt;
Closures lend themselves several practical usage. Some of this includes creating &lt;a href="http://en.wikipedia.org/wiki/Template_(C%2B%2B)" target="_blank"&gt;Function Templates&lt;/a&gt; in Javascript and implementing the &lt;a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript" target="_blank"&gt;Module pattern&lt;/a&gt; but before you get to such advanced implementation, there are other scenarios in real life you would find yourself having to use closures; one of such case would be where you need to assign a callback function in a loop.&lt;br /&gt;
&lt;br /&gt;
Let me explain.&lt;br /&gt;
&lt;br /&gt;
Let’s say you need to render a list of buttons which performs the same tasks, but with different parameters. For Instance you want to implement something similar to an email client’s inbox. For each message you want to have a read/open button which when clicked, would open the message. The list of buttons are technically the same: they perform the same function (opening of a message) but on different data. A code to implement this may look like this:&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;lt;ul&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;lt;li&amp;gt;&amp;lt;p id=’msgId1’&amp;gt;Message one&amp;lt;/p&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;lt;li&amp;gt;&amp;lt;p id=’msgId2’&amp;gt;Message two&amp;lt;/p&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;lt;li&amp;gt;&amp;lt;p id=’msgId3’&amp;gt;Message three&amp;lt;/p&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;lt;li&amp;gt;&amp;lt;p id=’msgId4’&amp;gt;Message four&amp;lt;/p&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;function AttachOPenMsg() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;//let messageList be an array of Id’s for a message&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var messageList = [‘msgId1’ , ‘msgId2’ , ‘msgId3’ , ‘msgId4’];&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;for (var n = 0; n &amp;lt; messageList.length; n++) {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;document.getElementById(messageList[n]).addEventListener(‘click’, function(){&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;alert(“Opening message with Id ” + messageList[n]);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;});&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;attachOpenMsg();&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
This makes sense right? Loop through the Id, pick the respective button, and attach the click event that would do the magic of opening the case. The only thing is that this won’t work! Every button you click would always open the last message. This is the kind of situation you use closure for.&lt;br /&gt;
&lt;br /&gt;
So what is the solution?&lt;br /&gt;
&lt;br /&gt;
The definition of the solution would be to &lt;i&gt;create a closure over the looping variable &lt;b&gt;n&lt;/b&gt; for the on click event&lt;/i&gt;.&lt;br /&gt;
&lt;br /&gt;
That’s sounds nice, but maybe not that clear?&lt;br /&gt;
&lt;br /&gt;
When I first encountered this situation, the first thing I could not understand is why every button have to open the last message?&amp;nbsp;Didn't&amp;nbsp;I just assigned the right value in the loop? Why does it change when it came to clicking?&lt;br /&gt;
&lt;br /&gt;
Let’s unpack it and let see how it works.&lt;br /&gt;
&lt;br /&gt;
Let’s say instead of having a for-loop we had this:&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;function &amp;nbsp;attachOpenMsg() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var n = 0;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;document.getElementById(messageList[n]).addEventListener(‘click’, function(){&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;alert(“Opening message with Id ” + messageList[n]);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;});&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var n = 1;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;document.getElementById(messageList[n]).addEventListener(‘click’, function(){&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;alert(“Opening message with Id ” + messageList[n]);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;});&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;…&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var n = 3;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;document.getElementById(messageList[n]).addEventListener(‘click’, function(){&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;alert(“Opening message with Id ” + messageList[n]);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;});&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var n = 4;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;...&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;attachOpenMsg();&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
It becomes a little bit clearer why the buttons always use the last value of &lt;b&gt;n&lt;/b&gt; in the loop. &lt;br /&gt;
&lt;br /&gt;
In the loop, the value of &lt;b&gt;n&lt;/b&gt; keeps changing. And when it gets to the time that the buttons are actually clicked, the value of &lt;b&gt;n&lt;/b&gt; that is accessed is the last value before the loops ends. &lt;b&gt;n&lt;/b&gt; is referenced by the call back function of the click event, but this is just referencing. If &lt;b&gt;n&lt;/b&gt; changes sometimes in the future, the &lt;b&gt;n&lt;/b&gt; the callback function references would have changed in value too.&lt;br /&gt;
&lt;br /&gt;
So how does closure help solve this? Well it seems we have to create a closure for the value that is assigned to the call back function such that the changes in the looping n value do not affect it. So you have:&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;function AttachOPenMsg() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;//let messageList be an array of Id’s for a message&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;var messageList = [‘msgId1’ , ‘msgId2’ , ‘msgId3’ , ‘msgId4’];&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;for (var n = 0; n &amp;lt; messageList.length; n++) {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;document.getElementById(messageList[n]).addEventListener(‘click’, (function(clsn){&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;return function () {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;alert(“Opening message with Id ” + messageList[clsn]);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;})(n);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;});&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;attachOpenMsg();&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
We using anonymous function here, the &lt;b&gt;n&lt;/b&gt; variable is passed into the anonymous function which returns a function that referenced the passed variable &lt;b&gt;n&lt;/b&gt;&amp;nbsp;in the form of &lt;b&gt;clsn.&lt;/b&gt;&amp;nbsp;The variable &lt;b&gt;n&lt;/b&gt; can keep changing but the &lt;b&gt;clsn&lt;/b&gt; returned by the closure created by the anonymous function would preserve its value for the click event it was used for.&lt;br /&gt;
&lt;br /&gt;
Instead of anonymous function a named function can be very much used instead:&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;function openMsg(clsn) {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;return function () {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;alert(“Opening message with Id ” + messageList[clsn]);&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
And then use it in the loop thus&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;for (var n = 0; n &amp;lt; messageList.length; n++) {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;document.getElementById(messageList[n]).addEventListener(‘click’, openMsg(n));&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
Useful links on closures:&lt;/h4&gt;
&lt;a href="http://jibbering.com/faq/notes/closures/"&gt;http://jibbering.com/faq/notes/closures/&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work"&gt;http://stackoverflow.com/questions/111102/how-do-javascript-closures-work&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://helephant.com/2008/10/17/javascript-closures/"&gt;http://helephant.com/2008/10/17/javascript-closures/&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/M4WJGybC998/closures-are-hard-not-really-simple.html</link><author>noreply@blogger.com (dade)</author><thr:total>2</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2013/04/closures-are-hard-not-really-simple.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-3775550687236987228</guid><pubDate>Sat, 16 Mar 2013 23:21:00 +0000</pubDate><atom:updated>2013-04-06T13:18:32.458+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">javascript</category><category domain="http://www.blogger.com/atom/ns#">geekabyte</category><title>Difference Between Protoype and __proto__ in Javascript</title><description>&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
So what’s
the difference between __proto__ and prototype property in Javascript?&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;i&gt;The prototype is used to create __proto__&lt;/i&gt; &amp;nbsp;Simple!&lt;br /&gt;
&lt;br /&gt;
Yes, I know. That statement does not help much in terms of explaining what is going on :) But stick with me, the plan is to make it clear by the end of the post.&lt;br /&gt;
&lt;br /&gt;
So let's dig into explaining this stuff!&lt;br /&gt;
&lt;br /&gt;
The subject of prototype is related to Javascript objects and object creation and relation; so before going further, I recommend first reading&amp;nbsp;&lt;a href="http://geekabyte.blogspot.nl/2013/03/understanding-constructor-function-and.html" target="_blank"&gt;Understanding Constructor Function and this Keyword in Javascript&lt;/a&gt;&amp;nbsp;as this would provide some basic information that would help in understanding some of the basic concepts needed.&lt;br /&gt;
&lt;br /&gt;
&lt;a name='more'&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
&lt;h4&gt;
Let Us First Look At Prototype Property.&lt;/h4&gt;
&lt;br /&gt;
In&amp;nbsp;&lt;a href="http://geekabyte.blogspot.nl/2013/03/understanding-constructor-function-and.html" target="_blank"&gt;Understanding Constructor Function and this Keyword in Javascript&lt;/a&gt;,&amp;nbsp;I explained that Javascript functions are indeed Objects; albeit a little different from your regular objects since they have certain behaviours that are unique:&amp;nbsp;for example, you can call a function but you can't call an object. Because of this, just like you would do to any object, you can add properties and methods to a&amp;nbsp;Javascript&amp;nbsp;function!&lt;br /&gt;
&lt;br /&gt;
So what has this got to do with prototype?&lt;br /&gt;
&lt;br /&gt;
Well, prototype is a property of Javascript function. Albeit a native one, meaning that you do not have to add it, every Javascript function you have, automatically gets it.&lt;br /&gt;
&lt;br /&gt;
Let us confirm this:&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var fooFunction = &amp;nbsp;function() {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;//&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
now check if prototype is indeed a property of &lt;span style="font-family: Courier New, Courier, monospace;"&gt;fooFunction&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;console.log(fooFunction.prototype); // does not print undefined so its there&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;console.log(typeof&amp;nbsp;fooFunction.prototype)&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;// prints "object"&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;But for an object that is not a function, let us see if it also has the prototype property:&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var regularObj = {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; id : 1,&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; type : 'regularObject'&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
now if you try to access prototype property of &lt;span style="font-family: Courier New, Courier, monospace;"&gt;regularObj&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;you get &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;undefined&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;. i.e:&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;console.log(regularObj.prototype) // prints undefined&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;which confirms that prototype property is only available by default to Functions.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;So now that we have established that prototype are properties only found in Function objects, the next question is: "What does it contain and what is it used for"? But before we go into that, we need to first take a look at another concept: &lt;b&gt;prototype chain&lt;/b&gt; in Javascript.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;span style="font-family: inherit;"&gt;Prototype chain&lt;/span&gt;&lt;/h4&gt;
&lt;span style="font-family: inherit;"&gt;I like to think of the prototype chain as a chain of &amp;lt;strike&amp;gt;command&amp;lt;/strike&amp;gt; request. Its a chain that links you to where to go in other to get your requests answered. And if you do not get an answer, it leads or points you to the next place where you can make the request again. Think of a typical support call&amp;nbsp;&lt;/span&gt;centre&lt;span style="font-family: inherit;"&gt;. A call comes in and a question is asked. if the call&amp;nbsp;&lt;/span&gt;centre&lt;span style="font-family: inherit;"&gt;&amp;nbsp;operative knows the answer, it is given. If not, most likely, the call would be directed to another department who would be better suited to provide the answer. This process of forwarding the request in other to get it answered may very well go on until an answer is provided or all possible source for an answer has been exhausted and at that point, the caller is told that his/her question/request can not be answered.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;Something similar happens when you have an object and you call a property on it in Javascript. for instance:&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var justAnObj = {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;prop1 : "I am property one",&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;prop2: function () {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; console.log("I am property two");&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;},&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;prop3:true&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;br /&gt;
calling &lt;span style="font-family: Courier New, Courier, monospace;"&gt;justAnObj.prop1&lt;/span&gt; or any of the above defined properties can be said to be making a request for that property from the object. But when you request for a property that is not defined: i.e.&amp;nbsp;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;justAnObj.prop4,&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;you get &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;undefined&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;. But before the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;undefined&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; is returned, there is actually a lookup that happens which is very similar to the support&amp;nbsp;&lt;/span&gt;centre&lt;span style="font-family: inherit;"&gt;&amp;nbsp;&lt;/span&gt;scenario&lt;span style="font-family: inherit;"&gt;&amp;nbsp;we just described above. And you only get the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;undefined&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; returned when this chain of look up has been&amp;nbsp;&lt;/span&gt;exhausted and &lt;span style="font-family: Courier New, Courier, monospace;"&gt;prop4&lt;/span&gt; cant be found anywhere!&lt;span style="font-family: inherit;"&gt;&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;&lt;i&gt;But wait! where is this look up chain I am talking about. I can't see it defined anywhere!&lt;/i&gt;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;Every object in Javascript has an internal pointer which points to the look up chain; another object. This object is also referred to as the prototype. But since this could be easily confused with the prototype property of a function&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;, I would prefer to refer to it as &lt;/span&gt;&lt;b style="font-family: inherit;"&gt;Internal prototype&lt;/b&gt;&lt;span style="font-family: inherit;"&gt; So if a property is not found in an object, it is searched for in the object that its Internal prototype refers to. And, you know the cool thing? Since the Internal prototype always refers to an object, and every object has this internal pointer (Internal prototype property) that links to an object (the prototype), it means &lt;/span&gt;&lt;span style="font-family: inherit;"&gt;the look up for the requested property would&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;continue recursively until the property is found and returned or until we reach the end of the look up chain which is &lt;/span&gt;&lt;b style="font-family: inherit;"&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object" target="_blank"&gt;Object object&lt;/a&gt;;&amp;nbsp;&lt;/b&gt;&lt;span style="font-family: inherit;"&gt;the only Object that does not have an&amp;nbsp;&lt;/span&gt;&lt;b style="font-family: inherit;"&gt;Internal Prototype&lt;/b&gt;&lt;span style="font-family: inherit;"&gt;. It is at this point that&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;undefined&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; is returned.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;Let us confirm that all these is not bullocks or black magic.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;Still using the&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;justAnObj&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;defined above, do the following&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;console.dir(justAnObj.constructor.prototype)&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;or better still&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;console.dir(Object.getPrototypeOf(&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;justAnObj&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;)&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;)&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
Confirm that it prints out an object. Do not bother about the nature of what is shown in the console or how it got there for now. It would all fit together soon!&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;So let us now bring this knowledge to the&amp;nbsp;&lt;/span&gt;prototype&lt;span style="font-family: inherit;"&gt;&amp;nbsp;property of Functions. And see how it helps us understand the difference between prototype and __proto__&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;From the post&amp;nbsp;&lt;/span&gt;&lt;a href="http://geekabyte.blogspot.nl/2013/03/understanding-constructor-function-and.html" target="_blank"&gt;Understanding Constructor Function and this Keyword in Javascript&lt;/a&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;we know that we can use Functions to create objects. And we also know that Functions have a prototype property. &amp;nbsp;And from above we now know that every Javascript object has an &lt;b&gt;internal&amp;nbsp;&lt;/b&gt;&lt;/span&gt;&lt;b&gt;prototype &lt;/b&gt;property which points to its prototype object, which is used in the prototype chain.&lt;br /&gt;
&lt;br /&gt;
&lt;i&gt;Yes we know all these but &amp;nbsp;how does these all tie together?&lt;/i&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;Like this:&lt;/span&gt;&lt;br /&gt;
&lt;blockquote class="tr_bq"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;i&gt;When an object is created with a Constructor function in Javascript, its internal prototype property would be set to the prototype property of the Function that was used to create it.&lt;/i&gt;&lt;/span&gt;&lt;/blockquote&gt;
&lt;br /&gt;
Lets see this in action.&lt;br /&gt;
&lt;br /&gt;
Make a constructor function.&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var ConFunc = function () {&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this.desc = "I am a constructor function"&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;Now add stuff to the prototype property of &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;ConFunc &lt;/span&gt;&lt;span style="font-family: inherit;"&gt;function:&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;ConFunc.prototype.language = "javascript";&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;ConFunc.prototype.browser = "chrome";&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;Now create an Object from it&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;var myObj = new&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;ConFunc();&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;Now call the properties defined:&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;myObj.desc // prints&amp;nbsp;I am a constructor function"&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;myObj.language // prints Javascript&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;"&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;myObj.browser // prints chrome&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;"&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;You see what is going on? even though &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;.language&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; and &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;.browser&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;&lt;/span&gt;property&lt;span style="font-family: inherit;"&gt;&amp;nbsp;were not defined in the C&lt;/span&gt;onstructor&lt;span style="font-family: inherit;"&gt;&amp;nbsp;function, you still have access to them from the object created. This is because, as explained, a look up was done and led to the function's prototype, which had the property we wanted.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;For a final confirmation that everything is as I say, try and access the internal prototype of the&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;myObj&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;object:&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Object.getPrototypeOf(&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;justAnObj&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;)&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;This would print out the following&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Object {&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;language&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;: '&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;javascript&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;',&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;browser&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;: '&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;chrome'&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
which is the prototype property of the&amp;nbsp;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;ConFunc&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;that we defined.&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
So now we see that every object has an internal prototype, and that this points to the prototype property of the function that was used in creating them. The proceeding question to that would maybe be, "what about the objects that are created using object literals, where do their internal prototype property points to"?&lt;br /&gt;
&lt;br /&gt;
It points to the global&amp;nbsp;Javascript&amp;nbsp;Object object.&lt;br /&gt;
&lt;br /&gt;
Well, remember that above we printed out the internal prototype for&amp;nbsp;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;justAnObj&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;? the result we got was the Object object. Simple as that. The prototype of literal objects point to Object object.&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Now finally, how __proto__ fits into the picture?&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;The __proto__&lt;/b&gt;&lt;br /&gt;
&lt;b&gt;&lt;br /&gt;&lt;/b&gt;
You see that I have been referring to an objects prototype as internal prototype&amp;nbsp;property&amp;nbsp;and I have used&amp;nbsp;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;justAnObj.constructor.prototype&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;and&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Object.getPrototypeOf(&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;justAnObj&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;)&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;to get access to it. I could have done the same using __proto__ which is a&amp;nbsp;&lt;/span&gt;pseudo&lt;span style="font-family: inherit;"&gt;&amp;nbsp;property of any object that can be used to get access to its prototype.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;The only thing is that __proto__, according to specification is meant to be hidden and&amp;nbsp;&lt;/span&gt;inaccessible&lt;span style="font-family: inherit;"&gt;&amp;nbsp;to the developers. Even though, most browsers flaunt this rule, &amp;nbsp;ideally it should not be used.&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="font-family: inherit;"&gt;This restriction may change with the upcoming ECMAScript 6 standard, but for now I would still prefer&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;Object.getPrototypeOf&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;br /&gt;&lt;/span&gt;
So I guess at this point, having read the preceding, the statement I made initially, at the beginning of this post: &lt;i&gt;The prototype is used to create __proto__ &lt;/i&gt;should&amp;nbsp;now makes sense.</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/gW_-PCVtknA/difference-between-protoype-and-proto.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2013/03/difference-between-protoype-and-proto.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-2140607694556648019</guid><pubDate>Sat, 16 Mar 2013 15:31:00 +0000</pubDate><atom:updated>2013-04-06T19:02:49.963+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">javascript</category><title>Understanding Constructor Function and this Keyword in Javascript</title><description>&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
Back in 2006 I wrote a post on using &lt;a href="http://geekabyte.blogspot.nl/2006/11/creating-objects-in-javascript-10-using.html" target="_blank"&gt;constructor functions in Javascript to create objects&lt;/a&gt;. This post builds on that post, expounding it a little bit further.&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
By definition, a constructor function is a normal Javascript function. Nothing more, nothing less. What makes a function a constructor is how it is used. When a function is used in such a way that it can create an object, by calling it with Javascript's&lt;span style="font-family: Courier New, Courier, monospace;"&gt; new&lt;/span&gt; operator, then it becomes a constructor function.&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
This means all and any function you have in Javascript can be used as a constructor function.&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var Person = function () {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; console.log("I am a function");&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
We can call this function normally:&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person(); //prints to the console "I am a function"&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;console.log(typeof Person) //prints to the console ‘function’&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
So let’s now use this function as a constructor and create an object:&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var bond = new Person();&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
Now let us confirm that &lt;span style="font-family: Courier New, Courier, monospace;"&gt;bond&lt;/span&gt;&amp;nbsp;is indeed an object:&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;console.log(typeof bond) //this prints "Object"&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;
&lt;/span&gt; Now that is all about Constructor functions. &amp;nbsp;It is as simple as that: A function that is the same as your normal Javascript function but can be used to create objects.&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
But you would notice that the object created above is empty (without properties) and maybe of little or no use. Compared to the example given in my &lt;a href="http://geekabyte.blogspot.nl/2006/11/creating-objects-in-javascript-10-using.html" target="_blank"&gt;previous post&lt;/a&gt;, which had properties.&amp;nbsp;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
So how do you actually make an object with some already set properties at creation? Before we go ahead and look at this, its worth mentioning a characteristics of functions in Javascript (apart from this fact that they can be used to create objects).&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;
&lt;i&gt;Functions are first class citizens in Javascript and also Functions can have properties just as objects! Yes just like you add properties to an object, you can do same to a Javascript function.&lt;/i&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;a name='more'&gt;&lt;/a&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
So we already have a function &lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; we can add properties to it! for example:&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person.createdBy = "Dade";&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person.sayWhoCreatedYou = function () {&lt;br /&gt;
&amp;nbsp; &amp;nbsp;console.log(Person.createdBy);&lt;br /&gt;
}&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
To see this really work, when we call &lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person.sayWhoCreatedYou()&lt;/span&gt; you get "Dade" printed to the console!&lt;br /&gt;
&lt;br /&gt;
Do not sweat it that much if this feels funny right now, especially&amp;nbsp;if you are coming from a language that does not treat functions as a first class citizens. This was mentioned now as it would help understand another interesting concepts in Javascript: Prototypes. Right now, just know that in Javascript, functions can have properties.&amp;nbsp;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
That being said, let us now build on the knowledge we have so far and create a more useful object, with properties and methods using Constructor functions.&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: inherit;"&gt;But in other to do so, there is yet another important thing we need to understand: The concept of &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;keyword&amp;nbsp;in&amp;nbsp;Javascript. Understanding &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;in Javascript would help shed more light to what actually goes on when an object is created via Constructor functions and how properties are added to the object.&lt;/span&gt;&lt;/div&gt;
&lt;h4&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;This&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; in Javascript&lt;/span&gt;&lt;/h4&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="background-color: white; line-height: 18px;"&gt;&lt;span style="font-family: inherit;"&gt;In a language like Java, &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; keyword refers to the current instance of a particular object. And in Java, the method defined in a Java Class is bound to, or belongs to a particular instance object that is created from that class. &amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;span style="background-color: white; font-family: inherit; line-height: 18px;"&gt;In Javascript, things are a little bit different. Javascript is not a Class based programming language so do not except the concept to be the same as in Java (or similar Class based language: C# etc).&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="background-color: white; font-family: inherit; line-height: 18px;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="background-color: white; font-family: inherit; line-height: 18px;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="background-color: white; font-family: inherit; line-height: 18px;"&gt;I like to think of &lt;/span&gt;&lt;span style="background-color: white; line-height: 18px;"&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;/span&gt;&lt;span style="background-color: white;"&gt;&lt;span style="font-family: inherit; line-height: 18px;"&gt;&amp;nbsp;keyword in Javascript as a context. The context points to an Object still, but the object it points to can easily be changed. This means that I can have one function in which I have &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace; line-height: 18px;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit; line-height: 18px;"&gt; keyword, and depending on how I call the function, the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace; line-height: 18px;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&lt;span style="line-height: 18px;"&gt; can refer to the window object of my browser, Dom object, or any&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;span style="line-height: 18px;"&gt;arbitrary&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&lt;span style="line-height: 18px;"&gt;&amp;nbsp;object, even objects I define myself!&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="font-family: inherit;"&gt;&lt;span style="line-height: 18px;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="line-height: 18px;"&gt;Yes, the mental mode to change when thinking about t&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace; line-height: 18px;"&gt;his&lt;/span&gt;&lt;span style="line-height: 18px;"&gt; in Javascript is that it really has no strong relation whatsoever with where it was defined! This is not the case in Java. In Java, when you use &lt;span style="font-family: Courier New, Courier, monospace;"&gt;this keyword&lt;/span&gt; in a method, you know you are referring to any object that is created from that class. Not so in Javascript.&amp;nbsp;In fact&amp;nbsp;I like to think if &lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt; in Javascript, not as &lt;b&gt;this object&lt;/b&gt;,&amp;nbsp;but &lt;i&gt;any of&amp;nbsp;that &lt;/i&gt;objects!&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
So when we have an updated Constructor functions that looks like this:&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var Person = function () {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; this.name;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; this.theTimeCreated = new Date();&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; this.sayMyName = function () {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; console.log(this.name);&lt;br /&gt;
&amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
What does&amp;nbsp;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;then refer to?&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;We can never tell by just looking at the function definition! We can only tell if we know where it is called! Again, I think of &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;b&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;&lt;/span&gt;&lt;/b&gt;&lt;span style="font-family: inherit;"&gt;as a context, a context which points to an object but which easily changes depending on how the function is called.&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;If you call &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person()&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; like you normally call a function and not like a Constructor function with the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;new&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; keyword,&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;would refer to the window object! Yes it would! So it would be as if in the definition you have is this:&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var Person = function () {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &lt;span style="color: #cc0000;"&gt;window&lt;/span&gt;.name; //does nothing.&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &lt;span style="color: #cc0000;"&gt;window&lt;/span&gt;.theTimeCreated = new Date();&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &lt;span style="color: #cc0000;"&gt;window&lt;/span&gt;.sayMyName = function () {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; console.log(&lt;span style="color: #cc0000;"&gt;window&lt;/span&gt;.name);&lt;br /&gt;
&amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
Wait a minute. Look at the code again...what did you just do by calling Person(). You just added properties to the window object!&amp;nbsp;ouch! Not good! You should not be doing this!&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
To confirm that the window object has indeed been updated, you can console log&amp;nbsp;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;window.theTimeCreated()&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;and you would get the date you ran the function! If you also run&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;window.sayMyName()&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;the name of the window (if set) would be logged to the console!&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;This is really dangerous as you can unknowingly change things that should not be changed in the window object! So it is important to actually have a good grasp of how &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; behave in Javascript.&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;Now to see that we can easily change the context of the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this keyword&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;lets create another object that has a name property:&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var anotherObj = {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;name : "My name is Bond...James Bond!"&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;And now do this:&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;anotherObj.personFunction = Person;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
Or better still just define the new &lt;span style="font-family: Courier New, Courier, monospace;"&gt;personFunction&lt;/span&gt; in one step:&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var anotherObj = {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;name : "Yay! I am the new object context!",&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;personFunction : Person&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;Basically what you just did is to make the Person function part of the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;anotherObj &lt;/span&gt;&lt;span style="font-family: inherit;"&gt;and this would change the context of the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; used in the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;&lt;/span&gt;function&lt;span style="font-family: inherit;"&gt;. So what you have very much look like this&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;var anotherObj = {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;name : "My name is Bond...James Bond!",&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;personFunction :&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;function () {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;span style="color: #cc0000;"&gt;anotherObj&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;.name;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;span style="color: #cc0000;"&gt;anotherObj&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;.theTimeCreated = new Date();&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;span style="color: #cc0000;"&gt;anotherObj&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;.sayMyName = function () {&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; console.log(&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;span style="color: #cc0000;"&gt;anotherObj&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;.name);&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;};&lt;/span&gt;&lt;/div&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;}&lt;/span&gt;&lt;br /&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;So&lt;span style="font-family: inherit;"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;now refers to&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;anotherObj&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;so when you call &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person()&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;via&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;anotherObj&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; like this &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;anotherObj.personFunction()&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;this time around the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;window&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; object is not touched, but the object that would be in context would be&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;anotherObj&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;To confirm this,&amp;nbsp;&lt;/span&gt;console log&amp;nbsp;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;anotherObj&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;.theTimeCreated()&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;and you would get the date you ran the&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;anotherObj.personFunction()&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;function and If you also run&amp;nbsp;&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;anotherObj&lt;/span&gt;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;.sayMyName()&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;, you see &lt;b&gt;"My name is Bond...James Bond!" &lt;/b&gt;because the object you are working in its context now is &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;anotherObj&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; and it has a property &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;name&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; with the following value.&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;So how does all this come together and relates to Constructor Functions?&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;Like this:&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;The &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;new&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; Keyword when used to call a function would automatically changed the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;this&lt;/span&gt;&lt;span style="font-family: inherit;"&gt;&amp;nbsp;defined in that function to refer to the new Object it would create! And this is how you can have properties defined in the Constructor function that would be made to become part of the object created with the Constructor function.&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;That is to say, if I want to use &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; function to create a shiny new object. I'll do:&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;var shinyNewObj = new Person();&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;And viola, my s&lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;hinyNewObj&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; now has all the three properties defined in the &lt;/span&gt;&lt;span style="font-family: Courier New, Courier, monospace;"&gt;Person&lt;/span&gt;&lt;span style="font-family: inherit;"&gt; function.&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;You can also have the&amp;nbsp;&lt;/span&gt;Constructor&lt;span style="font-family: inherit;"&gt;&amp;nbsp;function take arguments, which can be used to set initial values of properties of the object. And this is how the Constructor function in the previous post worked.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;That is:&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;var Webdeveloper = function(identity,location,technologies,blog)&lt;/span&gt;&lt;br style="background-color: white; color: #333333; line-height: 19px; text-align: justify;" /&gt;&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;{&lt;/span&gt;&lt;br style="background-color: white; color: #333333; line-height: 19px; text-align: justify;" /&gt;&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;&amp;nbsp; &amp;nbsp;this.identity = identity;&lt;/span&gt;&lt;br style="background-color: white; color: #333333; line-height: 19px; text-align: justify;" /&gt;&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;&amp;nbsp; &amp;nbsp;this.location = location;&lt;/span&gt;&lt;br style="background-color: white; color: #333333; line-height: 19px; text-align: justify;" /&gt;&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;&amp;nbsp; &amp;nbsp;this.technologies = technologies;&lt;/span&gt;&lt;br style="background-color: white; color: #333333; line-height: 19px; text-align: justify;" /&gt;&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;&amp;nbsp; &amp;nbsp;this.blog = blog;&lt;/span&gt;&lt;br style="background-color: white; color: #333333; line-height: 19px; text-align: justify;" /&gt;&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-family: Courier New, Courier, monospace;"&gt;&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;&lt;span style="font-family: inherit;"&gt;And can be used like this:&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="background-color: white; color: #333333; line-height: 19px; text-align: justify;"&gt;&lt;span style="font-family: inherit;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal" style="text-align: left;"&gt;
&lt;span style="color: #333333; font-family: Courier New, Courier, monospace;"&gt;&lt;span style="line-height: 19px;"&gt;var wd = new Webdeveloper('Olabini','New York','JRuby&lt;/span&gt;&lt;/span&gt;&lt;span style="color: #333333; font-family: 'Courier New', Courier, monospace; line-height: 19px;"&gt;',&amp;nbsp;&lt;/span&gt;&lt;span style="color: #333333; font-family: Courier New, Courier, monospace;"&gt;&lt;span style="line-height: 19px;"&gt;http://olabini.com/blog&lt;/span&gt;&lt;/span&gt;&lt;span style="color: #333333; font-family: 'Courier New', Courier, monospace; line-height: 19px;"&gt;)&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal" style="text-align: left;"&gt;
&lt;span style="color: #333333; font-family: 'Courier New', Courier, monospace; line-height: 19px;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;div class="MsoNormal" style="text-align: left;"&gt;
&lt;span style="color: #333333; font-family: 'Courier New', Courier, monospace; line-height: 19px;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/ahsT7aXHWYQ/understanding-constructor-function-and.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2013/03/understanding-constructor-function-and.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-6888017428383480296</guid><pubDate>Fri, 04 Jan 2013 10:02:00 +0000</pubDate><atom:updated>2013-02-09T07:54:57.661+01:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">javascript</category><category domain="http://www.blogger.com/atom/ns#">reddit</category><category domain="http://www.blogger.com/atom/ns#">nodejs</category><title>Now You Know What I Did Last Weekend: @redditJava</title><description>&lt;br /&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="http://1.bp.blogspot.com/-e9-U0B-cPqI/UOakuXATM2I/AAAAAAAAAWM/NX50fp6o-QY/s1600/javit_post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="68" src="http://1.bp.blogspot.com/-e9-U0B-cPqI/UOakuXATM2I/AAAAAAAAAWM/NX50fp6o-QY/s400/javit_post.png" width="153" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
I am a regular reader of Hacker news: It’s a great place to discover interesting stuffs. But I don’t go checking &lt;a href="http://news.ycombinator.com/"&gt;&lt;b&gt;http://news.ycombinator.com&lt;/b&gt;&lt;/a&gt; every now and then, neither do I subscribe to their RSS feed. I get most of the stuffs I read on Hacker news via twitter. There are Hacker news’ bots that I follow on twitter which provides the utility of having *hot* articles tweeted once they have attained a certain number of points or comments. Namely: &lt;a href="https://twitter.com/newsyc150"&gt;&lt;b&gt;@newsyc150&lt;/b&gt;&lt;/a&gt;, &lt;a href="https://twitter.com/newsyc100" target="_blank"&gt;&lt;b&gt;@newsyc100&lt;/b&gt;&lt;/a&gt;, &lt;a href="https://twitter.com/newsyc50" target="_blank"&gt;&lt;b&gt;@newsyc50&lt;/b&gt;&lt;/a&gt; and &lt;a href="https://twitter.com/newsyc20" target="_blank"&gt;&lt;b&gt;@newsyc20&lt;/b&gt;&lt;/a&gt;. &lt;br /&gt;
&lt;br /&gt;
So recently, when I decided to pay a little more attention to Reddit, the first thing I looked for were twitter bots I can follow that would feed me with interesting contents from Reddit. One nice thing about Reddit, unlike Hacker news, is the fact that Reddit have sub categories or channels which are called subreddits which cater to specific topics. You got subreddits for Politics, Gaming, Movies, Music…the list is almost endless. So I basically was on the lookout for twitter bots for subreddits I may be interested in. &lt;br /&gt;
&lt;br /&gt;
But my searched returned null. &lt;br /&gt;
&lt;br /&gt;
Since I could not find one, I decided to make one for myself. And I decided to make one for the Java subreddits since I recently started playing with the language again. (By the way having the bot track other subreddits is simply a matter of configuration).&lt;br /&gt;
&lt;br /&gt;
The idea is simple enough: get stuffs from Reddit, have a way of getting only the interesting ones based on the number of points and comments, and then tweet only those. Also, make sure you also don’t have the same thing tweeted twice. The content is there, the APIs are there, so I set about getting this done within a weekend.&lt;br /&gt;
&lt;br /&gt;
For this, I used Node.js.  Reason?  Well, I spend a lot of time with Javascript now, notable because I work with the language at work, building the world smarter customer service app, which enables business to keep &lt;a href="http://www.casengo.com/" target="_blank"&gt;&lt;b&gt;more happy customer: Casengo&lt;/b&gt;&lt;/a&gt;; and since Javascript is very much capable, why not?&lt;br /&gt;
&lt;br /&gt;
It was fun hacking this bot together the last weekend as I also took time to play around with stuffs:   For storing information to prevent double tweets, &lt;a href="http://www.mongodb.org/" target="_blank"&gt;&lt;b&gt;mongoDB&lt;/b&gt;&lt;/a&gt; was used; this allowed me to get pretty conversant with the idea of &lt;a href="http://krishnasblog.com/2012/06/02/understanding-document-based-mongodb-nosql/" target="_blank"&gt;&lt;b&gt;document based DB and how it works in mongoDB&lt;/b&gt;&lt;/a&gt;.  I also stumbled on &lt;b&gt;&lt;a href="https://github.com/isaacs/node-supervisor" target="_blank"&gt;node-supervisor&lt;/a&gt;.&lt;/b&gt; A handy Node Module which prevented the need to manually stop and start the server on every change in the code. Use node-supervisor to run a node script, it watches for any changes in your file; on change, it automatically reloads the script. This definitely made the development flow smoother.  &lt;br /&gt;
&lt;br /&gt;
I also checked up on writing &lt;a href="http://howtonode.org/creating-custom-modules" target="_blank"&gt;&lt;b&gt;Node Modules&lt;/b&gt;&lt;/a&gt; while following &lt;a href="https://gist.github.com/4150d972e0aa2a4060c1" target="_blank"&gt;&lt;b&gt;generally accepted guidelines&lt;/b&gt;&lt;/a&gt; especially if you want your module to be compatible npm.  Also learnt &lt;a href="http://www.mongodb.org/display/DOCS/Amazon+EC2+Quickstart" target="_blank"&gt;&lt;b&gt;one&lt;/b&gt;&lt;/a&gt; or &lt;a href="http://glassonionblog.wordpress.com/2012/01/29/installing-mongodb-on-ec2-linux-instance/" target="_blank"&gt;&lt;b&gt;two&lt;/b&gt;&lt;/a&gt; things about setting up mongoDB on AWS’s EC2.&lt;br /&gt;
&lt;br /&gt;
Apart from the obvious Twitter and Reddit API’s I equally got to play around with &lt;a href="http://dev.bitly.com/" target="_blank"&gt;&lt;b&gt;bit.ly&lt;/b&gt;&lt;/a&gt; and &lt;a href="https://developers.google.com/url-shortener/v1/getting_started" target="_blank"&gt;&lt;b&gt;goo.gl&lt;/b&gt;&lt;/a&gt; API’s. &lt;br /&gt;
&lt;br /&gt;
And finally once deployed, I used &lt;a href="http://blog.nodejitsu.com/keep-a-nodejs-server-up-with-forever" target="_blank"&gt;&lt;b&gt;forever&lt;/b&gt;&lt;/a&gt; to keep the script running. Forever ensures that a node process continuously runs and automatically restarts itself when it exits unexpectedly.&lt;br /&gt;
&lt;br /&gt;
Javascript is definitely a pleasant language to work with. But you could trip if you fail to wrap your head around some of its unique and basic characteristics.  First all, it is a &lt;a href="http://en.wikipedia.org/wiki/Prototype-based" target="_blank"&gt;&lt;b&gt;Prototyped based OOP&lt;/b&gt;&lt;/a&gt; language (not class based) it is also event driven and easily supports asynchronous programming. This alone could result in some unexpected&amp;nbsp;behaviour&amp;nbsp;if you do not put these unique characteristics in mind. An example, where one can easily be tripped would be handling asynchronous API calls inside a for loop. (More on this in coming post)  You also have things like &lt;a href="http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-hoisting-explained/" target="_blank"&gt;&lt;b&gt;variable hoisting&lt;/b&gt;&lt;/a&gt;, &lt;a href="http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/" target="_blank"&gt;&lt;b&gt;scoping, closures&lt;/b&gt;&lt;/a&gt;, the&amp;nbsp;abstruse&amp;nbsp;&lt;a href="http://henrycode.tumblr.com/post/37627169791/javascript-clarifying-the-keyword-this" target="_blank"&gt;&lt;b&gt;this&lt;/b&gt;&lt;/a&gt;&amp;nbsp;etc., all which may make the language appear weird at first approach.&lt;br /&gt;
&lt;br /&gt;
It was a weekend well spent and would spend some more free time modifying things and perhaps adding more subreddits that catches my fancy. The bot is already up and running by the way and you can follow on twitter here &lt;a href="http://www.twitter.com/redditjava" target="_blank"&gt;&lt;b&gt;www.twitter.com/redditjava&lt;/b&gt;&lt;/a&gt; and the code is hosted on github here&amp;nbsp;&lt;a href="https://github.com/dadepo/redditTwitterBot.git" target="_blank"&gt;&lt;b&gt;https://github.com/dadepo/redditTwitterBot.git&lt;/b&gt;&lt;/a&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/z64WlePPB9o/now-you-know-what-i-did-last-weekend.html</link><author>noreply@blogger.com (dade)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://1.bp.blogspot.com/-e9-U0B-cPqI/UOakuXATM2I/AAAAAAAAAWM/NX50fp6o-QY/s72-c/javit_post.png" height="72" width="72" /><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2013/01/now-you-know-what-i-did-last-weekend.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-6426971116899669075</guid><pubDate>Tue, 28 Aug 2012 18:19:00 +0000</pubDate><atom:updated>2013-04-06T18:56:40.528+01:00</atom:updated><title>Understanding Zend Framework’s Plugin: Resource Plugin...(Part Three)</title><description>This post on Resource Plugin would be the last in the series of posts on Plugins as we have it in Zend Framework that I started a couple of weeks back. The previous two posts were on &lt;a href="http://geekabyte.blogspot.nl/2012/07/understanding-zend-frameworks-plugin.html"&gt;Simple Class/Front Controller Plugin&lt;/a&gt; and &lt;a href="http://geekabyte.blogspot.nl/2012/08/understanding-zend-frameworks-plugin.html"&gt;Controller Action Helper and View helpers&lt;/a&gt;.&lt;br /&gt;
&lt;br /&gt;
Resource Plugin are tied to bootstrapping process in Zend Framework. In order to get a good understanding of Resource Plugins, it would be good to first of all take a step back and have an overview of what Bootstrapping means in Zend Framework’s context. This would help in getting a better understanding of what actually goes on when we say we want to make use of or write our own Resource plugins.&lt;br /&gt;
&lt;br /&gt;
&lt;h3&gt;So what exactly is Bootstrapping?&lt;/h3&gt;Whenever a Zend Framework application is accessed, the following process must occur in order for the application to run and respond to a request. These processes occur in the order that they are listed below: &lt;br /&gt;
&lt;br /&gt;
1.&lt;i&gt;Application Bootstrapping:&lt;/i&gt; This is the process of preparing the application and making sure things needed to run it are available: setting up application environment etc.&lt;br /&gt;
&lt;br /&gt;
2.&lt;i&gt;URL Routing:&lt;/i&gt; Process of getting the URL and determining the respective Modules, Controller, Action that is being referred to in the application.&lt;br /&gt;
&lt;br /&gt;
3.&lt;i&gt;Dispatch:&lt;/i&gt; This is actually the process of initiating and calling the necessary controller and action from the specified module (if module is specified)&lt;br /&gt;
&lt;br /&gt;
&lt;a name='more'&gt;&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
As you can see, the first thing that happens is the Bootstrapping process and this is what we are most interested in, in this post.&lt;br /&gt;
&lt;br /&gt;
So what does the Bootstrapping do? As stated above, it is basically the process of initiating your application and making it ready. In Zend Framework, it is the &lt;b&gt;Zend_Application&lt;/b&gt; component that takes care of this. The Official Documentation describes &lt;b&gt;Zend_Application&lt;/b&gt; as providing a bootstrapping facility for applications which provides re-usable resources, common- and module-based bootstrap classes and dependency checking. Simply put: It sets your application running.&lt;br /&gt;
&lt;br /&gt;
One important thing to take note of is the fact that at the point of Bootstrapping, your application is not aware of what will happen next after bootstrapping; i.e. which Module, Controller or Action that would be called, but what it does is to make dependencies or settings which might be needed at later stages in your application available; and accessible when needed.&lt;br /&gt;
&lt;br /&gt;
A trivial example would be having the Operating System the application is running set and available later on in the request process.&lt;br /&gt;
&lt;br /&gt;
So that is Bootstrapping: getting the application ready to run. But what if you want to include some certain operations in your Bootstrapping process? Is there a way to do this?&lt;br /&gt;
&lt;br /&gt;
Yes! Thankfully Zend Framework allows us to ‘interfere’ or better put, to customize what goes on during this Bootstrapping process. Meaning we can determine which codes to run as part of the default bootstrapping routine, and thus we can specify which constants, resources etc should be set and made  available at the end of bootstrapping. &lt;br /&gt;
&lt;br /&gt;
And it is this that leads us to Resource Plugins because as you would soon see, Resource Plugin is Zend Frameworks way of letting us have our own code that can be Plugged in during Bootstrapping.&lt;br /&gt;
&lt;br /&gt;
The methods we have for this sort of inclusion during Bootstrapping are via Resource Methods and Resource Plugins.&lt;br /&gt;
&lt;br /&gt;
&lt;h3&gt;Resource Methods using Bootstrap.&lt;/h3&gt;The &lt;b&gt;Zend_Application&lt;/b&gt; works with &lt;b&gt;Zend_Application_Bootstrap&lt;/b&gt; in the business of bootstrapping.  This is why in your Bootstrap.php file the &lt;b&gt;Zend_Application_Bootstrap&lt;/b&gt; is always extended  (and  &lt;b&gt;Zend_Application_Module_Bootstrap&lt;/b&gt; in the case where you have modules)&lt;br /&gt;
&lt;br /&gt;
To set up codes that run during the bootstrap process, just create a Method of the Bootstrap class and prepend it with &lt;b&gt;_init&lt;/b&gt;. &lt;br /&gt;
&lt;br /&gt;
Let’s assume you have some contact info (say email, phone, address etc.) that you want to make globally available in your application. One way to do this is to set these variables during the bootstrapping processes.&lt;br /&gt;
&lt;br /&gt;
Let’s see how the code may look:&lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
 
 protected function _initInfo()
 {
$contact= array(
            'email'     =&amp;gt; 'youremail@yourdomain.com',
            'phone' =&amp;gt; 'yourphonenumber',
            'address' =&amp;gt; 'youraddress'       
 );
 }

 Zend_Registry::set("contact ", $contact);

}
&lt;/pre&gt;&lt;br /&gt;
Notice that the &lt;b&gt;Zend_Registry&lt;/b&gt; is used to store the array. Other Zend Components just like &lt;b&gt;Zend_Registry&lt;/b&gt; can be accessible at the point of Bootstraping.&lt;br /&gt;
&lt;br /&gt;
With this, you can now access the stored variables anywhere in your application via&lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;Zend_Registry::get('contact');&lt;/pre&gt;&lt;br /&gt;
This is what is called Resource Methods: And it brings us to the next method which is actual Resource Plugins&lt;br /&gt;
&lt;br /&gt;
&lt;h3&gt;Resource Plugins&lt;/h3&gt;At this point, you now know what Resource methods are and how they are created. What you would notice with Resource methods is the fact that they are tied to a particular Bootstrap and thus it is a tad more difficult to re-use whatever code you have in that Bootstrap in other different applications.&lt;br /&gt;
&lt;br /&gt;
Sometimes you have certain bootstrapping functionalities that are general enough to be re-used across different applications and not have tied to a specific Bootstrap file. It is for such instances that you would find yourself needing to write a Resource Plugin.&lt;br /&gt;
&lt;br /&gt;
Resource Plugin make code (that are needed during bootstrapping) easily re-useable across different projects.&lt;br /&gt;
&lt;br /&gt;
So let us see how this is done.&lt;br /&gt;
&lt;br /&gt;
&lt;h3&gt;Writing Resource Plugin&lt;/h3&gt;&lt;br /&gt;
To illustrate, we will use yet another trivial example:  setting up global application variables. Most likely if you have an application, you would have settings like the App Name, App Version, List of Developers, License, Copyright, Company Name etc. This is general enough for you to want to put the process of setting these variables up into a Resource Plugin instead of a Resource method.&lt;br /&gt;
&lt;br /&gt;
To write a Resource Plugin, first thing you do is to edit your application.ini file as the application.ini file is needed for you to put a Resource Plugin together. So, for our example let’s assume the variables we want to set are Application Name, Application Version, List of Developers, and license.&lt;br /&gt;
&lt;br /&gt;
Next, let’s also assume that the Resource Plugin code that we would be writing would be found in &lt;b&gt;appsettings.php&lt;/b&gt;.&lt;br /&gt;
&lt;br /&gt;
You can then have the following in your application.ini&lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;pluginPaths.MyResource =  APPLICATION_PATH "/../library/resourceplugins"&lt;/pre&gt;&lt;br /&gt;
What this means is that you have a Class prefix named “MyResource” and it autoloads from the APPLICATION_PATH "/../library/resourceplugins/". &lt;br /&gt;
&lt;br /&gt;
This also allows Zend Framework know where your Resource Plugin, which would have MyResource as Class Prefix, be located.&lt;br /&gt;
&lt;br /&gt;
So we have the Resource plugin file (named appsettings.php with MyResource as Class Prefix) and it would be placed inside the resourceplugins folder.&lt;br /&gt;
&lt;br /&gt;
Next thing you should do in the application.ini file is to set the values you want for your resource plugin.&lt;br /&gt;
&lt;br /&gt;
Your application.ini may look like this:&lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;resources.appsettings.name = Zend Awesome App   //name of app
resources.appsettings.version = 1.4.0   //version of app
resources.appsettings.developers = Jack,Jill   //developers
resources.appsettings.license  = GPL   //type of license for your app
&lt;/pre&gt;&lt;br /&gt;
With the above you have specified that you have a resource called appsettings with name, version, developers and license as options which has been set.&lt;br /&gt;
&lt;br /&gt;
This is the basic thing you need to do as far as the application.ini is concerned. The next thing is to author the appsettings.php file itself.&lt;br /&gt;
&lt;br /&gt;
The appsettings.php should contain codes that would look like this:&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;class MyResource _ appsettings extends Zend_Application_Resource_ResourceAbstract
{
protected $_options = array(
        ' name '         =&amp;gt; 'default_name',
        ' version '           =&amp;gt; 'default_version',
        ' developers ' =&amp;gt; 'default_list_of_developers',
        ' license ' =&amp;gt; 'default_license',
    );




public function init()
{
$option = $this-&amp;gt;getOptions();
Zend_Registry::set('name', $option['name]);
Zend_Registry::set('version', $option['version']);
Zend_Registry::set('developers', $option['developers']);
Zend_Registry::set('license', $option['license'])
}
&lt;/pre&gt;&lt;br /&gt;
Notice that the class extends &lt;b&gt;Zend_Application_Resource_ResourceAbstract&lt;/b&gt;. This is what makes the class a Resource Plugin and not something else.&lt;br /&gt;
&lt;br /&gt;
Now,let’s take a look at some of the things going up there.&lt;br /&gt;
&lt;br /&gt;
What this Resource plugin does is simple. It just takes the value entered in the Application.ini and stores it in Zend_Registery thereby making it available, application wide in the project. &lt;br /&gt;
&lt;br /&gt;
First thing you have is the protection $_option property being assigned in an array of values. This is such that you have default values for the keys in the appsettings Resource Plugin should in case it is not specified in the application.ini&lt;br /&gt;
&lt;br /&gt;
Next thing you have is &lt;b&gt;Zend_Registry&lt;/b&gt; being set in the init Method. This is what makes the values globally present in your application and as you can see, the values that are set in the application.ini (or the default) can be retrieved via the &lt;b&gt;getOptions()&lt;/b&gt; method of the Resource Plugin Class.&lt;br /&gt;
&lt;br /&gt;
The &lt;b&gt;getOptions&lt;/b&gt; is one of the Method you have available for you for use from the class Zend_Application_Resource_ResourceAbstract which your Resource Plugin is extending. Other methods include setOptions, mergeOptions etc. To see the available methods and have an idea of what they do you can take a peek at the Zend_Application_Resource_ResourceAbstract class itself which you can find in &lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;Library/Zend/Application/Resource/ResourceAbstract.php 
&lt;/pre&gt;&lt;br /&gt;
And it goes without saying that your Resource Plugin is a full fledge PHP class meaning you can write more additional methods that gets to perform more complex task during the bootstrapping process other than just creating a Zend_Registry key like we have in the trivial example above.&lt;br /&gt;
&lt;br /&gt;
Just like most of every other thing in Zend Framework, there are some Resource Plugins already made available to you that you can use in your application instead of having to reinvent the wheel. The common ones that you would find yourself using include DB (for setting Db related settings), Layout (for Layout specific settings), Modules (for setting up modular application structure), Router (for setting up customized routing) etc. These available Resource Plugins that ship with Zend Framework are quite handy. You can find the &lt;a href="http://framework.zend.com/manual/en/zend.application.available-resources.html"&gt;available resource plugins&lt;/a&gt; on Zend Framework Official Manual page.&lt;br /&gt;
&lt;br /&gt;
I guess we’ve finally gotten to the end of the series on Zend Framework’s plugin. I really hope these 3 posts (the previous two being on &lt;a href="http://geekabyte.blogspot.nl/2012/07/understanding-zend-frameworks-plugin.html"&gt;Simple class/front Controller Plugin&lt;/a&gt; and &lt;a href="http://geekabyte.blogspot.nl/2012/08/understanding-zend-frameworks-plugin.html"&gt;Controller Action Helper/View Helper&lt;/a&gt;) will help shed more light into the world of Plugins as we have them in Zend Framework. &lt;br /&gt;
&lt;br /&gt;
Got any suggestions or thoughts? Do drop them in the comments.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/rtZ0zpWaThY/understanding-zend-frameworks-plugin_28.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2012/08/understanding-zend-frameworks-plugin_28.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-5856156898058554236</guid><pubDate>Sun, 05 Aug 2012 08:27:00 +0000</pubDate><atom:updated>2013-04-06T18:16:15.664+01:00</atom:updated><title>Understanding Zend Framework’s Plugin: Controller Action Helper Plugin, and View Helper...(Part Two)</title><description>Last week I started off with the &lt;a href="http://geekabyte.blogspot.nl/2012/07/understanding-zend-frameworks-plugin.html"&gt;first post in a series of post&lt;/a&gt; on plugins as you have in Zend Framework. This is the second part of the series, where I would look at Zend framework’s &lt;b&gt;Controller Action Helper&lt;/b&gt; and &lt;b&gt;View Helper&lt;/b&gt;, since the previous post covered Simple Class plugin and Front Controller plugin - you can read it here.&lt;br /&gt;
As I said in my previous post, the idea behind these series of posts is to shed some light on plugins and the different incarnation that exists within Zend framework; &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;h3&gt;
Controller Action Helper&lt;/h3&gt;
First let me start by explicitly saying that Controller Action Helper and Front Controller Plugin are different, although they may sound alike. &lt;a front_controller_plugin="" geekabyte.blogspot.de="" href="http://www.blogger.com/%E2%80%99" http:=""&gt;Read about Front Controller Plugin here.&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
Controller Action Helpers are the kind of Plugins that are tied to your Controller Actions, and just as Front Controller plugin, they can run specific tasks at some predefine stages of the MVC cycle; though this isn't mandatory. The key difference between Front controller plugins and Controller Action Helper is that your controllers can interact with action helpers to change their behavior, or use some on-demand functionality while this is not the case with Front Controller plugins.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;a name='more'&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
&lt;b&gt;How to write and use a Controller Action Helper&lt;/b&gt;&lt;br /&gt;
Like every other plugin you have in Zend framework, your Controller Action helper is just another PHP Class with specialized properties based on the class it extends. &lt;br /&gt;
&lt;br /&gt;
The first step is to create your class file and put it in the most appropriate place. For Controller Action Helper, the preferred way is to have a Helper directory inside your Controller Folder that would house all your Action Helpers. &lt;br /&gt;
This is not necessarily the case every time. Your action helpers can exist outside of your controller folder and still work. For instance, if you have a helper that applies to all controllers, then you can as well have the Helpers in the Library directory. &lt;br /&gt;
&lt;br /&gt;
So let’s say we go with the preferred way, (having a helper directory in the Controller directory for our helpers) and we have a Controller Action Helper class file called help.php we would have the following director structure&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;/path/to/app
       Application/
               Configs/
               controllers/
            helpers/
        help.php
&lt;/pre&gt;
&lt;br /&gt;
Inside your help.php you can have the following code&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;class Zend_Controller_Action_Helper_Help extends Zend_Controller_Action_Helper_Abstract
{
 Public function init()
 
 {
  echo “SOS!";
 }

              Public function postDispatch()
 {
        }

Public function preDispatch()
 {
        }

Public function scream()
       {
              Echo “Can someone please help!!!”;
       }

}
&lt;/pre&gt;
&lt;br /&gt;
&lt;br /&gt;
Note that the class extends Zend_Controller_Action_Helper_Abstract and the class Help is prefixed by Zend_Controller_Action_Helper_&lt;br /&gt;
&lt;br /&gt;
Also notice, the Class has some familiar methods: notable PostDispatch() and preDispatch() methods. This is because Controller Action Helpers too have unique methods which can be implemented that allow us to invoke custom functionalities at different time in the code execution.  Some of the method includes: &lt;br /&gt;
&lt;br /&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;getActionController()&lt;/strong&gt;&lt;br /&gt;
used to get the current action controller.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;init()&lt;/strong&gt;&lt;br /&gt;
triggered by the helper broker at instantiation, can be used to trigger initialization in the helper; this can be useful for resetting state when multiple controllers use the same helper in chained actions.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;preDispatch()&lt;/strong&gt;&lt;br /&gt;
triggered prior to a dispatched action.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;postDispatch()&lt;/strong&gt;&lt;br /&gt;
triggered when a dispatched action is done -- even if a preDispatch() plugin has skipped the action. Mainly useful for cleanup.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;getRequest()&lt;/strong&gt;&lt;br /&gt;
retrieves the current request object.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;getResponse()&lt;/strong&gt;&lt;br /&gt;
retrieves the current response object.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;getName()&lt;/strong&gt;&lt;br /&gt;
retrieves the helper name. It retrieves the portion of the class name following the last underscore character, or the full class name otherwise. &lt;/li&gt;
&lt;/ul&gt;
&lt;br /&gt;
So once you have your Action Helper code written, the next thing you need to do is to configure your Zend Application to be aware of the Controller Action Helper. There are two ways to do this. &lt;br /&gt;
1) Via Application.ini&lt;br /&gt;
2) Via Bootstrap.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;&lt;em&gt;Via Application.ini&lt;/em&gt;&lt;/strong&gt;&lt;br /&gt;
To use the application.ini approach, just include the following in your application.ini &lt;br /&gt;
&lt;br /&gt;
resources.frontController.actionHelperPaths.help = APPLICATION_PATH "/controllers/helpers"&lt;br /&gt;
&lt;br /&gt;
The bold text is the name of the Helper. In this example, it’s help. And the value of this key point to the location of the helper files for the application. &lt;br /&gt;
&lt;br /&gt;
That is APPLICATION_PATH "/controllers/helpers"&lt;br /&gt;
&lt;br /&gt;
Once you have this set up this way, your Action Helper is ready to be used.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;&lt;em&gt;Via Bootstrap.php&lt;/em&gt;&lt;/strong&gt;&lt;br /&gt;
To use the bootstrap.php approach, you can have the following code in your Bootstrap.php &lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
public function _initLoader()
{
 Zend_Controller_Action_HelperBroker::addPath(APPLICATION_PATH .'/controllers/helpers'); 
}
}
&lt;/pre&gt;
&lt;br /&gt;
If you want to change the prefix to the class name from Zend_Controller_Action_Helper_ to something of your choice, &lt;br /&gt;
you should add this as the second variable of the ::addPath method&lt;br /&gt;
i.e. &lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;Zend_Controller_Action_HelperBroker::addPath(APPLICATION_PATH .'/controllers/helpers', 'My_Own_Prefix_');&lt;/pre&gt;
&lt;br /&gt;
When you have this, you must edit your Controller Action file above to class &lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;Class My_Own_Prefix_Help extends Zend_Controller_Action_Helper_Abstract&lt;/pre&gt;
&lt;br /&gt;
With the following code in your Bootstrap, your Zend application would be aware of your Action Helper. This is the second way of doing it.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Using the Controller Action Helper&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
Now that you have your Action Helper code written and your application is properly configured, the next thing is being able to use it.&lt;br /&gt;
In your action, you can access your Helper class via the _helper broker. So to use the scream() method that we have in the code above in your action, you just have&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;class IndexController extends Zend_Controller_Action
{
    public function init()
    {
        /* Initialize action controller here */
    }
    public function indexAction()
    {
 $this-&amp;gt;_helper-&amp;gt;help-&amp;gt;scream();
    }
}

&lt;/pre&gt;
&lt;br /&gt;
And that is it!!&lt;br /&gt;
Remember you can always make use of the predefined hooks of Action Helpers and have code injected at stages of the MVC cycle.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;h3&gt;
View Helpers&lt;/h3&gt;
&lt;br /&gt;
View Helpers are to Views what Controller Action Helpers are to Controllers. View helpers are just simply what make it possible to develop codes that are specific to Views. &lt;br /&gt;
&lt;br /&gt;
A View Helper is a method added to the view objects  which you can easily use in the view script.&lt;br /&gt;
&lt;br /&gt;
For example, in your view script you can have something similar to this&lt;br /&gt;
&lt;br /&gt;
&lt;pre&gt;echo $this-&amp;gt;showCountries();&lt;/pre&gt;
&lt;br /&gt;
Where showCountries() is a method that generates the list of countries and display it in an HTML select format. &lt;br /&gt;
&lt;br /&gt;
The showCountries() method is one example of a View Helper. View Helpers are the means  by which Zend Framework provides you with customized code or functionality available in your view script.&lt;br /&gt;
&lt;br /&gt;
Zend framework comes with various View Helpers you can easily use in your project. You can find more information about these View Helpers on the &lt;a href="http://framework.zend.com/manual/en/zend.view.helpers.html"&gt;documentation page&lt;/a&gt;:  &lt;br /&gt;
&lt;br /&gt;
What about writing your own View Helpers? Find out how below:&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;How to write and use a View Helper&lt;/b&gt;&lt;br /&gt;
Just like every other Zend framework plugin, the View Helper is a class. By default Zend Framework looks for View helper class file in the following location&lt;br /&gt;
&lt;br /&gt;
1. The folder called helpers within the views&lt;br /&gt;
2. The Folder called Helpers with the Layout folder&lt;br /&gt;
&lt;br /&gt;
You can also have your View Helper class in a location of your choosing; say in the Library/Myviewhelper/ location.&lt;br /&gt;
&lt;br /&gt;
Let us see how View Helpers look like in Default location&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;&lt;em&gt;View Helpers in Default Location&lt;/em&gt;&lt;/strong&gt;&lt;br /&gt;
Let’s say we want to implement the showCountries() method, using the default locations, we create a file showcountries.php inside the View folder found in the Module or in the Layout folder. The code might look like this&lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;class Zend_View_Helper_showcountries extends Zend_View_Helper_Abstract
{
 public function showCountries()
 {
  //code to connect to a database
       //Get all the countries and format it as select HTML
            //Return the HTML string
 }
} 
&lt;/pre&gt;
&lt;br /&gt;
Notice that the Class prefix is Zend_View_Helper_ this is the case when the file is placed inside the default locations.&lt;br /&gt;
&lt;br /&gt;
And that is it. You can now proceed to the View files and call the showcountries() function&lt;br /&gt;
&lt;br /&gt;
&lt;pre&gt;echo $this-&amp;gt;showCountries(); &lt;/pre&gt;
&lt;br /&gt;
It is that simple!&lt;br /&gt;
&lt;br /&gt;
Two things to take note of: First, is that you only have one method and the method name should be the name of the Class file and this would be name of the method that would be called in the view script. For the example above, the method is showCountries()&lt;br /&gt;
&lt;br /&gt;
The second thing to note is that the convention is to have your View Helpers returns the string and then the view script echoes it. &lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;&lt;em&gt;View Helpers in Location of Choice&lt;/em&gt;&lt;/strong&gt;&lt;br /&gt;
For varied reasons you might want your View helpers located in a different location other than the default, perhaps you want a View Helper that is accessible site wide and not specific to a module.&lt;br /&gt;
&lt;br /&gt;
To do this, follow the steps:&lt;br /&gt;
1. Create a new folder say 'Helpers' inside your 'Library' folder&lt;br /&gt;
2. Put your View Helper File inside a file you would name 'showcountries.php'&lt;br /&gt;
3. Inside the showcountries.php you have the following code:&lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;class Helpers_ showcountries extends Zend_View_Helper_Abstract
      {   
           public function showCountries()
 {
  //code to connect to a database
       //Get all the countries and format it as select HTML
            //Return the HTML string
 }
   
}
&lt;/pre&gt;
&lt;br /&gt;
And in your Application.ini add the view helper path as follows so your application is aware of the View Helper:&lt;br /&gt;
&lt;br /&gt;
&lt;pre style="font-style: courier;"&gt;resources.view.helperPath.Helpers = "Helpers/"&lt;/pre&gt;
&lt;br /&gt;
And once you have it this way, you can then go ahead and use your custom View Helper in your view scripts.&lt;br /&gt;
&lt;br /&gt;
And that is it for this post. Do not forget to check the previous post for how &lt;a geekabyte.blogspot.de="" href="http://www.blogger.com/%E2%80%9D" http:="" understanding-zend-frameworks-plugin.html=""&gt;Front Controller plugin and Simple Class plugin works.&lt;/a&gt; Next post would be on &lt;a href="http://geekabyte.blogspot.nl/2012/08/understanding-zend-frameworks-plugin_28.html"&gt;Zend Framework’s Resource Plugin.&lt;/a&gt; </description><link>http://feedproxy.google.com/~r/Geekabyte/~3/LyF0eMGoWCA/understanding-zend-frameworks-plugin.html</link><author>noreply@blogger.com (dade)</author><thr:total>1</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2012/08/understanding-zend-frameworks-plugin.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-580118923773450598</guid><pubDate>Sun, 22 Jul 2012 00:07:00 +0000</pubDate><atom:updated>2013-04-06T18:51:46.186+01:00</atom:updated><title>Understanding Zend Framework’s Plugin: Front Controller Plugin, Controller Action Helper, View Helper, Resource Plugin...(Part One)</title><description>&lt;br /&gt;
This post is the first of three posts on Zend Framework's plugin. It would give a quick overview of the concepts of &lt;b&gt;Plugins&lt;/b&gt; in Zend Framework. The aim is to provide an easy and short explanation of various plugin related concepts in zend framework; making it easy for a new comer to get up and running in no tim.&lt;br /&gt;
&lt;br /&gt;
Usually, after getting the basics of Zend framework; that is: setting up your projects, using the Zend_Tool, &amp;nbsp;using controllers and views etc, more often than not, the next points of confusion for the new user usually stems from having to grapple with the various minor concepts within Zend framework.&lt;br /&gt;
&lt;br /&gt;
An example of these concepts is the idea of Plugins. Plugins by itself is a simple concept right? But within Zend Framework, there are so many variant of plugins that it could quickly get perplexing to a new user.&lt;br /&gt;
&lt;br /&gt;
What is a &lt;i&gt;Front Controller Plugin&lt;/i&gt;? What is a &lt;i&gt;Resource Plugin&lt;/i&gt;? What about our &lt;i&gt;View Helpers&lt;/i&gt;? How are these different from &lt;i&gt;Controller Action Helper&lt;/i&gt;? Wait. There is a Controller Action Helper? How is it different from our Front Controller Plugin? As you see...it could get confusing pretty fast.&lt;br /&gt;
&lt;br /&gt;
Like I said in my previous post on &lt;a href="http://geekabyte.blogspot.nl/2012/04/setting-up-modular-application.html" target="_blank"&gt;how to set up a modular application structure&lt;/a&gt;, zend framework itself is not inherently difficult, just that it could take a while to wrap a head around how everything fits together, plus the paucity of useful and up to date resources out there does nothing to help matters.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;a name='more'&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
&lt;br /&gt;
So with this post I seek to shed some light on Plugins and the different common incarnations that we have within Zend framework. It would be brief. I would give a simple introduction to the different types of plugin, how they are created and how they are set up. I would not go into details about the workings of the plugins; that would be for other times.&lt;br /&gt;
&lt;br /&gt;
In this post, I would cover the Simple Class Plugin and Front Controller plugin while the remaining types would be covered in the second part of this post.&lt;br /&gt;
&lt;br /&gt;
This been said, let us start.&lt;br /&gt;
&lt;br /&gt;
So what is a Plugin. In the context of Zend framework I would describe it as a written Class with methods that can be invoked programmatically by the programmer in other parts of the application or automatically during the execution of Request/Response operations of Zend Framework.&lt;br /&gt;
&lt;br /&gt;
Going by the above&amp;nbsp;definition, I can easily say we have the following kinds of plugins&lt;br /&gt;
&lt;br /&gt;
&lt;ol&gt;
&lt;li&gt;Simple Class&amp;nbsp;Plugin&lt;/li&gt;
&lt;li&gt;Front Controller Plugin&lt;/li&gt;
&lt;li&gt;Controller Action Helper&lt;/li&gt;
&lt;li&gt;View Helper&lt;/li&gt;
&lt;li&gt;Resource Plugin&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-size: x-large;"&gt;&lt;a href="http://www.blogger.com/simple_class"&gt;Simple Class Plugin&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div class="MsoNormal"&gt;
Your simple class plugin can be described as classes that you write to take care of a specific task which does not necessarily have to depend on any of the callbacks or hooks you have within Zend Framework request/response operation. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
It’s basically the same way you have a class that performs a specific task, you include it using PHP's&lt;a href="http://php.net/manual/en/function.include.php" target="_blank"&gt; include function&lt;/a&gt; and you can&amp;nbsp;instantiate its object and use its functionality.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;b&gt;&lt;br /&gt;
&lt;/b&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;b&gt;How to write and use a Normal Plugin&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Start by indicating to Zend Framework where your Class would be located so it can auto-load it. You do this by defining a default Namespace. Your namespace is technically the directory where your class would reside i.e. where Zend framework would autoload it from. To do this, add the following entry into you application.ini file:&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;autoloaderNamespaces[] = "Ext_"&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt; Ext&lt;/b&gt; is thus the directory and your namespace. And this directory should be created inside the Library Directory.&lt;br /&gt;
&lt;br /&gt;
&lt;/li&gt;
&lt;li&gt;Next is to create your class file and have it saved inside the Ext directory. For example if we are writing a plugin that does a simple task of printing the current date, we can create a file and save it as &lt;i&gt;date.php.&lt;/i&gt;&lt;br /&gt;
&lt;/li&gt;
&lt;li&gt;Then write the code of your class:&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;Class Ext_date&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; Public function echoDate()&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;{&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;echo date("Y-m-d H:i:s")&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
Notice that the class name is a combination of the Namespace you defined and the name of the file. This should be the case if you want Zend Framework to be able to find your class; having it this way, you have your Plugin created and ready to be used.&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
You make use of it like you make use of any other PHP class.&amp;nbsp;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;$dateutiliy = new Ext_date()&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;$dateutility-&amp;gt;echoDate()&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Note that the Ext_date is made available for you and can be called from anywhere within your Zend project: be it inside a controller, view, model or your bootstrap.&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div class="MsoNormal"&gt;
&lt;span style="font-size: x-large;"&gt;&lt;a href="" name="front_controller_plugin"&gt;Front Controller Plugin&lt;/a&gt;&lt;/span&gt;&lt;b&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
Front controller plugin are the type of plugin you have which are designed to perform certain tasks at specific stages in the MVC cycle. You can use it to perform stuffs like checking whether a user is authenticated or logging requests to a database for analytics.&amp;nbsp;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="MsoNormal"&gt;
Zend Framework implements the &lt;a href="http://en.wikipedia.org/wiki/Front_Controller_pattern" target="_blank"&gt;Front Controller design pattern&lt;/a&gt;. The Front controller plugin hence allows you insert specific functionality into the Front controller process. This is different from Controller Action Plugin as a Controller Action Plugin fits into the Actions of Controllers.&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4&gt;
How to write and use a Front Controller Plugin&lt;/h4&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div class="MsoNormal"&gt;
The process would involve two steps. One, creating the Front Controller Plugin File and two, configure Zend Framework to be aware of the Front Controller Plugin File.&lt;o:p&gt;&lt;/o:p&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;i&gt;Creating your Front Controller Plugin File&lt;/i&gt;&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;ol&gt;
&lt;li&gt;Have a namespace defined. So just like in the previous example, you can set up a namespace by adding this to your application.ini&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;autoloaderNamespaces[] = "Ext_"&lt;br /&gt;
&lt;/span&gt;And have a directory Ext created inside your Library directory.&lt;br /&gt;
&lt;/li&gt;
&lt;li&gt;Now create your Class file. Let say we have a front controller plugin file called &lt;i&gt;fcplugin.php&lt;/i&gt; create this file and save it inside the Ext directory.&lt;br /&gt;
&lt;/li&gt;
&lt;li&gt;Inside the fcplugin.php file you may have the following code&lt;/li&gt;
&lt;/ol&gt;
&lt;br /&gt;
&lt;pre style="font-family: 'Courier New';"&gt;Class Ext_fcplugin extends Zend_Controller_Plugin_Abstract
{

Public function __construct()
{
/*constructor*/
}

Private function myInnervoice()
{
/*shows that you can have your own custom methods*/

return “I want chocolate”;

}

Public function 
routeStartup(Zend_Controller_Request_Abstract $request)
{
/*implementing one of the methods available in Zend_Controller_Plugin_Abstract*/

$this-&amp;gt;getResponse()-&amp;gt;appendBody("routeStartup() called And my inner voice says ".$this-&amp;gt;myInnervoice());

}

Public function 
dispatchLoopShutdown(Zend_Controller_Request_Abstract $request)
{
/*implementing one of the methods available in Zend_Controller_Plugin_Abstract*/

$this-&amp;gt;getResponse()-&amp;gt;appendBody("dispatchLoopShutdown() called
And my inner voice says ".$this-&amp;gt;myInnervoice());

}

}&lt;/pre&gt;
&lt;br /&gt;
&lt;i&gt;&lt;b&gt;Uniqueness of Front Controller Plugin.&lt;/b&gt;&lt;/i&gt;&lt;br /&gt;
&lt;br /&gt;
To have a Front Controller Plugin your class needs to extend &lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;Zend_Controller_Plugin_Abstract,&lt;/span&gt;&amp;nbsp;and as such you have specialized methods that you have defined that you can implement in your class that makes it possible for you to have your code run at different part of the MVC operation.These are hooks. It is in this, you have the plugin classified as a Front Controller Plugin.&lt;br /&gt;
&lt;br /&gt;
The Methods you have are:&lt;br /&gt;
&lt;br /&gt;
•&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;&lt;b&gt;routeStartup()&lt;/b&gt;&lt;br /&gt;
&lt;i&gt;called before Zend_Controller_Front calls on the router to evaluate the request against the registered routes.&lt;/i&gt;&lt;br /&gt;
•&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;&lt;b&gt;routeShutdown()&amp;nbsp;&lt;/b&gt;&lt;br /&gt;
&lt;i&gt;called after the router finishes routing the request.&lt;/i&gt;&lt;br /&gt;
•&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;&lt;b&gt;dispatchLoopStartup()&amp;nbsp;&lt;/b&gt;&lt;br /&gt;
&lt;i&gt;called before Zend_Controller_Front enters its dispatch loop.&lt;/i&gt;&lt;br /&gt;
&lt;b&gt;•&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;preDispatch()&amp;nbsp;&lt;/b&gt;&lt;br /&gt;
&lt;i&gt;called before an action is dispatched by the dispatcher. This callback allows for proxy or filter behavior.&amp;nbsp;&lt;/i&gt;&lt;br /&gt;
&lt;b&gt;•&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;postDispatch()&amp;nbsp;&lt;/b&gt;&lt;br /&gt;
&lt;i&gt;called after an action is dispatched by the dispatcher. This callback allows for proxy or filter behavior. By altering the request and resetting its dispatched flag&amp;nbsp;&lt;/i&gt;&lt;br /&gt;
•&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;&lt;b&gt;dispatchLoopShutdown()&amp;nbsp;&lt;/b&gt;&lt;br /&gt;
&lt;i&gt;called after Zend_Controller_Front exits its dispatch loop&lt;/i&gt;.&lt;br /&gt;
&lt;br /&gt;
And as such you can have your class implement these methods and have your code executes at the different stage of the Front controller dispatch operation.&lt;br /&gt;
&lt;br /&gt;
Another thing to note is that the methods implemented have to be supplied an object of type &lt;i&gt;Zend_Controller_Request_Abstract &lt;/i&gt;as variable. This is done via Type hinting. &lt;a href="http://php.net/manual/en/language.oop5.typehinting.php" target="_blank"&gt;Read on Type Hinting here&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
After you have your code all written up and your plugin is complete, the next thing you need to do is to configure Zend Framework to be aware that your Plugin is in existence.&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
Configuring Zend Framework to be aware of your Front Controller Plugin&lt;/h4&gt;
This can be done via two ways.&lt;br /&gt;
&lt;br /&gt;
A) Via Application.ini (my preferred way)&lt;br /&gt;
B) Via Bootstrap.php&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;i&gt;Via Application.ini&lt;/i&gt;&lt;/b&gt;&lt;br /&gt;
To configure via your Application.ini just include the following settings:&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;resources.frontController.plugins[] = Ext_fcplugin&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
It is as simple as that.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;&lt;i&gt;Via Bootstrap.php&lt;/i&gt;&lt;/b&gt;&lt;br /&gt;
To use Bootstrap.php to make your application aware of your Front Controller Plugin, then you have your Bootstrap.php looking like below:&lt;br /&gt;
&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;class Bootstrap extends Zend_Application_Bootstrap_Bootstrap&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;{&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;public function _initLoader()&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;{&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;$front = Zend_Controller_Front::getInstance();&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;$front-&amp;gt;registerPlugin(new Ext_fcplugin());&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&amp;nbsp; &amp;nbsp;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;br /&gt;
&lt;/span&gt;&lt;br /&gt;
As you can see, what we did was to grab &lt;i&gt;Zend_Controller_Front&lt;/i&gt; class and use one of its methods &lt;i&gt;“registerPlugin&lt;/i&gt;” to make the application aware of the front Controller Plugin.&lt;br /&gt;
&lt;br /&gt;
Zend Framework does provide some Controller Plugin out of the box that you can make use of.&lt;br /&gt;
&lt;br /&gt;
Read about these from the &lt;a href="http://framework.zend.com/manual/en/zend.controller.plugins.html#zend.controller.plugins.standard" target="_blank"&gt;Documentation page:&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
That is for this post - Simple Class Plugin and Zend Framework's Front Controller Plugin. Once you have these basic understanding, it is much easier to delve deeper into the workings of the framework.&lt;br /&gt;
&lt;br /&gt;
The next post coming up would cover the Controller Action Helper and View Helper Plugin.&lt;/div&gt;
&lt;/div&gt;
</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/LRu_iJUAihk/understanding-zend-frameworks-plugin.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2012/07/understanding-zend-frameworks-plugin.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-1425353507987832701</guid><pubDate>Mon, 02 Jul 2012 09:49:00 +0000</pubDate><atom:updated>2013-04-06T18:54:05.361+01:00</atom:updated><title>Introduction to Git and GitHub</title><description>A presentation I made for an even earlier this year on Git. The presentation covers the basic work flow of init, clone, add, commit and push. Other commands like git remote, git pull etc are briefly touched.&lt;br /&gt;
&lt;br /&gt;
&lt;div id="__ss_13513987" style="width: 495px;"&gt;&lt;strong style="display: block; margin: 12px 0 4px;"&gt;&lt;a href="http://www.slideshare.net/dadepo/introduction-to-git-and-github-13513987" target="_blank" title="Introduction to git and github"&gt;Introduction to git and github&lt;/a&gt;&lt;/strong&gt; &lt;object height="497" id="__sse13513987" width="495"&gt; &lt;param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=introductiontogitandgithub-120702044048-phpapp01&amp;stripped_title=introduction-to-git-and-github-13513987&amp;userName=dadepo" /&gt;&lt;param name="allowFullScreen" value="true"/&gt;&lt;param name="allowScriptAccess" value="always"/&gt;&lt;param name="wmode" value="transparent"/&gt;&lt;embed name="__sse13513987" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=introductiontogitandgithub-120702044048-phpapp01&amp;stripped_title=introduction-to-git-and-github-13513987&amp;userName=dadepo" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="495" height="497"&gt;&lt;/embed&gt; &lt;/object&gt;  &lt;div style="padding: 5px 0 12px;"&gt;View more &lt;a href="http://www.slideshare.net/" target="_blank"&gt;presentations&lt;/a&gt; from &lt;a href="http://www.slideshare.net/dadepo" target="_blank"&gt;Aderemi Dadepo&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/SLML_hhtXC0/introduction-to-git-and-github.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2012/07/introduction-to-git-and-github.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-6564078317579620275</guid><pubDate>Tue, 29 May 2012 23:00:00 +0000</pubDate><atom:updated>2012-05-30T10:07:19.120+01:00</atom:updated><title>Maxlen Jquery Plugin</title><description>You know that little functionality where you want to limit the characters entered into an input field while showing the user how many characters they have entered or how much characters remaining? Think Twitter style, that limits the characters entered to 140 and shows you how many characters you have left for your tweet? &lt;br /&gt;
&lt;br /&gt;
This is exactly the functionality the &lt;a href="https://github.com/dadepo/maxlen"&gt;Maxlen JQuery Plugin&lt;/a&gt; implements, a JQuery plugin I had to put together as I got tired of the&amp;nbsp;repetitiveness&amp;nbsp;of having to implement this in my projects.&lt;br /&gt;
&lt;br /&gt;
Thing is, I recently implemented this function twice on two different projects in the last 2month, and I got irritated with having to copy and paste code all about&amp;nbsp;the place. And so I used it as an excuse to just write a JQuery plugin.&lt;br /&gt;
&lt;br /&gt;
JQuery obviously has a cool Plugin architecture so it did not take much time to put my first JQuery Plugin together :)&lt;br /&gt;
&lt;br /&gt;
&lt;a href="https://github.com/dadepo/maxlen"&gt;Maxlen JQuery Plugin&lt;/a&gt; is that: a simple JQuery plugin that allows you easily limit the number of characters that a user can write in a field and state either how many characters has been used or how many characters is left. It works with both Textarea field and the Input type text HTML element.&lt;br /&gt;
&lt;b&gt;&lt;br /&gt;
&lt;/b&gt;&lt;br /&gt;
&lt;b&gt;How It Works&lt;/b&gt;&lt;br /&gt;
&lt;a href="https://github.com/dadepo/maxlen"&gt;Maxlen JQuery Plugin&lt;/a&gt; can be used on either &lt;code&gt;Textarea&lt;/code&gt; element or &lt;code&gt;Input[type=text]&lt;/code&gt;. Once the Plugin is activated for the desired field, the number of characters entered would then be limited based on supplied settings. The default characters allowed is 160. This can easily be changed.&lt;br /&gt;
&lt;br /&gt;
The really useful part of the &lt;a href="https://github.com/dadepo/maxlen"&gt;Maxlen JQuery Plugin&lt;/a&gt; is the feedback it gives users as they type in, as the allowed character length can easily be done with the HTML&amp;nbsp;&lt;code&gt;maxlength&lt;/code&gt; property.&amp;nbsp;The plugin has two options of showing this: It can either show how many characters has been used or how many characters are remaining before the stipulated limit is reached.&lt;br /&gt;
&lt;br /&gt;
Usage is simple. To activate the plugin on a &lt;code&gt;textarea&lt;/code&gt; with an ID of "feedback" write:&lt;br /&gt;
&lt;br /&gt;
&lt;pre&gt;$(document).ready(function()
{
$('textarea#feedback').maxlen();

}
);
&lt;/pre&gt;
&lt;br /&gt;
This would use the default values and limit allowed characters to 160.&lt;br /&gt;
&lt;br /&gt;
&lt;a href="https://github.com/dadepo/maxlen"&gt;Maxlen JQuery Plugin&lt;/a&gt; can be used on more than one element at the same time. So the following code would work:&lt;br /&gt;
&lt;br /&gt;
&lt;pre&gt;$(document).ready(function()
{
$('textarea,input').maxlen();
}
);

&lt;/pre&gt;
or&lt;br /&gt;
&lt;br /&gt;
&lt;pre&gt;$(document).ready(function()
{
$('textarea').maxlen();
$('input').maxlen();
}
);
&lt;/pre&gt;
&lt;br /&gt;
Note that even though the type of Input is not specified, the plugin would only take effect on input[type=text]&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Options available&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
The previous codes initiates the Plugin with its default settings. But that is not the only way it can be used. It offers some level of&amp;nbsp;customization&amp;nbsp;options.&lt;br /&gt;
&lt;br /&gt;
To initiate the plugin with all the full options, you have:&lt;br /&gt;
&lt;br /&gt;
&lt;pre&gt;$('textarea').maxlen({
      'limit' : 160,
      'order' : 'desc',
      'class' : 'maxlen_class',
      'position' : 'above'
    });&lt;/pre&gt;
&lt;br /&gt;
A quick explanation of the options:&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;limit&lt;/b&gt;&lt;br /&gt;
States the limit of characters allowed. Default is 160.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;order&lt;/b&gt;&lt;br /&gt;
States whether the plugin would show how much characters has been used in the limit specified or how much is remaining.The allowed options are 'desc' and 'asc'. 'desc' shows remaining characters, 'asc' shows used characters. The default is 'desc'.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;class&lt;/b&gt;&lt;br /&gt;
States the class name for the indicator showing the characters. The default is maxlen_class. You can change this to whatever string you want. Use this class name to style the indicator.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;position&lt;/b&gt;&lt;br /&gt;
States where the indicator should be placed, whether above the input element or below. The allowed options are 'above' and 'below' The default is 'above'.&lt;br /&gt;
&lt;br /&gt;
That is all to it.&lt;br /&gt;
&lt;br /&gt;
So now that the plugin is out there, I hope it would prove useful to others too.&amp;nbsp;To get your hands on it and for full details on how to use it in your project, please head over to Github where it is hosted. You can grab it &lt;a href="https://github.com/dadepo/maxlen/zipball/master"&gt;here&lt;/a&gt;&amp;nbsp;and find the readme file &lt;a href="https://github.com/dadepo/maxlen/blob/master/README.md"&gt;here&lt;/a&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/2kQGLJv2X-8/maxlen-jquery-plugin.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2012/05/maxlen-jquery-plugin.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-1464421884783052217</guid><pubDate>Sat, 14 Apr 2012 23:03:00 +0000</pubDate><atom:updated>2012-04-15T17:45:50.054+01:00</atom:updated><title>Setting Up Modular Application Structure In Zend Framework.</title><description>&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="http://www.winwinhost.com/img/badges/zend-big.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="84" src="http://www.winwinhost.com/img/badges/zend-big.png" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;
I would be taking time out to write blog posts on Zend Framework and I hope to share as much as I can.&lt;br /&gt;
&lt;br /&gt;
I started using Zend framework a couple of months back and it gets the job done nicely. The only pain I had when I picked up the framework was the relative steep learning curve (steep when compared to things like Kohana and Code Igniter which I have played with in the past). And the steep learning curve is not as a result of the framework being inherently difficult to use but due to the apparent paucity of up to date and useful resources and guides out there. Truth be told, the level of documentation has improved in recent times, but I feel a framework as matured as Zend deserves more.&lt;br /&gt;
&lt;br /&gt;
My ensuing posts on Zend Framework won’t touch on the basics, i.e. setting up the framework; understanding MVC, how controllers work etc. No, the things I would write about would be a little bit above the basics. The ideal audience would be someone who has managed to set up a working copy of the framework but still find concepts like Auto loading, Resource plugins, View Helpers etc. little bit fuzzy.&lt;br /&gt;
&lt;br /&gt;
Looking for setup articles? You would find a nice one on&lt;a href="http://net.tutsplus.com/tutorials/php/zend-framework-from-scratch/"&gt; Nettut&lt;/a&gt;. The&lt;a href="http://framework.zend.com/manual/en/learning.quickstart.intro.html"&gt; quick start guide on Zend.com&lt;/a&gt; is also a good read.&lt;br /&gt;
&lt;br /&gt;
So that been said, let’s get to business.&lt;br /&gt;
&lt;br /&gt;
The very first thing I would blog about is something I feel you should take into consideration right after you have mastered the set up process of Zend Framework and you are able to set up your project. And this is Directory structure your application would take.&lt;br /&gt;
&lt;br /&gt;
Before we get into the details, let’s talk about what I mean by Directory Structure in the context of Zend Framework. It is simply the way your files are arranged in directories in the file system.&lt;br /&gt;
&lt;br /&gt;
There are different ways you can have your files laid out on the file system for your application and the way you choose would go a long way in determining how your application is structured and managed. &amp;nbsp;&amp;nbsp;The recommended structure (my personal recommendation and a couple of others) would be the Modular structure.&lt;br /&gt;
&lt;br /&gt;
As you must probably know, if you use Zend_Tool &amp;nbsp;to create your project the default layout would look thus:&lt;br /&gt;
&lt;code&gt;&lt;br /&gt;
/app&lt;br /&gt;
&amp;nbsp; &amp;nbsp; application/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; configs/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; controllers/&lt;br /&gt;
&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp;ErrorController.php&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; IndexController.php&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; views/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;helpers/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;scripts/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;error/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; error.phtml&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;index/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; index.phtml&lt;br /&gt;
&lt;span class="Apple-tab-span" style="white-space: pre;"&gt;  &lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; forms/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; docs/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; library/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; public/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; css/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; js/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; images/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; uploads/&lt;br /&gt;
&lt;/code&gt;&lt;br /&gt;
&lt;br /&gt;
In this set up, there is one general Controllers, Views, and Models folder where all the respective controllers, views and models files would be found. This set up is workable for a relatively small project, but when it comes to a much larger project the modular directory structure is most of the time advised.&lt;br /&gt;
&lt;br /&gt;
And what is the Modular Directory Structure? It looks like this.&lt;br /&gt;
&lt;br /&gt;
&lt;code&gt;&lt;br /&gt;
/app&lt;br /&gt;
&amp;nbsp; &amp;nbsp; application/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; configs/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; modules/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;default/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;controllers/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;layouts/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;views/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;forms/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;admin/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;controllers/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;layouts/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;views/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;forms/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;profile/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;controllers/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;layouts/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;views/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;forms/&lt;br /&gt;
&lt;span class="Apple-tab-span" style="white-space: pre;"&gt; &lt;/span&gt; &amp;nbsp; &amp;nbsp; search/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;controllers/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;layouts/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;views/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;forms/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; docs/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; library/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; public/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; css/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; js/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; images/&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; uploads/&lt;br /&gt;
&lt;/code&gt;&lt;br /&gt;
&lt;br /&gt;
In this set up, your models, views, and controllers are grouped together into self-contained “boxes” based on the different functional areas of your Web application. So for example if you have a web application that has the following functionalities/sections Admin, profile, search. You can easily package the files (controllers, views, models and more) responsible for these sections into distinct boxes (actually directory). Having such helps in having an easily decoupled and manageable set up where new functionality or third party component can easily be plugged in into your application.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
So how do we create a modular directory structure in Zend?&lt;br /&gt;
&lt;br /&gt;
There are two ways. You can either do it with the Zend_Tool or create it manually. It is recommended you use the Zend_Tool. Creating it manually is just having to create the files and directories the Zend_Tool would have created for you automatically.&lt;br /&gt;
&lt;br /&gt;
Note that to use the Zend_Tool you need to set it up. Find instructions on how to do this&lt;a href="http://framework.zend.com/manual/en/zend.tool.framework.clitool.html"&gt; here&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
To create a modular application structure using Zend_Tool, issue the following command:&lt;br /&gt;
&lt;br /&gt;
&lt;code&gt;&lt;br /&gt;
# mkdir /var/www/app&lt;br /&gt;
# cd /var/www/app&lt;br /&gt;
# zf create project .&lt;br /&gt;
Creating project at /var/www/app&lt;br /&gt;
&lt;/code&gt;&lt;br /&gt;
&lt;br /&gt;
Now change into the app directory and issue the following command, to create the admin module&lt;br /&gt;
&lt;br /&gt;
&lt;code&gt;zf create module admin&lt;/code&gt;&lt;br /&gt;
&lt;br /&gt;
The following operations would be performed&lt;br /&gt;
&lt;br /&gt;
&lt;code&gt;&lt;br /&gt;
Creating the following module and artifacts:&lt;br /&gt;
/var/www/app/application/modules/admin/controllers&lt;br /&gt;
/var/www/app/application/modules/admin/models&lt;br /&gt;
/var/www/app/application/modules/admin/views&lt;br /&gt;
/var/www/app/application/modules/admin/views/scripts&lt;br /&gt;
/var/www/app/application/modules/admin/views/helpers&lt;br /&gt;
/var/www/app/application/modules/admin/views/filters&lt;br /&gt;
Updating project profile '/var/www/app/.zfproject.xml'&lt;br /&gt;
&lt;/code&gt;&lt;br /&gt;
&lt;br /&gt;
Now as you can see you have your respective ‘controllers’, ‘models’, views/scripts, views/helpers, views/filters created. All you now need to do is to populate them with respective .php and .phtml files.&lt;br /&gt;
&lt;br /&gt;
But we are not finished yet. Final thing to do in other to have our Zend Framework Module aware is to edit the application.ini file appropriately. To do so, just add the following lines to the end of the Production block.&lt;br /&gt;
&lt;br /&gt;
&lt;code&gt;resources.frontController.moduleDirectory = APPLICATION_PATH "/modules"&lt;br /&gt;
&lt;br /&gt;
resources.modules[] = &lt;/code&gt;&lt;br /&gt;
&lt;br /&gt;
One last thing that you might want to do is to have autoloading functionality within your module. To do this, just create a Bootstrap.php file inside your module directory, in this case admin and have the following codes contained in it&lt;br /&gt;
&lt;br /&gt;
&lt;code&gt;&lt;br /&gt;
class Admin_Bootstrap extends Zend_Application_Module_Bootstrap&lt;br /&gt;
{&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
public function _initload()&lt;br /&gt;
{&lt;br /&gt;
&lt;br /&gt;
//your code goes here&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
&lt;/code&gt;&lt;br /&gt;
&lt;br /&gt;
And you have everything set up.&lt;br /&gt;
&lt;br /&gt;
To access your admin module, navigate to the url: http://hostname/admin/</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/HTol84Vkt4M/setting-up-modular-application.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2012/04/setting-up-modular-application.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-517320702998424637</guid><pubDate>Thu, 12 Apr 2012 09:13:00 +0000</pubDate><atom:updated>2013-01-20T13:42:24.476+01:00</atom:updated><title>Google: The Overrated Poster Child Of Innovative Tech Company?</title><description>&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="http://2.bp.blogspot.com/-jiKdKyrOU-4/T4acMUiNBjI/AAAAAAAAASQ/gWGnE2fJyHM/s1600/google.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="148" src="http://2.bp.blogspot.com/-jiKdKyrOU-4/T4acMUiNBjI/AAAAAAAAASQ/gWGnE2fJyHM/s320/google.jpg" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
Lately, I have found myself reviewing Google with a more objective point of view and becoming a little critical of the company’s success with innovation. Do not get me wrong, I still think Google is a great company where any developer would enjoy working; just that its awesome cool tech aura is fading and my rose tinted glasses are falling off.&lt;br /&gt;
&lt;br /&gt;
Truth be told, I, like most developers out there had bought into the Google brand and I really believed in their “do no evil” mantra. Google could do no wrong; they were cool; all about innovation and committed to developers and cutting edge technology! While, other tech companies are the villains. (Note that most of the time other tech companies often refer to Microsoft). &lt;br /&gt;
&lt;br /&gt;
We end up labeling these other companies as “the evil doers” who held back the frontiers of technology with crappy software just to protect their cash cows and their bottom line; the slow bureaucratic corporate mammoths and Google on the other hand was innocent of all similar antics and was the company that is fast as a whip and always pushing the envelope when it comes to technology.&lt;br /&gt;
&lt;br /&gt;
But as the rose tinted glasses fell off, Google stopped being that much of the good guy and in all honesty, I presently consider their do no evil motto; patronizing. And for good reasons, various events have lead to this perception. &lt;br /&gt;
&lt;br /&gt;
First on the list would be the Mocality scandal. Where a staff of Google allegedly hacked into the database of Mocality: a business directory based in Kenya, one of the biggest in Africa, and tried using the information sourced to sell Google’s services.  You can &lt;a href="http://blog.mocality.co.ke/2012/01/13/google-what-were-you-thinking/"&gt;read the full account here&lt;/a&gt; and note from the account, that the crime appears not to be a localized one, perpetuated only by folks in Google Kenya. Yes, this atrocity is far from being a companies culture but the actions of some miscreant but yet it left a sour taste especially if you read the full lowdown.&lt;br /&gt;&lt;br /&gt;
&lt;br /&gt;
Next, you have Google’s unscrupulous practice of sabotaging startups that they do not like or feel threatened by. &lt;a href="http://www.businessinsider.com/yelp-ceo-on-google-2011-9"&gt;Read about the experiences of Yelp&lt;/a&gt; and the most recent that I came across is that of Hatchlings which you can &lt;a href="http://blog.hatchlings.com/post/20171171127/dont-be-evil-how-google-screwed-a-startup"&gt;read here&lt;/a&gt;, another victim to Google questionable behavior.&lt;br /&gt;
&lt;br /&gt;
Further, to consolidate my growing skepticism, you have the recent &lt;i&gt;“Search my world”&lt;/i&gt; thing which was just a blatant &lt;b&gt;“do evil”&lt;/b&gt; move; a move that corrupts the fairness of search results in favor of Google's own products. View &lt;a href="https://www.focusontheuser.org/video.php"&gt;Focus on Users&lt;/a&gt; for more info on this. &lt;br /&gt;
&lt;br /&gt;
Add all these up and you’d understand why I really feel Google’s “Do no Evil” is patronizing.&lt;br /&gt;
&lt;br /&gt;
The final event that led to my present view of Google was the purchase of a Windows Phone; &lt;a href="http://www.nokia.com/us-en/products/lumia/?intc=na-fw-ilc-na-lumia-na-products_products-us-en-734388"&gt;a Nokia Lumia&lt;/a&gt;. I got the phone and I was honestly impressed by the cool and refreshing feel of its operating system which I think is a massive and superb job well done on the part of Microsoft and before I knew it, the negative perception of Microsoft being one of the bad guys; a corporate mammoth that is slow to innovate, started to drop. &lt;br /&gt;
&lt;br /&gt;
Interesting right? And typical of such situations, where you find yourself reevaluating your opinion about a bad guy, I ended up also reevaluating my opinion of the so called good guys; hence the revaluation of Google.&lt;br /&gt;
&lt;br /&gt;
What even made this reevaluation of Google such an inevitable event is the almost &lt;i&gt;close to knee jerking reaction&lt;/i&gt; I usually get from people whenever I talk about how cool the new Windows phone is. They usually reply; "hey its Microsoft not Google (or Apple), don’t expect us to take you seriously.” It would appear that in their minds, the impression of “If it’s not Google then it isn’t cool" is well imprinted and Google has the copyright on cool tech. Seems lot of people have been brainwashed?&lt;br /&gt;
&lt;br /&gt;
It’s called Brand capital yes I know and yes Google has it; but no more; at least for me.&lt;br /&gt;
&lt;br /&gt;
This rant seeks to put things in a bit of perspective by any chance and to take a more critical look at things as it concerns Google. Like I said earlier on, I still think Google is a great company in tech, just that it’s cool factor; the halo; the trendy aura that is often acclaimed to them, might just be a little bit overrated.&lt;br /&gt;
&lt;br /&gt;
You see, the brand capital Google enjoys makes people to automatically think Google is cool and its cool majorly because people believe they do innovation right and create the perfect environment for it. They do cool stuff with tech. But once I began to take a more critical look at Google, I begin to doubt how really successful the company has been with innovation; homebrewed innovation, not just the ones they buy over and slaps the Google name on. &lt;br /&gt;
&lt;br /&gt;
How well has Google done in coming up with an innovative service or product and become successful with it? What appears to be the situation seems very interesting.&lt;br /&gt;
&lt;br /&gt;
I would hereby quickly list some of the cool and great stuff we know from Google, Just outline them in two different lists and see if they testify to how well Google does innovation.&lt;br /&gt;
&lt;br /&gt;
&lt;h2&gt;
&lt;span style="font-size: x-large;"&gt;First List&lt;/span&gt;&lt;/h2&gt;
&lt;h4&gt;
&lt;b&gt;Google Maps&lt;/b&gt;&lt;/h4&gt;
One of the flagship services of Google, an innovative product that has radically changed how we find our way. But Google Maps was never a home brewed innovation. It was an acquired product. The original creators of Google maps are &lt;i&gt;Lars Rasmussen&lt;/i&gt; and &lt;i&gt;Jens Rasmussen&lt;/i&gt; with Australians Noel Gordon and Stephen Ma. They were the ones that co-founded &lt;a href="http://en.wikipedia.org/wiki/Where2"&gt;Where 2 Technologies&lt;/a&gt;, the mapping-related start-up in Sydney, Australia that made Mapping solutions that was later bought over by Google in October 2004 to become Google Maps.&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;b&gt;Youtube&lt;/b&gt;&lt;/h4&gt;
Another of Google's Popular product which has also revolutionized the way video is consumed. They say in a 2 month period we have more videos being uploaded to Youtube than if ABC, NBC and CBS air new contents 24/7 non-stop since 1948; truly disruptive right? Yet Youtube was another acquired technology. Youtube was created by 3 former PayPal employees Steve Chen, Chad Hurley and Jawed Karim back in February 2005. It was bought over by Google in 2006. It is worth noting that before the acquisition, Google had its own Video sharing service called Google Videos, which never really had much of a success.&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;b&gt;Android&lt;/b&gt;&lt;/h4&gt;
And yes we have Android. And yes it is also an acquired asset! Surprise surprise? The initial developers of the Mobile Operating system was Android Inc a company founded by Andy Rubin. It was later purchased by Google in 2005. (iOS and Mango on the other hand are OS that were built from ground up by the companies backing them).&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;b&gt;Blogger&lt;/b&gt;&lt;/h4&gt;
Blogger is another popular and successful Google service which also was not conceived within Google. Blogger was originally created by Evan Williams (who later went on to create twitter) and Meg Hourihan. Their company, Pyra labs was acquired by Google in 2003.&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;b&gt;Google Analytics &lt;/b&gt;&lt;/h4&gt;
Ha! Yes! all the lovers of Analytics; a truly innovative product, has changed the way we now do online marketing and SEO. It has to be Google to pull such a product off right? But bet most of you don’t know that Google Analytics was also an acquired asset. The original company was &lt;a href="http://en.wikipedia.org/wiki/Urchin_Software_Corporation"&gt;Urchin Software Corporation&lt;/a&gt; and it was purchased by Google in 2005.&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;b&gt;Google AdWords.&lt;/b&gt;&lt;/h4&gt;
Even Google Adwords. The core idea that powers Google revenue stream was never invented at Google. The original inventor of the idea of ads based on Pay per click was Bill Gross. Read more on this &lt;a href="http://www.mathewingram.com/work/2006/07/28/bill-gross-the-man-who-created-google/"&gt;here&lt;/a&gt; &lt;br /&gt;
&lt;br /&gt;
Interesting?&lt;br /&gt;
&lt;br /&gt;
But this is not all. Let us look at another set of cool tech things that came out of Google.&lt;br /&gt;
&lt;br /&gt;
&lt;h1&gt;
&lt;span style="font-size: x-large;"&gt;Second List&lt;/span&gt;&lt;/h1&gt;
&lt;h4&gt;
&lt;b&gt;Orkut&lt;/b&gt;&lt;/h4&gt;
Am sure a huge amount of people would be hearing this service for the first time. Orkut is Google’s own Social Networking site that nobody uses. And by the way, Orkut had been in existence way before Facebook came on the block. Here http://www.orkut.com &lt;br /&gt;
Orkut is proudly Google!&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;b&gt;Google Wave&lt;/b&gt;&lt;/h4&gt;
Yes Google wave was another Innovation that came out of Google. It was supposed to be the bold attempt at re-imaging how we communicate and collaborate online. Truly and really Innovative? But we all know where Google wave is today? In the &lt;a href="http://techcrunch.com/2012/02/01/deadpool-alert-google-wave-goes-read-only/"&gt;deadpool&lt;/a&gt; &lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;b&gt;Google Buzz&lt;/b&gt;&lt;/h4&gt;
Haha! Google Buzz. Another home brewed Google product meant to take Twitter head on. It was an innovative social networking and micro blogging tool that integrated nicely with your email. It was cool innit? But guess it was too cool to be a hit. You would find Google buzz in the deadpool too.&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;b&gt;Knol&lt;/b&gt;&lt;/h4&gt;
Yet another ambitious project by Google. A knol was supposed to represent a unit of Knowledge. Quite cool. If you wondering what the hell Knol is, it is not your fault. The whole Knol idea never took off. &lt;br /&gt;
&lt;br /&gt;
Knol was supposed to be the &lt;a href="http://articles.businessinsider.com/2008-07-23/tech/30067863_1_knol-pages-adsense-program-google"&gt;Wikipedia killer&lt;/a&gt;. It was a project that aims to include user-written articles on a range of topics just like Wikipedia only that it was supposed to be better. By the way, Knol is also in the deadpool.&lt;br /&gt;
&lt;br /&gt;
&lt;h4&gt;
&lt;b&gt;Google Plus&lt;/b&gt;&lt;/h4&gt;
To be fair, it is too early to comment on this one :) &lt;br /&gt;
&lt;br /&gt;
So did you see any Trend here? Any peculiarities between the two sets of Google products? any characteristics that are shared amongst the two lists?&lt;br /&gt;
&lt;br /&gt;
Truth is, it has not being a tale of absolute misses but looking at the the general observation the facts stacks up nicely for us to see a trend and more importantly bring some balance to the way we perceive the company.&lt;br /&gt;
&lt;br /&gt;
I would desist from giving further comments on the lists. I would rather allow you draw up your own conclusions.&lt;br /&gt;
&lt;br /&gt;
The only thoughts I would want to leave you with is this: maybe if you look at things a bit more critical, maybe you would find that Google might not be that much of an Outlier; the poster boy for innovative tech companies that we all seem to make them to be and maybe they are as evil as the rest of the bunch or perhaps the rest of the bunch are as good as them.</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/7KqvVjwMhG4/google-overrated-poster-child-of.html</link><author>noreply@blogger.com (dade)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://2.bp.blogspot.com/-jiKdKyrOU-4/T4acMUiNBjI/AAAAAAAAASQ/gWGnE2fJyHM/s72-c/google.jpg" height="72" width="72" /><thr:total>1</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2012/04/google-overrated-poster-child-of.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-7783418086029560661</guid><pubDate>Sat, 31 Dec 2011 22:48:00 +0000</pubDate><atom:updated>2012-03-02T19:24:16.219+01:00</atom:updated><title>So what is Padly?</title><description>Padly is a side pet project- I have been spending some of my time on.&lt;br /&gt;
&lt;br /&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="http://2.bp.blogspot.com/-xLhKOKp6HEg/T1EQRf8hohI/AAAAAAAAARc/tBYZlnJxwnA/s1600/padly.gif" imageanchor="1" style="margin-left:1em; margin-right:1em"&gt;&lt;img border="0" height="137" width="133" src="http://2.bp.blogspot.com/-xLhKOKp6HEg/T1EQRf8hohI/AAAAAAAAARc/tBYZlnJxwnA/s400/padly.gif" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;
&lt;br /&gt;
When building a web application that requires user login, it could be quite a boring and repetitive task to always have to code the user management functionality for application you work on, over and over again. Just as every developer fast realizes, getting this functionality handled by someone or something else is the way to go. Services like Facebook, Google and other federated login services/standards like openID have risen to handle these needs; and they work.&lt;br /&gt;
&lt;br /&gt;
However, it is not every time you would want to build your application using Facebook or any other login service. But on the other hand, having to code the user management part of applications from scratch, is not something you may want to spend valuable time doing. This is where Padly could help.&lt;br /&gt;
&lt;br /&gt;
Simply put, Padly is going to be a simple User Management System that handles the processes of user/account creation, password retrieval, profile management etc. It takes care of these tasks such that you can easily focus on developing the other parts of an application.&lt;br /&gt;
&lt;br /&gt;
And it is easy to integrate. You just need to drop Padly into your application, make some configurations, your application then hooks into the User Management part, and that’s all. It is as simple as that.&lt;br /&gt;
&lt;br /&gt;
Am almost done with it, in fact, I can say that 90% of it is already done. As such, it can be used as it stands, but some rough edges need to be polished and some features need to be tweaked.&lt;br /&gt;
&lt;br /&gt;
Some of the things I’m looking at adding before final release include: adding of Upload Form Fields, Review Security, Client Side Verification for Radio, Checkbox and Text Area, etc.&lt;br /&gt;
&lt;br /&gt;
The Project is going to be open and everybody can use and contribute to it. You can find the development branch here on github &lt;a href="https://github.com/dadepo/Padly/tree/dev"&gt;https://github.com/dadepo/Padly/tree/dev&lt;/a&gt; and instructions on how to integrate it into your application can be found here &lt;a href="https://github.com/dadepo/Padly/blob/dev/README"&gt;https://github.com/dadepo/Padly/blob/dev/README&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
Feel free to give it a spin, feedback any issue you have and do follow the project for updates.</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/ChwCEz_Ymg8/so-what-is-padly.html</link><author>noreply@blogger.com (dade)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://2.bp.blogspot.com/-xLhKOKp6HEg/T1EQRf8hohI/AAAAAAAAARc/tBYZlnJxwnA/s72-c/padly.gif" height="72" width="72" /><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2011/12/so-what-is-padly.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-790943545596071659</guid><pubDate>Wed, 07 Dec 2011 23:30:00 +0000</pubDate><atom:updated>2011-12-09T14:13:26.965+01:00</atom:updated><title>The Love for Data is The Beginning of Wisdom</title><description>I’m in Stockholm, and would be here till the end of the week. I would be busy for the next couple of days in a Strategic meeting . Asides many other results, one of the anticipated outcome of the meetings I would be part of is to build IT tools that would enable the organization I work for make sense out of the Data it has, spot patterns; opportunities and capitalize on it.&lt;br /&gt;
&lt;br /&gt;
Data is interesting. It is interesting because it conceals stories. And the process of extracting the information from the Data, extracting the story being told by the Data itself is an exciting task; because you never know. You never know you have so much information to work it and make strategic decisions with. You never know you have a trend, a pattern, a window of opportunity, a threat until you pay attention to your Data. There are a lot of Information out there. We are swimming in an ocean of patterns and trends but you never know until you get down to Data analysis.&lt;br /&gt;
&lt;br /&gt;
Thing is this: The love for Data is the beginning of wisdom, there is no way an organization can become intelligent without capturing and analysis the Internally and externally generated Data which affects its operations. This realization, although simple, is quite powerful and it made me reflect on realities back home in Nigeria; asking myself exactly how intelligently are the public sectors in the country being run?&lt;br /&gt;
&lt;br /&gt;
Data is king. If you have ever read any of Malcom Gladwells books, you would appreciate the power of analyzing Data and connecting the dots. From the Outlier to Blink, he usually, often or frequently delivers an exceptional essay which provides an excellent insight into the captured Data, showing the trends and telling the hidden stories.&lt;br /&gt;
&lt;br /&gt;
So in Nigeria, I ask ; can I easily access and analyze trends in the National Budgets of the last 10 years? Can I see how spending has changed and the effect of this in the development of the country? What about common occurrence like Accidents? Where is the Data on this? And how can I utilize these Data to see what region, sex, age group are prone to this issue. What about Data being generated around health issues in the country? How much of it is even been captured? What’s the correlation between a particular tribe and the occurrence of twins? You never know, what interesting patterns lie hidden within Data until you pay attention.&lt;br /&gt;
&lt;br /&gt;
It is a stupid institution that won’t bother about Data because, really the tools to capture and analyze data abound! So there is no excuse to not make Data Analysis a strategy and practice: Per country, per State or per organization.&lt;br /&gt;
&lt;br /&gt;
One of the areas Information Technology can easily be leveraged on for Development in the country is via capitalizing on Data. And the fact is that using Information Technology for development need not be fancy in every case nor does it need to be the implementation of cutting edge and cool and geeky stuffs. Simply applying existing data visualization tools in the country to capture and analyze trends and patterns and making this information available, might just be one effective step towards the attainment of intelligent institutions and applying IT for development.&lt;br /&gt;
&lt;br /&gt;
So my candid Recommendations:&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Capture Data&lt;/b&gt;&lt;br /&gt;
Simply described as Record Keeping. Make use of easily accessible tools like our good old Microsoft excel to capture the data.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Make it Open.&lt;/b&gt;&lt;br /&gt;
Don’t just stop at capturing these Data. Make it available in format that can easily be accessed, make the Data public, build API’s, release Data in CVS. Make it available! One of the Data sources I would be working with is http://data.un.org/. Data made open for everybody to access. This is the way to go.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Analyze/Visualize it&lt;/b&gt;&lt;br /&gt;
The power is in the visualization and analyzes. Make use of available tools to do this. Like I said, you do not need to build any fancy tools; there are existing IT tools that can be leveraged on.&lt;br /&gt;
&lt;br /&gt;
One example is &lt;a href="http://www.tableausoftware.com/"&gt;Tableau&lt;/a&gt;, a cool data visualizing tool which by the way, would be one of the tools I would be working with these coming couple of days. Capitalize on these tools and just use it.&lt;br /&gt;
&lt;br /&gt;
Finally, I know all these won’t go anywhere without a culture that supports paying attention to Data, but really it would really be inept of us to continue in such direction as a country or institution.</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/TLjBAifQ6bw/love-for-data-is-beginning-of-wisdom.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2011/12/love-for-data-is-beginning-of-wisdom.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-9030049333103289477</guid><pubDate>Mon, 27 Dec 2010 16:55:00 +0000</pubDate><atom:updated>2010-12-27T23:33:26.498+01:00</atom:updated><title>Is Google Making Me Lazy?</title><description>&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="http://1.bp.blogspot.com/_4jigHE26538/TRjETQVRm_I/AAAAAAAAAO4/4GHxuufFC88/s1600/lazy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="221" src="http://1.bp.blogspot.com/_4jigHE26538/TRjETQVRm_I/AAAAAAAAAO4/4GHxuufFC88/s320/lazy.jpg" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;
Is Google turning me into a Lazy programmer? Something tells me no, that it is just a tool that aid my productivity. There is no way having at your finger tips, the access to almost the entire index of the web, make you lazy; it is a good reference I can fall back on when my memory fails me. Right?&lt;br /&gt;
&lt;br /&gt;
Right. It should not be a problem only that I just feel as if my memory now fails me more often than before. Not that I am getting amnesic, I sure do remember  stuffs, the general concept of things, the procedures, but when it comes to stacking in my memory the exact syntax or steps of an algorithm or a procedure...well I sort of outsourced that functionality off to Google.&lt;br /&gt;
&lt;br /&gt;
I don’t even make the effort of remembering the idiosyncrasies of frameworks or tools I use, since I know with a Google Search, the docs come up.&lt;br /&gt;
&lt;br /&gt;
Is this in itself a bad thing? In fact has my productivity not increased with the help of Google? And wasn’t Albert Einstein credited to have said he does not know the numerical value of the speed of light; that why should he stack up such information in his head, when he can quickly retrieve it from an encyclopaedia.&lt;br /&gt;
&lt;br /&gt;
So is the question warranted? Is Google making me Lazy? I would have to say no. My heavy reliance on Google's Index of the web, I would say aids my productivity. There are tons of things I have been able to achieve and achieve in a shorter amount of time because I was able to make a Google search. &lt;br /&gt;
&lt;br /&gt;
So I guess my fears are just unwarranted.Right? But something tells me “what if I get thrown into a civilization where I have no access to the internet”? Well again, I think that thought, that very thought itself is unwarranted. :)&lt;br /&gt;
&lt;br /&gt;
So why then did i write this post? I guess am not convinced :(</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/FqvoHEaSlcg/is-google-making-me-lazy.html</link><author>noreply@blogger.com (dade)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://1.bp.blogspot.com/_4jigHE26538/TRjETQVRm_I/AAAAAAAAAO4/4GHxuufFC88/s72-c/lazy.jpg" height="72" width="72" /><thr:total>2</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2010/12/is-google-making-me-lazy.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-2467956557189266769</guid><pubDate>Sat, 25 Dec 2010 22:52:00 +0000</pubDate><atom:updated>2010-12-27T18:09:39.634+01:00</atom:updated><title>Looking for The Next Cool Thing After Twitter</title><description>&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="http://2.bp.blogspot.com/_4jigHE26538/TRZvBrPApZI/AAAAAAAAAO0/2GbLZZByjuU/s1600/twitter_uncool.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="218" src="http://2.bp.blogspot.com/_4jigHE26538/TRZvBrPApZI/AAAAAAAAAO0/2GbLZZByjuU/s320/twitter_uncool.jpg" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;
I have stopped tweeting. Ok not totally stopped, but the frequency in which I tweet now has drastically reduced. And it is not as if I would be deleting my twitter account soon to never tweet again, it is just that...well...Twitter to me doesn’t feel cool anymore...like it used to be in those early days.&lt;br /&gt;
&lt;br /&gt;
This is my present sentiment or Phase, regarding twitter.&lt;br /&gt;
&lt;br /&gt;
And to appreciate my sentiment you might need to understand where I am coming from and how I got started with twitter and the prior phases I have gone through.&lt;br /&gt;
&lt;br /&gt;
I got on twitter 2007. Sure, i was an &lt;a href="http://en.wikipedia.org/wiki/Early_adopter"&gt;early adopter&lt;/a&gt;. Back then the user base of twitter was still in the thousands. It was around 400,000 to 500,000. Compared to the whopping 145 Million plus user base the service now enjoys. It was &lt;a href="http://blog.timakinbo.com/"&gt;Tim Akinbo&lt;/a&gt; that brought twitter to my attention and the reason why I got on board was simple: It was just the latest geeky thing to play around with. It was fun and elitist in a sort of way.&lt;br /&gt;
&lt;br /&gt;
So here i am now, some couple of years down the line, and twitter is feeling noisy. But before getting to this present state, I have actually gone through other phases in time past, using twitter. Let me outline:&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;The WOW Phase. The Really Really WOW Phase:&lt;/b&gt;&lt;br /&gt;
In the early days of twitter, If you are following someone and they tweet, you get their tweet sent, free of charge, to your phone as SMS. Yeah right. That was back then. A lot of folks do not know this, but that made twitter really really cool for me. I remembered vividly, taking a bike from INTECU to Fajuyi Hall and my phone was abuzz with SMS all from tweets I was getting from following CNN, BBC etc on twitter. I felt connected to the world. But then twitter started growing; growing to that level where sending free SMS was not sustainable. So they pull the plugged on it and all of a sudden it became...well a little less useful. Because having to browse to twitter.com every time to read my tweets felt unnatural. So I eased off twitter.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;The Third Party Application Phase&lt;/b&gt;&lt;br /&gt;
Then I discovered the Firefox pluggin: Twitterfox, which has since been renamed to &lt;a href="http://www.echofon.com/twitter/firefox/"&gt;Echofon&lt;/a&gt;. It marked a twitter revival for me.&amp;nbsp; Like I said in my &lt;a href="http://geekabyte.blogspot.com/2009/07/getting-twitter.html"&gt;previous post&lt;/a&gt;, the very nature of twitter makes accessing it via the website a little awkward and unnatural. Consuming twitter requires&lt;i&gt; a non intrusive user notification paradigm&lt;/i&gt;.  and that was exactly what the Firefox Plugin provided.&lt;br /&gt;
&lt;br /&gt;
With this firefox plugin, my usage of twitter soared. But then again, this particular phase had it own limitations: which was the fact that I had to be seated by my PC, connected to the internet before I can use Twitter.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Mobile Internet Phase&lt;/b&gt;&lt;br /&gt;
Then I got on mobile internet and my usage of twitter just sky rocketed; It just went off the roof. Having twitter right there in my palms made it possible for me to consume and create tweets just anywhere and at anytime. I was abreast of all happening in the tech community. I had access to useful tips and pointers to resources thanks to the community of twitter following I had. It was cool, really cool. But it did not last forever. I was pushed unto the next phase:&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;The Crowded and Noisy Phase&lt;/b&gt;&lt;br /&gt;
Then all of a sudden twitter became noisy and crowded. I think this was due to the fact that a lot of regular Joe started getting bored with facebook and unfortunately twitter was getting a lot of mention in mainstream media, so the natural thing started happening: folks started flocking to twitter.&lt;br /&gt;
&lt;br /&gt;
The other thing that happened, i think, that led to twitter growing to become crowded was that “&lt;i&gt;Who to&amp;nbsp; Follow&lt;/i&gt;” feature twitter incorporated. It was just like the “&lt;i&gt;Suggested friends&lt;/i&gt;” feature in facebook. All of a sudden a lot of folks I know started following me...and I started following back...and before I knew it, my timeline...well... became unrecognizable!&lt;br /&gt;
&lt;br /&gt;
I hardly get to catch &lt;a href="http://twitter.com/takinbo"&gt;@takinbo&lt;/a&gt; or &lt;a href="http://twitter.com/dfasoro"&gt;@dfasoro&lt;/a&gt;’s tweets. Or &lt;a href="http://twitter.com/budzeg"&gt;@budzeg&lt;/a&gt; tips on security. I follow &lt;a href="http://twitter.com/jeresig"&gt;@&lt;span class="label screenname"&gt;jeresig&lt;/span&gt;&lt;/a&gt;                                and &lt;a href="http://twitter.com/gvanrossum"&gt;@&lt;span class="label screenname"&gt;gvanrossum&lt;/span&gt;&lt;/a&gt;                                but I can’t remember the last time I caught their tweets.&lt;br /&gt;
&lt;br /&gt;
Why? Because all of these useful tweets are now getting swamped and buried in the slew of RT’s RETWEETS and mentions of folks who have taken the liberty to use my timeline as the medium for their conversation; conversations I have no iota of interest in.&lt;br /&gt;
&lt;br /&gt;
O! how I missed the useful tips and pointers to useful resources on mobile dev and UI design &lt;a href="http://twitter.com/barbietunnie"&gt;@barbietunnie&lt;/a&gt; shares. How I missed Guy kawasaki funny and sometimes out rightly useless tweets via &lt;a href="http://twitter.com/alltop"&gt;@alltop&lt;/a&gt; not to talk about &lt;a href="http://twitter.com/jason"&gt;@jason&lt;/a&gt;. &lt;a href="http://twitter.com/mashable"&gt;@mashable&lt;/a&gt; used to be one of my favorite pointers to interesting articles and resources, but not anymore.&lt;br /&gt;
&lt;br /&gt;
So right now am in that phase where I spend little time on twitter because it just feels too noisy. I have been thinking of things I could do:&lt;br /&gt;
&lt;br /&gt;
&lt;ol&gt;&lt;li&gt;Create another account which would solely be used to consume tweets I consider useful. But then again, I don’t really like the idea of managing multiple accounts so I really don’t see myself going down that lane.&lt;/li&gt;
&lt;li&gt;Start unfollowing people.&lt;/li&gt;
&lt;li&gt;Create a list of followers whose tweets am interested in.&lt;/li&gt;
&lt;li&gt;Or just go find/create the next cool and geeky thing to play with.&lt;/li&gt;
&lt;/ol&gt;One of my girlfriends commented on the fact that I am no longer active on tweeter: my response? I told her it stopped being fun. That it feels as if every tom dick and harry is now on twitter, and that it has stopped being cool and geeky, like it used to be.&lt;br /&gt;
&lt;br /&gt;
Or well, maybe it’s because I’ve just got geek coy? Whatever!&amp;nbsp; Twitter just feels *arrrghh* right now, and i am just on the look out for that next cool thing to play with, together with my techhead pals.</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/U11UC5oJTrY/looking-for-next-cool-thing-after.html</link><author>noreply@blogger.com (dade)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://2.bp.blogspot.com/_4jigHE26538/TRZvBrPApZI/AAAAAAAAAO0/2GbLZZByjuU/s72-c/twitter_uncool.jpg" height="72" width="72" /><thr:total>3</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2010/12/looking-for-next-cool-thing-after.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-4570246009622047510</guid><pubDate>Sat, 25 Dec 2010 18:51:00 +0000</pubDate><atom:updated>2010-12-25T19:53:45.344+01:00</atom:updated><title>My Presentation at WordCamp Nigeria 2010</title><description>I am pro wordpress but not the kind to consider the usage of any other content management system as sacrilegious. If I have to handle a project in say Joomla, Plone or Drupal I would gladly dig into it. In fact I have had some couple of dint with Drupal and I think it is very powerful, but all the same wordpress still remain my personal favourite.&lt;br /&gt;
&lt;br /&gt;
And the reason is not farfetched. I personal find wordpress fun to work with, it is intuitive, it is simple yet powerful and it is easy to tweak, bend over, and extend.&lt;br /&gt;
&lt;br /&gt;
And these were the exact things I talked about during my presentation at the first ever wordcamp that held in Lagos a couple of months back. Apart from introducing wordpress and the concept of wordpress being more than a blogging system, my talk also did a great deal in communicating the fact that wordpress is quite powerful, yet simple and a joy to work with.&lt;br /&gt;
&lt;br /&gt;
Here is my presentation&lt;br /&gt;
&lt;br /&gt;
&lt;div id="__ss_5309621" style="width: 425px;"&gt;&lt;b style="display: block; margin: 12px 0pt 4px;"&gt;&lt;a href="http://www.slideshare.net/dadepo/wordcampnigeria" title="Wordcampnigeria"&gt;&lt;/a&gt;&lt;/b&gt;&lt;object height="355" id="__sse5309621" width="425"&gt;&lt;param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=wordcampnigeria-100928161711-phpapp01&amp;stripped_title=wordcampnigeria&amp;userName=dadepo" /&gt;&lt;param name="allowFullScreen" value="true"/&gt;&lt;param name="allowScriptAccess" value="always"/&gt;&lt;embed name="__sse5309621" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=wordcampnigeria-100928161711-phpapp01&amp;stripped_title=wordcampnigeria&amp;userName=dadepo" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"&gt;&lt;/embed&gt;&lt;/object&gt;&lt;br /&gt;
&lt;div style="padding: 5px 0pt 12px;"&gt;View more &lt;a href="http://www.slideshare.net/"&gt;presentations&lt;/a&gt; from &lt;a href="http://www.slideshare.net/dadepo"&gt;Aderemi Dadepo&lt;/a&gt;.&lt;/div&gt;&lt;/div&gt;&lt;br /&gt;
And if you are considering digging into wordpress, there is no other resource I can recommend than the official &lt;a href="http://codex.wordpress.org/Main_Page"&gt;wordpress codex&lt;/a&gt;. It is an exhaustive resource, and a very handy reference. And it is just as simple to use: but then again am not surprised: it is wordpress!</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/5qmcnZ4laeM/my-presentation-at-wordcamp-nigeria.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2010/12/my-presentation-at-wordcamp-nigeria.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-3232951540733240113</guid><pubDate>Tue, 21 Dec 2010 23:32:00 +0000</pubDate><atom:updated>2010-12-22T00:45:16.838+01:00</atom:updated><title>Setting Up Code Completion on Komodo Edit for Google App Engine</title><description>I have been using Komodo Edit as my main code editor for over 2 years now. And it works for me! :) It gives me just want I need in a code editor. Basic Debugging, Project management, intellisense etc.&lt;br /&gt;
&lt;br /&gt;
In fact the code-completion was one of the sterling features that made me pick Komodo Edit and drop my previous editor. That and the facts that it is free and Open Source.&lt;br /&gt;
&lt;br /&gt;
As regards Code Completion, it supports a varied number of languages. From C#, Matlab, C++ to haskel, ada, lisp, tcl and Django, Ruby...Just name it! Even our dear fortran is supported.And adding support for languages that don’t come by default is a breeze.&lt;br /&gt;
&lt;br /&gt;
So recently, when I started working with Google App Engine, one of the first things I did was to configure Code Completion for GAE on Komodo Edit. And it was very easy getting Komodo Edit to provide just the code completion I need to get comfortable with the WEBAPP framework.&lt;br /&gt;
&lt;br /&gt;
Find below the simple procedures to follow to set up Komodo Edit to work with GAE.&lt;br /&gt;
&lt;br /&gt;
Click Edit &amp;gt; Preference &lt;br /&gt;
From the dialog box that pops up on the left collapse the &lt;b&gt;Language&lt;/b&gt; link and Click on &lt;b&gt;Python&lt;/b&gt;:&lt;br /&gt;
&lt;br /&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="http://2.bp.blogspot.com/_4jigHE26538/TRE1ftAQSII/AAAAAAAAAOQ/O2VvqKqmTE4/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="380" src="http://2.bp.blogspot.com/_4jigHE26538/TRE1ftAQSII/AAAAAAAAAOQ/O2VvqKqmTE4/s400/1.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;
Under the &lt;b&gt;Additional Python Import Directories&lt;/b&gt; you can add additional path you would want Komodo Edit to pass to the Python Interpreter.&lt;br /&gt;
&lt;br /&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="http://4.bp.blogspot.com/_4jigHE26538/TRE2E9FNv8I/AAAAAAAAAOY/fOHhC8wsnZ4/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="383" src="http://4.bp.blogspot.com/_4jigHE26538/TRE2E9FNv8I/AAAAAAAAAOY/fOHhC8wsnZ4/s400/2.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;
To Integrate Google App Engine, browse to the directory where the GAE SDK is installed and add the PATH.&lt;br /&gt;
&lt;br /&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="http://3.bp.blogspot.com/_4jigHE26538/TRE2afEG5vI/AAAAAAAAAOg/9hN2FbzkdgU/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="383" src="http://3.bp.blogspot.com/_4jigHE26538/TRE2afEG5vI/AAAAAAAAAOg/9hN2FbzkdgU/s400/3.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;
And that is all! You are done! It is as simple as that. Code Completion should now work.&lt;br /&gt;
&lt;br /&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="http://3.bp.blogspot.com/_4jigHE26538/TRE2wFcLXtI/AAAAAAAAAOo/4uKHkhSi4iQ/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="276" src="http://3.bp.blogspot.com/_4jigHE26538/TRE2wFcLXtI/AAAAAAAAAOo/4uKHkhSi4iQ/s400/4.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;
So there you have it. And if you are interested in trying out Komodo Edit, you can read more and download it from the &lt;a href="http://www.activestate.com/komodo-edit"&gt;official site&lt;/a&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/Ahl3FEOlaBs/setting-up-code-completion-on-komodo.html</link><author>noreply@blogger.com (dade)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://2.bp.blogspot.com/_4jigHE26538/TRE1ftAQSII/AAAAAAAAAOQ/O2VvqKqmTE4/s72-c/1.png" height="72" width="72" /><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2010/12/setting-up-code-completion-on-komodo.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-8479725990992327353</guid><pubDate>Tue, 11 Aug 2009 15:42:00 +0000</pubDate><atom:updated>2009-08-12T11:22:05.798+01:00</atom:updated><title>Firefox meets Myaiesec.net!</title><description>Last two weeks saw me visiting Benin (Edo state), For an AIESEC conference: (AIESEC National Training Seminar), where i was opportune to be part of the conference facilitating team. Trust me, as a Mozilla Firefox campus representative, i found a way of making sure i evangelized Firefox during the course of the conference. Apart from spotting my cool firefox T-shirt, talking to delegates about the cool features of Firefox, i was also able to address the delegates (albeit short it was) on the general features of Firefox and how, using Persona plug-in, a branding campaign for Myaiesec.net could be carried out...&lt;br /&gt;&lt;br /&gt;Find below the slides for the presentation&lt;br /&gt;&lt;iframe src="http://docs.google.com/present/embed?id=d77vnt2_0gb8xt7gj&amp;interval=5&amp;size=m" frameborder="0" width="555" height="451"&gt;&lt;/iframe&gt;&lt;br /&gt;&lt;br /&gt;And for the Persona i designed around myaiesec.net, do pick it up &lt;a href="http://www.getpersonas.com/persona/38887"&gt;here&lt;/a&gt;. If you hap. to be an aiesecer and you are reading this, make sure you get your myaiesec.net persona!</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/MAv5J1xH2qE/firefox-meets-myaiesecnet.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2009/08/firefox-meets-myaiesecnet.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-6868216589226808236</guid><pubDate>Mon, 13 Jul 2009 09:04:00 +0000</pubDate><atom:updated>2009-07-14T14:36:28.617+01:00</atom:updated><title>Getting Twitter!</title><description>&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_4jigHE26538/Slt5-NMPF8I/AAAAAAAAAMU/VHfjhnMo7ZE/s1600-h/twitter_logo.png"&gt;&lt;img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 148px;" src="http://1.bp.blogspot.com/_4jigHE26538/Slt5-NMPF8I/AAAAAAAAAMU/VHfjhnMo7ZE/s400/twitter_logo.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5358010291287168962" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;In Recent times, Twitter has been enjoying massive adoption.It has moved from a service that appeals to only geeks; the early adopters to one that celebrities now flock to. People are signing up in multitudes. Between Feb 2008 and Feb 2009, twitter grew by 1,382%. Presently its user base exceeds 10 million.&lt;br /&gt;&lt;br /&gt;But despite this huge adoption of twitter, a whole lot of people still don’t get it. A lot of people don’t see the utility in the service and they wonder why the Buzz. And this is why we have a lot of people signing up on twitter only to abandon the site after a sparing interaction with it. There are quite a lot of dormant accounts on twitter; according to &lt;a href="http://blog.nielsen.com/nielsenwire/online_mobile/update-return-of-the-twitter-quitters/"&gt;Neilson Online&lt;/a&gt; More than 60% of Twitter users stop using the site one month after signing up for the service. Even amongst my circle of influence, I see this trend. I know an ample amount of people who get on twitter, wonder what the big deal is, leave a couple of tweets and then just abandon the site for the next couple of months.&lt;br /&gt;&lt;br /&gt;The issue is that Twitter is so d*mn easy to sign up for but far much harder to figure out what to do on it and how to get benefits from it. It is in the figuring out “the benefits” which is seemingly not that apparent, that a lot of people miss it. I will quickly outline why I think this is so. &lt;br /&gt;&lt;br /&gt;&lt;strong&gt;It Starts from having the right expectations!&lt;/strong&gt;&lt;br /&gt;Getting twitter starts from knowing what twitter is not. Twitter is not a social networking utility. A lot of people brand Twitter as a social networking site, but that is not the case. And this is where the problem starts. We have  people moving to twitter with the expectation of getting the social networking experience sites like facebook,hi5 or MySpace provides but only to be disoriented when all they see is a “what are you doing” sign, with a slew of twitter lingo: hash tags, @ replies and shortened urls.&lt;br /&gt;&lt;br /&gt;An analyst once described twitter as &lt;em&gt;“a broadcast medium rather than a [medium for] intimate conversation with friends”&lt;/em&gt;.&lt;br /&gt;&lt;br /&gt;I know folks who wouldn’t have taken interest in Twitter if not for the fact that access to Facebook has been blocked during office hours. So they move on to twitter expecting the same user experience they get from Facebook...&lt;br /&gt;&lt;br /&gt;But Twitter is not a Social Networking Utility!&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;Then who do you follow on Twitter.&lt;/strong&gt;&lt;br /&gt;The quality of utility you derive on twitter is directly related to the quality of tweets of your twitter following. A lot of people have express sentiments similar to this:&lt;br /&gt;&lt;blockquote&gt;&lt;br /&gt;“I don’t care that someone is going to take a shower, eat a sandwich, or go workout. That doesn’t make a difference in my life. Twitter is just a time waster”&lt;/blockquote&gt;&lt;br /&gt;Well, what are you doing following folks who only tweets about eating amala for breakfast? And what happened to following “stock quotes, project status, thought leaders, breaking news etc”&lt;br /&gt;&lt;br /&gt;For example, my interest tilts more in the direction of technology, so if you check out my followings on twitter, you will see it is made up of people who largely tweet around technology. This is where I get to discover new tools, read interesting articles and generally stay on top of what is going on where technology is concerned. As previously describe: Twitter is more of a Broadcasting medium, so if I want to enjoy it, I tune my receiver to channels that broadcast contents that interests me. That is, I follow folks whose tweets, I find useful.&lt;br /&gt;&lt;br /&gt;So you want more utility from twitter? Cut off the noise, find folks who tweet on issues that interest you and start following them.&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;How do you Access Twitter&lt;/strong&gt;&lt;br /&gt;I would say this factor is the most important factor in determining the level of usefulness one derives from twitter. It might sound kinda strange, but pointing your browser to &lt;a href="http://www.twitter.com"&gt;http://www.twitter.com&lt;/a&gt; is not the best way to consume twitter. (But sadly, this is the first way starters get to interact with the site) But when a little thought is put into it, then it becomes obvious that using the web is not the optimal way of accessing Twitter. To enjoy twitter, I would, instead, advise the usage of third party applications.&lt;br /&gt;&lt;br /&gt;The thing is this; the very nature of a service would dictate the way it is best consumed. Twitter by its very nature which is centered on tweets, calls for a non intrusive user notification paradigm. &lt;br /&gt; &lt;br /&gt;Compare the ease between having to go to www.twitter.com every now and then in other to see your tweets, to having a third party application do the checking for you.&lt;br /&gt;&lt;br /&gt;So I’ll say, sign up on twitter and then go find one of these third party applications. Since I am a &lt;a href="http://geekabyte.blogspot.com/2009/01/y-i-love-mozilla-firefox.html"&gt;die-hard fan of Firefox&lt;/a&gt;, I have found &lt;a href="http://twitterfox.net/"&gt;TwitterFox&lt;/a&gt; as my Twitter client of choice. It is a Firefox extension that brings my tweets to me via Firefox as I surf the web, meaning I can go ahead with being busy on the web, doing other things and on having new tweets, I get to see it via a pop up; very non intrusive.&lt;br /&gt;&lt;br /&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_4jigHE26538/Sltt02_g-NI/AAAAAAAAAME/Pn_fZ2hwCmA/s1600-h/twitterfox.jpg"&gt;&lt;img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 369px; height: 101px;" src="http://1.bp.blogspot.com/_4jigHE26538/Sltt02_g-NI/AAAAAAAAAME/Pn_fZ2hwCmA/s400/twitterfox.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5357996936569878738" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;And whenever I have a thought I want to tweet, doing so is as easy as clicking on the Twitterfox icon to start tweeting away...&lt;br /&gt;&lt;br /&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_4jigHE26538/SltwJOpb9XI/AAAAAAAAAMM/6kez5e-RwsU/s1600-h/twitterfox.jpg"&gt;&lt;img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 376px; height: 192px;" src="http://1.bp.blogspot.com/_4jigHE26538/SltwJOpb9XI/AAAAAAAAAMM/6kez5e-RwsU/s400/twitterfox.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5357999485540365682" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;You can also find other interesting ideas on how to utilize twitter, &lt;a href="http://www.doshdosh.com/ways-you-can-use-twitter/"&gt;here&lt;/a&gt;, &lt;a href="http://socialmediatrader.com/13-odd-ways-to-use-twitter/"&gt;here&lt;/a&gt; and &lt;a href="http://www.lifehack.org/articles/lifehack/5-ways-to-use-twitter-for-good.html"&gt;here&lt;/a&gt;, but it all starts with having the &lt;em&gt;right expectation&lt;/em&gt; of twitter, &lt;em&gt;follow people with quality tweets&lt;/em&gt;, and &lt;em&gt;start using TwitterFox&lt;/em&gt;.(or any other third party client for twitter) ;)</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/DDnTH_pWHT4/getting-twitter.html</link><author>noreply@blogger.com (dade)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://1.bp.blogspot.com/_4jigHE26538/Slt5-NMPF8I/AAAAAAAAAMU/VHfjhnMo7ZE/s72-c/twitter_logo.png" height="72" width="72" /><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2009/07/getting-twitter.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-7474167025946609403</guid><pubDate>Tue, 21 Apr 2009 12:22:00 +0000</pubDate><atom:updated>2010-12-21T09:46:57.023+01:00</atom:updated><title>Your Codes Shall Live After you...</title><description>Prior to now, I have never worked in an environment where I had to inherit a code base to work with (well except those times I have had to peek under the hood of some open source codes I needed to tweak) It is either I write the needed codes myself or I do.&lt;br /&gt;
&lt;br /&gt;
But recently that I just got a job where I get paid to play around with computers, the internet and write codes, sooner or later I know I am going to be confronted with that situation; To build on codes whose original authors have long left the company and are nowhere to be found. It is not as if am that concerned about this happening, guess am more preoccupied with the thought of the quality of codes I will be giving up for inheritance when I finally take my leave from the company.&lt;br /&gt;
&lt;br /&gt;
Am presently working on a project where I am building, more or less, from scratch and with every line of code I write, that thought keeps hounding me.&lt;br /&gt;
&lt;br /&gt;
Guess the saying: the good &lt;strike&gt;evil&lt;/strike&gt; deed men do shall live after them, is also true for you as a developer. Your codes too shall leave after you. And I don’t think I would want to leave behind an arcane legacy :) so to prevent this from happening I went ahead and got myself a book on how to write quality and manageable codes. A pretty nice book on software development I’ll say. &lt;br /&gt;
&lt;br /&gt;
But then again when it comes to coding style, it’s worth stressing that its sorta like Religion where you can’t claim that a particular method is the way: the most efficient. But the trick is to come up with a style based on some fundamental guidelines and adhere to it. It’s about maintaining consistency. Whichever style you decide to adopt the key is to stick to it and maintain it across board.&lt;br /&gt;
&lt;br /&gt;
So guess am doing my bit in ensuring the quality of codes out there, I can only ask of you the same. Do find the following online articles on the topic helpful, like I did. They are PHP centric ;)&lt;br /&gt;
&lt;br /&gt;
&lt;a href="http://www.devshed.com/c/a/PHP/Writing-Clean-and-Efficient-PHP-Code/"&gt;An article from devshed&lt;/a&gt;, &lt;a href="http://www.timkadlec.com/post.asp?q=54"&gt;tim kadlec on the 5s&lt;/a&gt;, and &lt;a href="http://reinholdweber.com/?p=3"&gt;Reinhold Weber's tips&lt;/a&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/9syO4USWBu0/your-codes-shall-live-after-you.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2009/04/your-codes-shall-live-after-you.html</feedburner:origLink></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-34374221.post-5855520320201347983</guid><pubDate>Wed, 01 Apr 2009 15:15:00 +0000</pubDate><atom:updated>2009-04-01T16:20:13.605+01:00</atom:updated><title>Sell Benefits Not Features…</title><description>The aim of any marketing efforts is to elicit an action and in most cases it’s to make potential customers make a buying decision. If people don’t take that action of buying then we can conclude that all our marketing hasn’t achieve its objectives.&lt;br /&gt;&lt;br /&gt;When dealing with high tech products or services, similar goal is expected: make someone pay for your software or get someone to subscribe to use your web app. As a marketer, this involves coming up with ways to ensure that the marketing decision made by your potential customers favor your product or services.&lt;br /&gt;&lt;br /&gt;Its all about coaxing or convincing and in high tech marketing it is not uncommon to see marketers listing features their software comes loaded with in other to coax customers to make a buying decision that will favors their offerings.&lt;br /&gt;&lt;br /&gt;But going in the direction of features listing might not be quite a productive strategy, especially for services like software. Ideally the logic behind feature touting goes somewhat like this: “List the features, let the customers know all the cool features they will be buying so that they will know the benefits they will enjoy and how our software will help solve their problems”.&lt;br /&gt;&lt;br /&gt;Well it so happens that things don’t normally play out that way. Customers might not necessary see the benefits, straightway from your litany of features. And this is why playing it strong on the feature listing side might not be that effective. Instead of feature touting, I will advocate Benefit touting .&lt;br /&gt;&lt;br /&gt;In stead of strictly feature listing, enumerate the benefits offered by your software in explicit language.&lt;br /&gt;&lt;br /&gt;Not that listing features is wrong in itself, but we have to keep in mind that our aim is to elicit an action: persuade potential customers to make a decision to buy, and this is easier done when your customers can grasp the relevance of your solution to their peculiar challenges.&lt;br /&gt;&lt;br /&gt;The problem with feature listing is that it is not an effective means in communicating the benefits of your offering to customers.&lt;br /&gt;&lt;br /&gt;Truth is, if you have features, you should have benefits but you have to take into consideration that half of the time, majority of your customer might not be that techie savvy, so they might not, at once connect the dots of your features to get the benefits. This is why it pays to sell to them by explicitly stating your benefits. This will make buying much easier.&lt;br /&gt;&lt;br /&gt;One need to take into cognizance that decision making is powered by emotions, so it will make more sense Listing benefits not features since it will be a faster way to make customers easily identify what they will gain from your software, how it will make their work (or life) easier, thereby generating the necessary emotions that will propel them to sign that cheque.&lt;br /&gt;&lt;br /&gt;Doing this makes buying easier like I said earlier on. Have you ever wondered why most people resist selling but enjoy buying? Why is this so? Its simple, buying becomes enjoyable when backed with the knowledge that the Good or Services being purchased is really the solution to a problem. List the benefits and people will find it easy to connect your solution to their problems, list the features, well….&lt;br /&gt;&lt;br /&gt;So what is the lesson being learnt here?&lt;br /&gt;&lt;br /&gt;“It is a better marketing strategy to design your marketing campaign around benefits listing than feature listing.”&lt;br /&gt;&lt;br /&gt;&lt;em style='font-size:11px'&gt;Republished from 60mwtgeeks&lt;/em&gt;</description><link>http://feedproxy.google.com/~r/Geekabyte/~3/A6IbxHfAd6g/sell-benefits-not-features.html</link><author>noreply@blogger.com (dade)</author><thr:total>0</thr:total><feedburner:origLink>http://geekabyte.blogspot.com/2009/04/sell-benefits-not-features.html</feedburner:origLink></item></channel></rss>
