Tuesday, July 24, 2012

A basic example with Git

In this post, I shall talk about how to create a sample project on Github and start pushing files to your Github account from your machine. You will learn how to create and get started with an example project and start working on a full fledged social project.

  • Create a new repository on Github. In your computer, create a new folder (Eg. C:\Documents\My Projects\Sample)
  • Download and install Git and navigate to the directory in Git console and initialize git – git init
  • Create/add all the project files to the folder and use the command – git add .
  • Enter the command git commit –m “message” and hit enter.
  • Next, enter the command git remote add origin https://github.com/username/repo-name.git where the username is your username and repo-name is the name of the repository you created.
  • Enter git push and your project files are now pushed to the server.

Each time when you make changes to your project and push it to the server, repeat the following steps:

  • git add . 
  • git commit –m “message”
  • git push

That's it! You have learnt the basics of Git and all set to start social coding!

Basic Git commands

Github is an online service that hosts git projects and helps achieve social coding. Sign up for Github. After you have signed up and logged in, create a new repository. Once the repository has been created in Github, start the Git Bash/Terminal and navigate to a folder in your local machine where you want to store your project files.

  • You can use the Change Directory – cd and Make Directory – mkdir commands in both Git Bash and Terminal to navigate to the directory.

The initial setup requires an username and email that will be used to uniquely identify the user who has made changes to the project. 

  • Once you have navigated to the directory, initialize Git in that folder by using the command git init

Add all the necessary project files. To make Git track these files, you need to explicitly specify it using the Git Add command. 

  • To track all files, you can use the git add . command (notice the dot in the end).
  • Next, the files need to be committed to the local repository. The command is git commit –m “message”. The –m “message” requires a message every time you commit, to uniquely identify the versions and you need to specify it within quotes.

Now, the server location has to be known by Git to put the files on the server.

  • The command for this is : git remote add origin https://github.com/username/repo-name.git (where the username is your Github username and the repo-name is your repository name.)

The files now need to be sent or pushed to the server. This enables the server to maintain the latest version of the code every time.

  • The command to send the latest commit version to the server is git push

If the server has a newer version of the project, it will not allow a push until you have a newer version. So the push fails and Git asks you to do a pull before you can push.

  • The command for a pull from the server is git pull

You will now be able to push your commits to the server once you have a newer version.

Monday, July 23, 2012

Setting up Git

Setting up Git in Windows:

  • Login to Github account and create a new repository.
  • Download Git for Windows. The exe is available here.
  • After the installation is complete, run the Git Bash program in Windows.
Setting up Git in Linux:
  • Git can be set up on Ubuntu using the command “apt-get install git-core”
  • Start the terminal access and use the features of git.

The basics of Git

In short, Git can be summed up as the following:

  • Git is a version control system where multiple people can work on a same project and maintain the code at a central location.
  • It maintains all the previous versions of files in a smart way and we can recover the changes the made to any of the versions.
  • It is free for open sourced projects and we can use anyone’s code on Github and work on them.
    The set up process for Windows and Linux are different, but the commands are same for both Windows and Linux as well.
  • The code is stored in a local project directory and is periodically updated to the server as changes are made to the project.
  • Every time, the latest code is always on the server, and changes are always made to the latest version.
I shall explain more about Git and the basic commands in Git in the next post.

Wednesday, July 18, 2012

How to get rid of system tray in PhoneGap within Windows Phone

Visual Studio 2010 Express Edition creates a basic template for you in PhoneGap, but it does come with an inherent, irritating native system tray for Windows Phone applications. This is what I'm talking about:

 In your Visual Studio project, you can safely disable the system tray with one click so that it doesn't affect the look and feel of your application. You just need to set the SystemTray.IsVisible to "false". Select the system tray in your design area and look at the properties panel. I have illustrated it for better understanding:

Now,  take a look at the properties panel and un-check the SystemTray.IsVisible option: 

 Once you have un-checked the box, the System Tray disappears :) This can also be done by modifying the XAML and setting the same property to "False" all by yourself. Also, changing this in one page does not mean that it gets changed for all other pages. You need to manually edit and change them all.

Monday, July 16, 2012

PhoneGap Windows Phone test results

I have tested all the features of PhoneGap (Apache Cordova) on Windows Phone (on my HTC T8788, Surround) and I have gathered the following test results:

1. Start call, end call buttons not available on Windows Phone.
2. PhoneGap does not have access to Windows Phone battery APIs, even though they are available through the native C# development.
3. The play, pause, stop and record events report a JSON error. 

Friday, June 15, 2012

How to detect page refresh using Javascript

Today I'm going talk about how to detect a page reload/refresh using Javascript. It can be done using server side scripts, but I find that Javascript is the easiest method to do this. This is how I go about it:

First, we need a form to detect the page reload. If you have a form in your page, you can use the same, or in case that you don't have/use a form on your page, you can simply create one and set its CSS visibility to hidden, so that it doesn't unnecessarily show up on the page.

This is what you need to add to your HTML:

<body onLoad="refreshCheck()">
 Your website content here

The necessary Javascript that is to be added is:

function refreshCheck()
 if( document.refresh.visited.value == "" )
  // Page loaded for first time
  document.refresh.visited.value = "1";
  // On page refresh

That's it! You can handle the events as you want instead of the alerts ;)

Saturday, June 2, 2012

How to set up Apache Cordova (PhoneGap) in Visual Studio Express Edition for Windows Phone


In the previous post, I had talked about the PhoneGap (Apache Cordova) platform and it's features. It's now time to advance a step further and set up an environment to start working on PhoneGap. You can set up an environment on the SDK of any platform supported by PhoneGap to start coding on the PhoneGap standards. As I use Microsoft Windows to develop applications for Windows Phone using the Visual Studio 2010 Express edition for Windows Phone (the Windows Phone SDK provided by Microsoft), I found it easier to start working on the same for PhoneGap too. Alternatively, you can set up PhoneGap on Eclipse too, if you are already developing for Android. If you don't have Eclipse or Android SDK or AVD installed, I would recommend you to set it up on Windows Phone SDK as it takes very few steps to set up and doesn't demand much of your time or knowledge to setup the platform. I have come across many websites that talk about how to start working on PhoneGap using Visual Studio 2010 Express Edition for Windows Phone. The authors of such articles say that just the installation of Visual Studio 2010 Express enables you to work on PhoneGap by directly starting a new PhoneGap project in Visual Studio itself. But when I installed my copy of the same Visual Studio, I couldn't find the pre-installed PhoneGap templates. When I searched on the web for the solution for this problem, I found that many users seem to face the same problem as well. I'm still trying to figure out which version of Visual Studio does or does not have the templates pre-installed. However, this article can be the starting point for either cases.


  • Download the Windows Phone SDK from here: http://www.microsoft.com/en-us/download/details.aspx?id=27570 It includes Visual Studio Express for Windows Phone and the Windows Phone Emulator to test your app on the emulator. It also installs other packages like Silverlight and XNA Game Studio, which we won't be interested in.


  • Install the Windows Phone SDK and after the installation is complete, run Visual Studio Express for Windows Phone (You can find it in Start > All Programs > Microsoft Visual Studio 2010 Express > Microsoft Visual Studio 2010 Express for Windows Phone.exe)

  • Once you have started the Visual Studio, create a new project. If you have a PhoneGap template already installed, you can see it in the list of installed templates when you start a new project. If you see the following screen, it means that you have completed setting up PhoneGap on Visual Studio Express.

  • If you see the above screen already, you are done with the installation of PhoneGap and that brings us to the end of this post. However, if you don't see the PhoneGap Starter template, read on and follow the instructions to set it up.

  • Extract the ZIP archive that you downloaded from the PhoneGap website in the step two of requirements mentioned above. Navigate to the extracted folder and look for the "Windows" or "Windows Phone" directory and find the following ZIP archives inside it: Cordova-(Version Number)-Starter.zip and Cordova-(Version Number)-Custom.zip. 

  • Copy these zip files from the folder to the templates folder of Visual Studio 2010. The target folder is located in your system at C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\

  • Now, start Visual Studio 2010 Express (Close and restart if it is already running) and create a new project. You will now find the Cordova template(s) in the list of installed templates: 

That's it! You have set up PhoneGap on Visual Studio for Windows Phone! In the next post, I shall talk about creating a simple Hello World application using PhoneGap on Visual Studio.

Friday, June 1, 2012

Getting started with PhoneGap

What is PhoneGap? PhoneGap (now known as Apache Cordova) is an open-source mobile development framework originally created by Nitobi, purchased by Adobe Systems. It enables developers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of platform specific languages such as C#, XAML, Java, XML, Objective-C etc. The resulting applications are hybrid, meaning that they are neither truly native (all layout rendering is done via the webview instead of the platform's native UI framework) nor purely web based (they are not just web apps but packed for appstore distribution, and have access to part of the device API).

The following are the features of PhoneGap :

Building applications for each device like iPhone, Android, Windows Mobile etc. requires different frameworks and languages. PhoneGap uses standards-based web technologies to bridge web applications and mobile devices. Plus, because PhoneGap apps are standards compliant, they’re future-proofed to work with browsers as they evolve.

PhoneGap is an open source implementation of open standards. That means developers and companies can use PhoneGap for mobile applications that are free, commercial, open source, or any combination of these. The PhoneGap SDK provides an API that is an abstraction layer providing the developer with access to hardware and platform specific features. As PhoneGap abstracts the native mobile platform, the same code can be used on multiple mobile platform with little or no change, making your application available to a wider audience. By default, PhoneGap provides access to the device camera, accelerometer, file system, GPS location, and media playback among other capabilities. However, PhoneGap does not expose every native API for use within your JavaScript applications. If you want PhoneGap to do more than its default feature set, you can use the PhoneGap native plugin model to extend the capabilities of the core PhoneGap API. Native plugins in PhoneGap are not like plugins in desktop browsers; rather they provide a way for you to plug in custom code to add to what the PhoneGap application framework can do. PhoneGap native plugins enable you to create completely new, custom functionality in native code, and expose that to your PhoneGap applications via PhoneGap's native-to-JavaScript bridge. This means that you can expose any native library or framework for use within your JavaScript-based PhoneGap applications.

Official PhoneGap website: http://www.phonegap.com

You can take a look at the apps that have been previously made using PhoneGap : http://phonegap.com/apps

PhoneGap allows you to build the apps for different platforms using a single code base. Having said that, you still have to install the SDK of every supported platform for which you want an app to be built. For instance, if you are working on PhoneGap using Visual Studio Express Edition 2010 for Windows Phone, and you want an Android build, you have to port the same code to Eclipse, and the Android and PhoneGap plugins need to be installed in Eclipse beforehand. So if you are targeting 6 platforms, you need to have six SDKs installed and manually generate the builds for each platform. Feeling too lazy already? Here's a workaround that the PhoneGap developers have come up with - the PhoneGap Build. Forget all the pain with the SDKs, code once and compile on the cloud. It automatically generates builds for all the supported platforms! That's like a charm!

You can read more about compiling on the cloud here : https://build.phonegap.com/

All the public apps are free and are hosted on Github. You get to host one free private app and you have to pay for any subsequent private apps. The plans are as given below:

On the whole, PhoneGap is simple, fun and saves a lot of time by just writing a single code. I have just started working on PhoneGap and hope to learn a lot in the process :)

Wednesday, April 4, 2012

How to add Custom Fonts in CSS

Today, I was searching the internet to use custom fonts on my website. I got a few links here and there that spoke about how to add fonts that are not supported by default in any browser, but I didn't find the articles convincing. So I planned to write my own article elaborating the use of such fonts on websites.

Basically, we will make use of the @font-face property to load a custom font from the local folder in order to use it. The syntax is as follows:

@font-face { 
font-family: font-name; 
src: url('font-name.ttf'); 

Where font-name is the name of the font in your local folder. You need to ensure whether the path of the font is correct (In this example, the font file(s) is assumed to reside in the same folder as that of the CSS file). This causes the CSS to load the font in your browser so that you can use the font just using the font-family property anywhere throughout the page.

As there has been constant wars among browsers with respect to CSS, we need to use more types of the same font to ensure cross-browser compatibility. The following formats will be required for the same:

EOT – Embedded Open Type
OTF – Open Type Format
WOFF – Web Open Font Format
SVG – Scalable Vector Graphics

Once you have obtained the .EOT, .OTF, .WOFF and .SVG formats of the same font, you can modify the @font-family property as follows:

@font-face { 
font-family: 'font-name'; 
src: url('font-name.eot'); 
src: ('font-name.woff') format('woff'), url('font-name.ttf') format('truetype'), url('font-name.svg') format('svg'); 
font-weight: normal; 
font-style: normal; 

We add the extra properties font-weight and font-style to ensure that the font is shown in the same manner in all the browsers.

You may now be thinking of how to obtain various formats of the same font. There are some free online generators that can help generate the other formats once toy provide the .TTF or the .OTF file. There are two free online services that generate the necessary formats of the same font: FontSquirrel and Font2Web.