Monthly Archives: August 2013

Social plugin for Phonegap 2.6 and up

Posted on by

In my search to have the iOS 6 default social sharing plugin, I landed up at this page. While everything seems right for this plugin, I somehow faced some problems in the UX. Thought would look a little deeper into it and found that this plugin relies upon the old plugin architecture of Phonegap. It still works, but then if it does not, you know know why.
Now to implement social sharing in my project, I have done a quick round of update to the plugin. Its working in my phonegap version 2.6. And that should work on Phonegap 3 as well, as the new plugin implementation has not changed after version 2.0.
Here is the github link for the new plugin.
While currently this plugin only shares the link and the message, you have to send a third parameter as an empty string for the image parameter. I will do the code cleanup and fix as I get some time to look into it. For the time being, its ready to use in new Phonegap versions.

Happy coding :)

GruntJS for CSS minification

Posted on by

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.

Introduction to GruntJS

Posted on by

Developing in Javascript (in that case for frontend web-development) always feels manual provided you came across this nice library called GruntJS.
As the name suggests, it takes the grunt work out of the developers workflow. The repetitive and manual tasks could be automated with this nice library.
GruntJS requires NodeJS. Well, actually it does not require, it works on NodeJS. So the basic to get started is NodeJS. Once NodeJS is installed, one need to install GruntJS, locally per project. As of version 0.4, it is advised to uninstall the globally installed GruntJS module.
Must haves :
1. NodeJS installed
2. GruntJS installed locally.
3. Must uninstall GruntJS globally (if its already installed globally).

npm uninstall -g grunt

Link to the NPM Grunt package is here.

There we go, the basic setup to get started with our grunt work. Now to work with GruntJS, we need two files, which are as below;
1. Gruntfile.js (previously it was called grunt.js)
2. package.json
These two files are to be present right next to the locally installed GruntJS NPM module rather its the other way round. After deciding a place for GruntJS setup, in your work environment for the project, install the NPM modules locally in that folder. Next we can make these two files in the same folder.

The last and most notable task is to install the dependent task packages locally. These are the tasks we want to give GruntJS. For example, if we want to minify a JS file using UglifyJS, then we must install it locally for the project before using it.

npm install grunt-contrib-uglify

Finally, to fire up the grunt work, open the command prompt and navigate to the folder where we have the above two files and type;

grunt

Here is the github link to the setup, if you want to directly jump into the code.

Thats all, keep the grunt work to GruntJS.
Happy coding.