Phonegap is not ready yet.

This may sound like not true, but actually Phonegap(Cordova) is not ready yet for the prime-time. The point is something or the other will always get in your way if you try to do a little more than basic UI.
It’s a pity to see that Phonegap has reached a version number of 3.3, still feels uncomfortable to work with.
While for a basic static page navigation it may be a solution to go for, for mobile, but think twice if the UI is becoming even a little more than basic.

A simple childbrowser (inAppBrowser) is failing in the current version and I found people are finding workarounds or solutions to fix this. So the point is not that its fixable but its not dependable.
Again, from version 3.0.0 on-wards, one need to have an internet connection to start building! Well, its NPM and NodeJS, I know, but its not comfortable at all rather confusing.

The best Phonegap version as I know is 2.8.0. Its the stable of all.
If at all you are trying to develop on Phonegap, stick to this version(2.8.0) until they release a stable version again.

Happy coding.

My first Tizen store approved game

Its a pleasing experience to get something on the stores, which are more stricter or unknown. Being said that, it is exciting when something is out of the doors from those stores. It was the same feeling for me when my first Apple store approval has happened.
So the game which was written for iOS devices is modified to fit in all the platforms and released. The original “catch them all” game is ported to all the platforms with the help of OpenFL and HAXE. The name has been changed to “Catch Them All E”, “E” is for everywhere.
First, it was for the Tizen App Store and the wait. Its not much but have to wait for 3 days and finally its approved and available in the Store. Thats such a nice experience and could not have been possible without Joshua.

Well, then I did some modifications and ported it to HTML5. Though, OpenFL directly provides conversion, there are still things to consider while developing for different platforms. This version is available here.

Not too far behind, I ported it to iOS and submitted Apple store. Well it took 7 days and its on the Apple App store too.

I must say, without OpenFL and HAXE I could not have achieved all this.

GruntJS for CSS minification

With GruntJS, as we saw in the last post, we can minify javascript files, the next in line is the CSS files.
I have updated the Github repo for using CSS along with Javascript files.
The basic setup is not different from javascript setup. Here we have to use

grunt-contrib-cssmin

The confusing part is, for minification we have a lot of options in NPM, and one of them is

grunt-contrib-mincss

So at first I was confused and it did not work for me. Seems like “mincss” is old and have not been updated for a long time. So I am with “cssmin” and that just works.
As usual, install cssmin locally, with

npm install grunt-contrib-cssmin

A note is, if you have “package.json” and “Gruntfile.js” file in the same location, take those files somewhere else while installing new packages from NPM, else it throws some errors. Once installation is complete, bring those files back and that should work as it was before.

Happy grunting.

A Record is now on Play store

Continuing with my Cordova ( Phonegap ) exploration, I pushed a new Android application to Google Play store.
splash
The application is to record audio. Start the application, press the record to start and press again to stop. You are done with recording and audio file is stored in your local file system.
The application is again a standalone application and does not require to connect to internet. So its private, secure, offline and yours.

As usual, its open-source and the source code is in github. Would love to listen back your take on the application.

Phonegap ( cordova ) and iOS longtap

This is perhaps the most significant effect of using a webview for iOS development. When working with Phonegap(cordova) which uses WebView, the user gets a longtap event as it use to on a web browser. All sort of long tap menus will come up in an application using Phonegap (ex : select, copy etc).
To suppress these unwanted menus on a native application, which uses Phonegap(Cordova), there are a number of options found throughout the internet, but the one which worked for me is a style declaration as below.

/* Disabling the default iOS bevaviour of copy-paste on long tap */
*:not(input):not(textarea) {
	-webkit-user-select: none; /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */

}

Happy coding :)

My first Android application on Play store, The Address.

theAddress
This is exciting to get my first Google Play store application. Previously I worked on some Android applications, but nothing was up there in the Play Store. For me its really a different experience pushing it to the Play store. Unlike pushing to Apple App store, the Play Store push feels like no brainer.
Now, talking about the application, its a personal note taking application for an absolute necessary address. This application does not require internet connection at all. Its a pure standalone application on its own. Its private to the user.
Open up the application, fill out the form to add an address and save it. Thats all it does. Once you come back to get the address, it shows upfront the saved address. Incase you are done with the currently stored address, update the form with a new address and save it. It does not store history of your previous addresses.
Now the implementation is done with Cordova (phonegap) 2.7 , jQuery 2.0 , jQuery Mobile 1.3 , lawnchair and GASP JS(GreenSock Animation Platform for Javascript). Its completely opensource and the code can be found at Github.

Looking forward to listen from you all.

Cordova(Phonegap), jQueryMobile and making a popup

This may seem obvious to make a pop-up with jQuerymobile with its popup API, but its a little more than just calling the api.
The problem is closing the popup. When working in a single page application in jQuerymobile and phonegap, the closing of the popup will take you to different jQueryMobile pages depending upon your setup.
The solution is to make the popup ready to be open just at the current page and while closing it should not make the application go to different pages. The trick is to while initialising the popup widget, initialise it with “{history: false}”, and thats all.
Here is a popup created with jQueryMobile API.

My PopUp

Title

Save Cancel

Here is the javascript code to initialise the widget and open it.

//making a popup which will not take you back to the previous page.
$('#popupDialog').popup({history: false});//awesomeness
$('#popupDialog').popup('open');

Happy coding :)

First book review : Aptana Studio Beginner's guide

This came to me as a surprise that I have been asked to review a book and write something about it. I started of with excitement as to finish the book as soon as possible and write something about it. So here it goes.
The book : Aptana Studio Beginner’s Guide
A nice book, as it states from its title. Which is unlikely, is its not only for “beginners only”. This is all you need to get started with Aptana studio but in general Eclipse IDE of any kind.
Aptana Studio itself provides a very solid IDE which is both free and opensource. I love this IDE as I do HTML and JS projects with this IDE. The most appealing thing about this IDE is its cross-platform, so one IDE, one experience everywhere. I must say its a must have for anyone who is serious about Javascript development in general.
Now to get the most out of this nice IDE, this companion book is a must have I would say to get you started and to know what can you do with the IDE.
This book starts with very basic things as to menus and workspace and then move on to deeper topics as to configure it to suite your working style. After working with this IDE for such a long time, I found this book reveals a lot more which came as surprise to me. Things like saving your own customised look and preferences, making shortcuts, the command-line interface inside the IDE and lot more are covered in detail, from a beginner’s perspective.

All in all a nice book to have if you want to get used to Aptana IDE in particular or Eclipse IDE in general.

Thanks a lot to Kenny Dias from Packt Publishing, who gave me this opportunity to review this book.

Things to consider for Cordova (phonegap) development

This came to me as a learning from my first Cordova(phonegap) application development.
The first thing one comes across while developing in Phonegap is “the need for a GUI lib” and the first thing to get in a search result is jQuery, its mobile version and the UI lib. There are many other good libs out there, but this one seems quite ok. While one may choose to use a UI lib or build own lib its up to the developer. In my experience its easy to get started with jQueryMobile and its UI, which uses “Theme roller” to theme the UI.
If one is using jQueryMobile then the trick is to try and solve all the UI problems with this lib itself (not hacking the CSS and JS all over the place in the project). That way the performance will be more and pain to solve all the UI problems is less.

One can just start to make one Cordova application without any libraries, but to be productive soon, the minimum required libraries are
1. jQuery
2. jQueryMobile
3. cordova

Now the most important library which might not be required for the project as a project dependency but is a real time saver is
1. UnderscoreJS
After some playing around with the library and from the suggestion from the community I found Lo-Dash library, which is a drop-in replacement for UnderscoreJS with performance enhancements. So I would recommend using
1. Lo-Dash

Now to coding tips, if one knows the “scope” and “this” in javascript, then writing javascript applications are just fun. So prepare yourself with javascript and how it works, so as to make your life easier developing the application.

Target platform and the library support :
The current Cordova lib might not support your required target platform !! Yeah, that is another thing which might take up sometime to know in the beginning. With each release these libraries kind of deprecate support for old platforms, so check that out in the beginning itself.
The same goes for jQuery and jQueryMbile. Check out whether the latest version of the library supports your target platform.

Native Notifications in Cordova is not supported :
Cordova (phonegap) does not support native notifications. It only supports “alerts”,”confirm” (kind of alert only),”beep”(sound) and “vibrate” (device vibration). But then if you expect to do “alert” notification as iOS and Android devices do (like showing the alerts to user when the application is running in background), then Cordova (phonegap) does not help. One has to write native libraries in native languages and call them from javascript through Cordova.

jQuery tips :
Adding an element to a page and displaying it :
jQuery “append()” and “prepend()” does not update the UI (or DOM), so the added elements are not visible by default. we can hack it by dispatching a jQuery event called “create”, the code will look as below

$("#p_4_content").prepend("hello World").trigger( "create" );

That will tell jQuery to render the UI again, resulting in displaying the added item.

Defining EventHandler Scope :
Another nice thing is calling the event handler in required “scope”. The jQuery library provides a handy method for adding event event handlers as

$('#id_btn').on( 'tap', onBtnTapped );

But then it will be scoped to the same scope as where its being written. If you are writing things in an Object, you might want to get the “scope” in the handler(which is “this”), in order to do that, jQuery provides a “third” parameter option, and one can pass the scope in there. The optional parameter is at the middle instead of at the end (as comparing to other object oriented programming convention)!! But then its the way to go. So the modified code will look as below

$('#id_btn').on( 'tap', this, onBtnTapped ); //Look at the middle parameter
//and the handler code looks as below
onBtnTapped :function(event){
    	//just saving the scope, may be we need it in future here
    	var that = event.data; //here event.data=this (which we passed as second param)
    }

That way inside the handler we can get the “scope” as below

var that = event.data;

The second parameter sent while binding the handler to the event, can be got inside the event handler as “event.data”. Since we are just passing “this”, we can get that in the handler as the example shown above.

Writing the EventHandler :
Well, now the trick writing an eventhandler without making the application behave unreasonably is a challenge. It might sound silly but it is not. If you write an event handler as

onBtnTapped: function(event){
    	//Do something
    }

Then its bound to get in your way of the behavior of your application. The jQuery fix is to do a “return false” in all the handlers. But then that might not be the case of your handler as that might return in between the code itself. So the fix is make a call to “preventDefault” as soon as you are inside the handler method. the modified code will look as below

onBtnTapped: function(event){
        event.preventDefault();
    	//Do something
    }

That is the start, I will post more tips as I fight through the scenarios.

CoffeeScript, the first taste

On my path inside javascript land, I came across CoffeeScript which compiles to JavaScript. One week of handson to the language and I tried to write a simple phonegap application with CoffeeScript taking jQueryMobile into action. The whole project is on github, the whole of the CoffeeScript is here for your reference.

First thing I liked about the language is, it compiles to a very decent, rather I would say the best handwritten JavaScript. That itself is a huge advantage if one wants to learn JavaScript.
The code is modular and compiler is straight forward so its an immediate likable thing if one wants to code ahead in JavaScript. The community is vibrant and the official documentation itself is quite nice.
It is a must try for any javascript developer.

Things to keep in mind, and must be kept in mind while coding in CoffeeScript, are
1. The indentation should be exactly same
2. Each function returns the lastline of code in the function
(I faked it in above code by writing “null” at the end of each function)

Happy Coffee