Working with a Codespaces.com Git repository on Windows–Pulling your code

This post is third part of a mini series which I have written to aid in setting up and using your Codespaces.com Git repository remotely on Windows. Links to the previous posts in the series can be found below.

1. Getting started; setting up your SSH Public Key
2. Pushing your code into the hosted repository
3. Pulling your code from the hosted repository (this article)

Compared to the previous steps in this series this is relatively straight forward however was the more complicated to work out.

Pulling from your remote repository

First off create the new folder where the local repository is going to be located. Once the new folder has been created right click on the folder and select “Git GUI here”.

In the resulting dialog select the “Create New Repository” option as seen below.

When prompted select the new folder which you’ve just created as to where the new repository is going to be created. I found the selection process would automatically select the folder you had right clicked on when selecting the browse option but check. Once successful this will fire up the Git GUI which we were using in the previous post.

At this point we need to drop to the Git bash command line. It has something to do with wanting to make sure people are using Pull correctly and so is not possible through the GUI as far as I could find.

Fire up a Git Bash shell instance. You can either do this by clicking on the shortcut, finding the program in the Start menu or right clicking on a folder and selecting “Git bash here”.

Once this is started make sure you at the correct location. If you are not in the required folder it can be easily remedied by using the command “cd” followed by the location of the folder you have just created. As this is a linux/unix type shell running in windows it doesn’t understand “c:\” so to change the path to “c:\src\folder\trunk” you will need to type:

cd /c/src/folder/trunk

Once you have navigated to desired folder location then you need to type the following command:

git pull git@codespaces.com:username/gitrepository HEAD

Replacing the username with your own username and gitrepository with the desired git repository name.

On executing the command it will prompt you for your passphrase. Don’t be alarmed if nothing gets displayed on the screen this is just how this shell works for security. If you type it incorrectly it will ask you again. If at any point you want to stop the command start again you can press “ctrl+c” and it will cancel.

Once you have entered your passphrase correctly it will contact the remote repository. The bash shell will then display something similar to the above logging the actions of which it is performing.

Once it has finished performing this action you can browse to your new folder you have created and will have the code in place ready to edit again.

Conclusion

In this post we have setup a new local repository to mimic computer move or hard drive failure and pulled the latest code from the master branch of our Codespaces.com remote git  repository into our newly created local repository.

Working with a Codespaces.com Git repository on Windows–Pushing your code remotely

This post is the second part of a mini series which I have written to aid in setting up and using your Codespaces.com Git repository remotely on Windows.

1. Getting started; setting up your SSH Public Key
2. Pushing your code into the hosted repository (this article)
3. Pulling your code from the hosted repository

Pushing to your remote repository

The first step to pushing your code into a remote repository is to create one in your Codespaces.com Admin section. You will find a settings area where you administer your users, projects, repositories and backups.

Once here click on the ribbon button to create a new Git repository.

A dialog will appear asking for information about the new Git repository. Fill in all the details which the required taking note of the name of the repository as this will be required later.

I’m using a code project which was originally posted on Github for some example code to post.

Once the information has been filled in click “Save” and your new repository should appear in the list on the right hand side. If this doesn’t automatically appear then select the “Git Repositories” option from the “Settings” tree view on the left and it will refresh the list and should now appear.

If there is a notification of failure or you are unable to see the repository in the list then try again. If this continues to be unsuccessful then contact Codespaces.com support.

If you now navigate to the “Source Code” tab and select the newly created repository from the dropdown you will see that it has been created but there are no folders in it yet. It will display a folder called “Empty Repository” however this is not a real folder and will disappear once you have submitted some code to it.

The repository has been created and you will be given a url on which you can access it by. It will be in the format of:

git@codespaces.com:username/repositoryname

Please replace username and repositoryname as required with your specified credentials. These can be found next to the branches dropdown list on the “Source Code” tab.

Getting Git Working

The next step is to get Git, which has been installed on your computer, talking to the remote repository we’ve just created and to push the code into it.

Find the folder where your code is. This will be where you already have an established local repository where you have been committing changes to for a while. Right click on this folder and click “Git GUI here”. This will fire up the Git GUI at this location.

At this point Git locally doesn’t know about the remote location so we need to add the information into the system. Click the “remote” option in the tool bar and “Add …”.

Fill in the required fields making use of the url which was created earlier when initialising the repository. Select the “Do Nothing Else Now” option as we will perform the Push in a minute.

Once you are happy with the information click “Add”. Now go back to the Git GUI and re-select the “remote” option in the tool bar. You will be presented with more options now a remote connection has been setup.

In the main window click “Push” from the list of action buttons which appear towards the bottom of the screen. In the dialog which appears select the correct remote destination repository. This dropdown will only have the remote location you just entered unless an additional location had already been setup.

There are a number of options here which you can select. You may need to Force the overwrite of the existing branch if you are working with an old branch you want to re-use or if something has gone wrong earlier. Finally click “Push”.

A new dialog will appear and it will inform you that it is pushing the code to the repository and sit there for a few seconds.

At this point it another window will prompt you for your passphrase you created in the first part of the series and click ok.

If everything went well you will get a big green success bar displayed.

Now to check that it worked we want to check the remote repository. Navigate back to the “Source Code” tab in your Codespaces.com dashboard and refresh your repository listing.

You will find that the “Empty Repository” folder which was there earlier has now disappeared and been replaced with your committed code. You can now browse the code online through this web application view.

Conclusion

In this post we have created our remote Git repository in our Codespaces.com account and pushed up the content of our local Git repository using the Git GUI.

Next time we’ll be pulling the remote repository code down onto our development system in a brand new local repository to replicate hard drive failure or a multi development machine environment.

Working with a Codespaces.com Git repository on Windows–SSH Key setup

This post is the first part of a mini series which I have written to aid in setting up and using your Codespaces.com Git repository remotely on Windows.

1. Getting started; setting up your SSH Public Key (this article)
2. Pushing your code into the hosted repository
3. Pulling your code from the hosted repository

Getting started

To start off you need to download and install msysgit which will give you the basics; make sure you include the “Git bash” and “Git Gui” options during the installation.

SSH key creation

First step to working with Codespaces repositories, or any remote git repositories, is to create a ssh key. This is done by using the git bash shell. The shortcut looks like this:

Once the bash shell has loaded you will be presented with a command line interface similar to a linux/unix command line.

Type ‘ssh-keygen’ and something similar to the following will appear. Leave it with the default locations as this will aid in locating the files later.

The process will ask you for your passphrase. Remember this as you will be prompted for it every time you want to perform actions on the remote repository.

Once the file is created you will be returned to the command prompt. At this point locate the file in the location where it was originally specified - in my case c:\users\west\.ssh - and you will find two files; “id_rsa” and “id_rsa.pub”.

Open the id_rsa.pub file in notepad (other plain text editors are available) and minimise as you will need this in a few minutes.

Log into your Codespaces.com dashboard and navigate to “My Profile” and then “SSH Keys”.

This is where you will need the notepad instance you minimised earlier. Copy the contents of the file and paste into the “Key Value” text box. Set the value of the “Key Name” to something appropriate; for this example I have called it “Public”.

One thing to note, make sure you remove any additional carriage returns from the end of the key value entered value. Once you are happy with this click “Add Key”. If this has been saved successfully you will be notified and the key will be listed on the right hand side.

This action will have performed what you need for encryption keys to allow access between your computer and remote Codespace repository. Please keep the keys safe and secure as you don’t want any unauthorised people getting access.

Conclusion

In this post we have created our ssh keys and added them to our Codespaces.com account information to allow for remote access.

Next time we’ll be pushing our local repository code into the remote repository.

Working with a Codespaces.com Git repository on Windows–Mini series

I have been working on my personal development projects in local git repositories for a while now and wanted to get them into my Codespaces.com remote git repositories for backup. Its fine having source control locally but no help if the hard drive ever failed.

On doing some research on the internet I found there was almost nothing on getting setup with Windows and Git on Codespaces.com so I have put together this mini series of posts to aid others in doing so. The information in these posts are the processes I went through with getting setup so I hope they will help others.

In this series I’ve broken it down into three main aspects which you need to do when using Git and Codespaces.com.

1. Getting started; setting up your SSH Public Key
2. Pushing your code into the hosted repository
3. Pulling your code from the hosted repository

This series is not a how to for Git usage as there are many of those out there and I have found the following links below helpful.

http://www-cs-students.stanford.edu/~blynn/gitmagic/ch03.html

http://nathanj.github.com/gitguide/tour.html

Asp.net MVC 3 / Razor – Using the same view through regular action and Ajax loading

Ever had a view which you wanted to reuse and load through a regular action call or through using the action using a JavaScript call but then it loads in the associated layout multiple times? I had this exact issue recently.

And the solution; in the _ViewStart.cshtml file which specifies the default layout replace:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

with

@{
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}

Then in the controllers actions they still continue to return the same view but don’t have any layout associated to it. This could be used to add a specific “ajax” layout instead of none.

Sample project can be found on github.

Asp.net Mvc 3, Razor and RenderAction

When playing with the Razor syntax for view creation in Asp.net MVC you need to remember its not quite a direct translation between it and the web forms view engine and it is a different syntax. I was frustrated by it earlier in the week and without internet connection continued couldn’t resolve it instantly. It comes down to the syntactic sugar which Razor gives you.

When it comes to methods on the Html helper you can’t use the syntactic sugar by itself you do need to give Razor some parentheses.

Web forms view engine:

<% Html.RenderAction("About"); %>

Razor view engine:

@{ Html.RenderAction("About"); }

not @Html.RenderAction("About")

GotConnection v0.2

There are a few changes and tweaks from v0.1 in this release. It was after a mini code review by my mate Will who had some suggestions on the connectivity testing which I have incorporated. I’ve also updated the way the options can be passed in to closer match the original way I wanted it to work.

Update to connectivity testing

Instead of specifying if you are connected or not this release has been updated to try and connect automatically and if no connection is available then use the in development settings. When you go live this can be turned off so if there is an issue with Twitter in a production environment it will return an empty string. This will need to tested for in the consuming code but a small price to pay for testing connectivity. This is driven by a configuration switch:

<add key="GotConnection.Twitter.InDevelopment" value="true" />

While testing the code the request for data from Twitter is relatively speedy so putting this functionality into a try/catch didn’t feel like a bad thing.

Update usage

The original plan was to allow the options to be specified with an anonymous object in much the same way in which you can override defaults in jQuery functions by passing in a json object. This release has now been updated to allow for this for the same options as in v0.1. I will look to expand to the rest of the Twitter API Timeline options in later releases.

Using default options:

GotConnection.ITwitter twitter = GotConnection.ConnectTo.Twitter();
var result = twitter.TimeLine("WestDiscGolf");

Specify options:

GotConnection.ITwitter twitter = GotConnection.ConnectTo.Twitter();
var result = twitter.TimeLine("WestDiscGolf", new { count = 5 });

Valid options:

format = Defines the format in which you want the result to return. The limitation is still currently only json for offline development; default = json.

count = Defines the number of status records to return in the call; default = 5

include_rts = Specifies if native retweets should be returned in the number of status updates returned; default = true.

Released

The updated code can be found on github. As always any questions or suggestions then please let me know. Also if anyone does find this useful then please let me know if you’re using it and what for.

GotConnection v0.1

As crazy as it sounds with the amount of connectivity out in the wild these days there are still times when you need to do web based development when you’re not connected to the internet. This in itself isn’t usually an issue except for when you’re developing some web service integrations eg. a Twitter feed integration in a website and have no way of accessing the Twitter API. This has been the main inspiration behind this little project as I’m disconnected from the outside world for a couple of hours a day on my commute to and from work and sometimes I want to integrate with Twitter.

So I present GotConnection v0.1.

“How do I use it?”

The concept is pretty simple. You include the library into your asp.net web forms or asp.net MVC or any .net project and where you would write the code to create the web request to extract out the json from Twitter service server side you do this instead …

ITwitter twitter = GotConnection.ConnectTo.Twitter(new { option = “blah” });
var result = twitter.TimeLine(“WestDiscGolf”, 3);

The result returned is the json representation of the timeline data for WestDiscGolf and the last 3 tweets. Simples.

The interesting part comes when you are working offline and have no access to the internet. To continue to develop against the returned json data you don’t need to do any testing in code, or change any of your consuming code at all. All you need to do is update an application setting in the projects web.config file to say that the component isn’t online anymore. And that’s it.

Limitations

The only feature at the moment is the ability to get a users timeline in json format from the Twitter API. This is mainly because this is the only functionality that I require at the moment. The offline data understands the number of tweets to return, but in this version that’s it.

Future versions

I’d like to expand this project to allow for more options in the Twitter time line functionality, including support for the different formats it can return. I’d like to expand it out to other services which have read only data feeds such as blogger, facebook, generic rss/atom feeds etc. Future versions will use the Options class further. The idea behind the Options class is to allow for passing in options/defaults through as an anonymous object much like jquery defaults are set.

I’m not interested in making this a component which becomes a library to log in/out, post etc. to services such as Twitter as there are many out there already. This is purely there for developing against a read only service when you’re not online.

Where can I get it?

Well it is up on github. This is the first time I’ve uploaded any of my code to github so feel free to look around, fork the code and change it all, add in extras etc. If you do find this useful and add any extras in then please let me know and I’ll see about adding them into the main fork. Probably in the next version or 2 I’ll look at putting it on NuGet but will have to wait and see.

Any questions or issues or ideas or comments then please tweet me @WestDiscGolf

Enjoy!

Thoughts and Musings about Microsoft WebMatrix

Webmatrix has been out for a while now and my initial thoughts when it arrived was “why?” and “what does this give you that can’t be done in the free versions of Visual Studio?”. So the only way to answer these questions was to download it and give it a whirl. After confirmation from ScottGu that it can easily co-exist next to Visual Studio (can’t live without it) I took the step and clicked download.

I’m not going to cover the installation process etc. here as its been covered a number of places and well its an installation process how interested in it are you really? ;-)

Initial thoughts

On firing up the IDE I was pleasantly surprised by the clean UI. It’s gone down the ribbon route (wouldn’t expect anything less from MS) and fits in well with the new mspaint (in Win 7) and Windows Live Writer to list a couple of applications.

The first main point that I found was I like the option of testing the sites in a multitude of browsers you have installed on your development machine. From a simple click of the button it will fire up in the specified browser. After issues with Firefox 3 and offline mode when on the commute to work and not working I’ve just tried this in Firefox 4 after upgrading last night and this seems to have been resolved. However, it’d still be nice to be given the option of doing the development in a new instance of the browser so it doesn’t compromise your open tabs if anything went wrong as when you’re on the train to work you can’t get them back until you get to the office.

Downsides

Being a long time Visual Studio user you will notice a number of problems you will need to get use to quite quickly when using Webmatrix … the biggest issue I was frustrated with was the lack of tooling support for intellisense when writing code in Razor (and other code) files. You could argue that intellisense is a selling point for Visual Studio.

Ok, so I can live without intellisense, but other tooling which would have been nice would have been support for dragging javascript files from the file listing of the site onto the page and it automatically adds the correct script tag etc. with a path to the script. Is that too much to ask for? This with a combination of lack of intellisense makes it not straight forward to a novice user to add in references without having to go and search for an example on the interweb.

Another issue, from a Visual Studio user perspective, is that you can’t launch the current site in a browser by hitting f5.

Positives

Positively I like the support for multiple optional template sites, I like the options where you can download other templates and they’ll essentially just work “out of the box”. This is especially important for novices who don’t know (or care) about sorting out databases or project references etc. to make the thing work.

The other big thing I like is the integration with Visual Studio which can be done with a simple click of the button. This is a pretty nice way to get around the intellisense issue but also allow for other tooling support you only get from Visual Studio. This makes working on a site between the two IDEs work pretty well and something that the Expression studio people should look into to improve the UX/Dev integration (potentially?).

However, this nice feature leads me onto the final thoughts …

Why bother with Webmatrix?

As a professional software developer who spends ~90% of this time using Visual Studio and is use to the shortcuts and using such plugins as Resharper I can’t see me using Webmatrix in anger with anything really, unless for some crazy madness reason I need to do some php *shock* or I need to setup a cms quickly to then load it into Visual Studio to do some monkeying about with it. Just from a pure tooling perspective it wins hands down and its what I’m use to. It might be like using a sledge hammer to put up a picture frame, but if you’re adept at wielding a sledge hammer then it can be used for multiple purposes.

Let me know your thoughts in the comments below or you can tweet me on @WestDiscGolf.

Asp.net MVC2 + HTML5 data-* attributes

So you want to add some custom data to a html element to aid your JavaScript development and adding data values to custom attributes is a big no no so what do you do? This is where the new HTML5 data-* comes to your rescue.

The next issue is you can’t use the usual ActionLink method overloads on the html helper as you can’t pass in ‘-‘ into anonymous types because it is a c# reserved character for subtracting!

So on the train home this evening I came up with the following:

public static MvcHtmlString ActionLinkHtml5Data(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes, object htmlDataAttributes)
{
    if (string.IsNullOrEmpty(linkText))
    {
        throw new ArgumentException(string.Empty, "linkText");
    }

    var html = new RouteValueDictionary(htmlAttributes);
    var data = new RouteValueDictionary(htmlDataAttributes);

    foreach (var attributes in data)
    {
        html.Add(string.Format("data-{0}", attributes.Key), attributes.Value);
    }

    return MvcHtmlString.Create(HtmlHelper.GenerateLink(htmlHelper.ViewContext.RequestContext, htmlHelper.RouteCollection, linkText, null, actionName, controllerName, new RouteValueDictionary(routeValues), html));
}

And to use it, you already know how to as its the same way as all the other ActionLink overrides which are already available out of the box with an additional parameter which works the same as the htmlattributes parameter.

<%: Html.ActionLinkHtml5Data(“link display”, "Action", "Controller", new { id = Model.Id }, new { @class="link" }, new { extra = “some extra info” })  %>

It worked like a dream.

The issue with the “-“ being reserved has had a work around in MVC 3 by using “_” and then programmatically changing that to being “-“ in the output. I’ve not looked at the implementation but I can’t see how this is much different to what I’ve already achieved simply above.

Please let me know your thoughts.