I love coding. My work is my hobby and I like to write small little apps and tools that I can use myself. I also use several machines with multiple operating systems on them and I need a workflow that would allow me to seamlesly synchornize between my machines. For this I created this process that involves git and dropbox, to keep my personal projects under source code control and have it synchroned to all my machines automatically. So I decided to document this method here.

Disclaimer: I do not invented this method. Originally I saw the idea on stackoverflow.com:

Stackoverflow – Using git dropbox together effectively?

I am also not convinced that this method is suitable for more than one person to use. I am a single developer and this process fits my need perfectly.

Overview

I use Visual Studio.NET 2010, dropbox and msysgit on all my Windows machines. I am mainly developing for my Windows Phone and soon I will try to create Metro Apps for Windows 8. Although, this will be .NET and Visual Studio centric recipe, you can still use it with your own stuff. The only crucial component is dropbox and git.

Let say, you have two machines. One laptop that you carry around and one desktop. Both have dropbox and git installed. You start creating your project on your laptop, but when you arrive home you would like to continue the coding on your desktop machine. So what will happen is the following:

• I will set up the project on my laptop and add it to the git source control
• I will initialize a bare repository on my laptop’s dropbox folder.
• Will push the project to dropbox.
• Get the project on the desktop machine

Setting up project and add it to git

• Set up your Visual Studio.NET project and do some coding

First, thing first is to create your application in Visual Studio.NET 2010. I will create a new todo app for my Windows Phone called TodoApp_WP7. Cannot see enough todo app on this new platform yet. So we need one

• Initialize the git repository in the solution folder

Open up msysgit and navigate to your solution folder. Initialize your git repo and your

git init

Before adding your project files, it is a good idea to create a .gitognore file. Here you can specify what files you want to exclude from source code controll! So in your msysgit command line you issue this command to create .gitignore and add the things you would like to ignore.

touch .gitignore
notepad .gitignore

I have something like this in my .gitignore

User-specific files

*.suo
*.user
*.sln.docstates

Others

[Bb]in
[Oo]bj

Then you can add your files and do your first commit

git add .
git commit -m “first commit”

Pushing the changes to Dropbox

• Create a git folder in your Dropbox folder and initialize a bare git repository

Navigate to your git dropbox folder and create your bare repository. Navigating in the git shell can be tricky to someone, who knows only windows command line.

My Dropbox is installed on my machine here D:\Dropbox, so to go to that folder you need to issue this command:

cd /d/Dropbox/git
git init —bare TodoApp_WP7.git

• Adding remotes

Now you need to go back to your project directory and configure the dropbox folder as the origin for your project. I also add a remote called dropbox as a convenience.

git remote add origin /d/Dropbox/git/TodoAppWP7.git
git remote add dropbox /d/Dropbox/git/TodoAppWP7.git

• Push the project to your bare dropbox repository

Now you need to push the project to your dropbox repository

git push -u origin master

• On your other machine just simply do a git clone to get the project

Getting your project from Dropbox to another computer for the first time

When logging on to your other machine you will see that dropbox is busy to refresh all the files you were changing or it already has been happened. All you need to do is to open up the git client on your machine, navigate to your dev folder an issue the command

git clone /d/Dropbox/git/TodoApp_WP7.git

This will create the folder in your dev folder and gets the source code of your app. You will need not to worry about remotes, however you can create anew remote called dropbox, if you like.
Now you are ready to launch Visual Studio on the machine and do some changes. After finishing your work you can return to the git command line and issue the following command to find out what has changed:

git status

You will see all files that are changed or new. You will need to add the changes to your change set and commit these changes .

git add .
git commit -m “My new changes to my app”

With the commit command you added all the changes to your git repository. However, you still need to push these changes to your dropbox. It is called origin and it is automatically created when you cloned your project from dropbox.

All you need to do is to issue the following command:

git push

Now you are done with all the changes and these are now synchronized on all your developer machines.

Getting the changes for your project on a machine that already has your project.

This is the simples command. All you need to do is to go to your project repository and do a pull operation:

git pull

I hope that you will find this method useful for synchronizing code between your computer via dropbox and git. If you have any questions, please do not hesitate to contact me!

Useful links

• git cheat sheet

Previously I spent hours trying to draw symbols myself, but I never really liked the outcome. But lately, I found a quick and effective way to create nice looking icons for my Windows Phone 7 apps. Here it goes:

The Noun project

First, I go to the nounproject website to find some nice looking symbols. This website has hundreeds of symbols and you can download them for free in vector format. The graphics comes with a Creative Commons license, so you’re free to do whatever you want with them. Sounds pretty neat, if you ask me!

thenounproject website

Once, you found the symbol you like, download and extract it. The symbol is in SVG format. I am using Expression Design for drawing my icons, but Design unfortunately does not support SVG yet. I need a tool that can convert SVG to something that I can import to Expression Design.

Choose a symbol from thenounproject site.

Inkscape

With Inkscape I can do exactly this. Inkscape can import SVG and can export .PDF and .PDF can be imported to Expression Design. Inkscape is a very cool, free and open source drawing application. You can download it from here.

Download and install Inkscape

Once Inkscape is installed then you can import the .SVG file and save it as .PDF file. After that I change the  .PDF extension to .AI and now I can import into Expression Design.

First, import your svg file to Inkscape for converting to AI format:

Import your symbol to Inkscape

Symbol imported

Then save the your symbol in PDF format. Make sure that PDF 1.4 is selected as PDF version:

Export your symbol in PDF format

Setting the correct PDF version

Expression Design

Before importing to Expression Design rename the exported .pdf to  .ai. This way Expression Design can export your artwork as an Adobe Illustrator file.

Import your artwork to Expression Design

Here in Expression Design I can re-use my icon design template to create all the different sizes of icons that are needed for my WP7 app and export them to .PNG format to embedd in your WP7 Application project.

Your artwork now imported to Expression Design

You can also change the shape as it is vector based to alter the shape!

Vector shapes in Expression Design

Bonus

If you would like to have this artwork in your silverlight, wpf or your windows phone app, you can also create a xaml file out of it in Expression Blend importing the .ai file and converting it to xaml.

Artwork imported to Expression Blend

Happy coding!

Finished iPad stand

The rest of the images:

Windows Phone 7 Icons with Expression Design

For your application and for marketplace submission you will need the following artwork:

• Application Icon (62 x 62)
• Application Tile Image (173 x 173)
• Marketplace catalog icon (small) (99 x 99)
• Marketplate catalog icon (large) (173 x 173)
• Desktop application icon (200 x 200)

To create an icon and the resize it correctly and export it is always a lot of repetitive work, the one I do not enjoy. So in my favorite design tool – Expression Design 4 – created a file, where all you need is to replace the shape in each icon and select File | Export and you are done. All the icons will be ready for your project.

I created a git repository for it called WP7ExpressionIcons.

I used this to articles as my starting point:

• Programming Windows Phone 7.5 Part 2: Icons
• Creating Windows Phone 7 Application and Marketplace icons

I also really like the Twitter Bootstrap framework from twitter. It looks totally awesome and it can be used to create good looking websites really quick. So it made sense to create an MVC project using Twitter Bootstrap. The result is BootstrapMVC.

BootstrapMVC is an ASP.NET MVC project using the Twitter Botstrap CSS. Just download it from github and open the solution file in Visual Studio.NET.

This is how it looks:

BootstrapMVC

Check out the BootstrapMVC or download the project from github.

If you use the same email address that you used to register with Nokia Launchpad to register for a one year membership for Apphub, the $99 price of the membership will be returned to you.

The Apphub is the main site, where you can register to publish apps to the Windows Phone 7 Marketplace or to xbox360, a one year membership costs $99 dollars. So if you are planning to develop and publish apps for the Windows Phone 7 platform then it is time take the chance and register for free.

Here is the information from Nokia:

We are offering a free Microsoft App Hub registration for the first one year to those Nokia Developer PRO and Launchpad members who are registered Ovi publishers in the countries that Microsoft supports on the App Hub. This offer will save you $99 USD (the regular annual membership fee) as the membership fee will be refunded to you by Microsoft. The membership will give you access to submit applications for Windows Phone Marketplace as well as access to the developer tools, documentation, code samples and forums.