This is one of those great examples of writing a blog post to yourself to remind you how to do something.

If your using Visual Studio 2012 then to add Git support you will need the Visual Studio Tools for Git plugin created by Microsoft's TFS Power Tools Team (http://visualstudiogallery.msdn.microsoft.com/abafc7d6-dcaa-40f4-8a5e-d6724bdb980c), if your using a later version of Visual Studio then it's already built in.

If you're thinking in of using Git Hub as your source control provider then the most basic thing you're going to need to know is how do you get the Git plugin to link up to GitHub. Here's a couple of different methods;

Creating a Project in Git Hub

Click New Repository. Enter a new, Select Public or Private and click Create new Repository.

A new repository will be created in Git Hub

Clone the Project in Visual Studio

Now the project has been created in Git Hub you will need to clone it to your machine so that you can start adding files and sync then back.

Open a new instance of Visual Studio and do the following:

1. Open the Team Explorer window
2. Click the connect button
3. In the list of Local Git Repositories click clone
4. In the URL box enter the HTTP URL from Git Hub
5. The second box should auto populate with a location on your hard disk
6. Click Clone

Creating a Repository on Git Hub using the Git Hub app

Rather than creating the Git Hub repo through the GitHub website you can use their app. Once you've got the app installed and logged in do the following:

1. Select the GitHub account you want to add the repo to on the left
2. Click Create button at the top
3. Enter a name and click create
4. The repository will be created in GitHub and automatically sync with the folder on your machine

Adding an existing Repository to Visual Studio

If you already have a repository cloned on your machine but it's not showing in Team Explorer you can add it by clicking on Add

1. Click the Connect button to view the list of local repositories
2. Click add an enter the path to the repository on your hard drive
3. Click Add

Talk on climate change is something that you cant have missed. This years winter is further evidence that irrespective on debate about the cause something is happening. Many of us now use energy saving bulbs, by appliances with high energy ratings and ensure our homes are sufficiently insulated all to cut down on our energy consumption and the effect it has on the world.

But as developers what about the code that we produce? Do you ever consider how much pollution is caused by the energy required to deliver web pages to users or for an app to function, and what could be done to minimise that pollution.

Ironically many of the things that we can do will ultimately also make an improvement to our users (obviously throwing more servers at a performance issue isn't going to reduce power consumption so their are exceptions).

Here are some examples:

Reducing the number of web requests

Quite simply the less requests a browser needs to make for files the less power it uses to do so. The benefit fir the user is that a browser will generally only make 7 simultaneous requests, so its also faster. We can easily do this by:

• Bundling CSS and JavaScript files
• Using image sprites rather than multiple images
• Ensuring caching is set properly so that files aren't repeatedly being requested when the browser already has a local version

Reducing the amount of data that we send

If we don't send as many bytes then its going to require less packets to send it, which will ultimately require less power to send them. It will also take the user less time to receive them.

• Optimise images to a sensible size. There's no point sending an image 10 times the resolution that's going to be viewed. There's also no point in using images in a format with a larger file size when it looks the same
• Minify CSS and JavaScript files to make them as small as possible
• Don't include CSS and JavaScript that isn't being used. How much of that jQuery UI framework are you actually using. Use the tools around to only include the bits you need
• Write APIs that only include the data that is needed, or give the consumer parameters to choose what fields they have. If your calling an API only get the data you need
• Use JSON services over XML, they have less mark-up

Think about what your code is doing

Lastly just think about what your code is doing:

• Are you making multiple calls to a database for the same data
• Are you posting a list to a server to sort it when the client could instead
• Are you re-loading an entire page just to sort a list
• How many objects are you needlessly creating on the server
• Are you appending string objects when you should be using a Stringbuilder

All these things will ultimately improve the performance of your code as well as reducing power consumption. You may be in a position when you haven't done any of this because performance isn't an issue, but power consumption is. The savings you make may be tiny, but tiny changes made by thousands of people leading to the power used by millions of people can have a profound effect.

Also turn your computer and monitor off when you go home!

Having a good UI is possibly one of the most important aspects of any development. It doesn't matter how perfectly the code executes, if the thing looks awful people won't use it. But it is an area that a lot of developers struggle with.

There have always been things like website skins that you can buy, but I've never been a huge fan of these. It's always seemed odd that you can use an open source CMS for free that has had hundreds of man hours put into it, but a decent skin would cost you £100, and even then would still need a lot of work doing on it.

Thankfully there are some free resources that not only help with the css and making a site responsive, but they also include some fairly decent fonts and layouts.

Bootstrap

Bootstrap is possibly the most popular css framework for building sites with right now. Even Microsoft have adopted it into all the templates that ship with Visual Studio 2013.

One of the main things Bootstrap gives you is a standard set of css classes for doing things like grids and responsive layouts. When people start using a common set of classes to achieve the same thing, things get a lot more compatible and you can already see that starting to happen with Bootstrap.

Bootstraps grid system works on having the illusion that your page is divided up into 12 columns. You then have a set of classes to assign to a div that contain a number, that number is how many columns the div should span over. A bit like a colspan on a table.

These grids are responsive though so as your page shrinks down to a tablet and mobile size it will automatically recognise that the columns won't fit horizontally and start rearranging them underneath each other.

As a starting point Bootstrap also has some templates of common layouts to get you started.

Bootstrap also has default classes for forms, form fields, headings and lists that will give your site an initial face lift.

Foundation

Foundation in many ways is very similar to Bootstrap. It also has a grid system for layouts and also helps with making a site responsive. There are also default styles for headings, lists and forms but they have also taken things a step further and started to encroach on jQuery UI's territory with things like tabs and dialog windows.

I haven't heard of as much industry support but there site is full of documentation and videos on how to use the framework.

Pure

Another CSS framework with yet another grid system. Pure appears to be much simpler than the first two and offers many of the same features. Their site has some good templates that in some ways cover more scenarios that Bootstraps. Personally out of the three I would go with Bootstrap as it appears to have a much higher adoption.

Normalize

If the CSS frameworks seem a little overkill for what you're after have a look at Normalize. The concept is simple, by including this CSS file in your site as the first CSS file it will overwrite all the default browser styles to create consistency and something that looks a little nicer.

There's been many incidents where I've seen CSS produced that includes a style for every single html element try overcome the differences on browsers, which is a good idea (this is basically what normalize does except someone's written it for you), but the styles have all been set to the same thing which is generally margin:0, padding:0. On some elements this is fine, on lists though, not so much.

Another option I've seen is to define a style on *.* which is equally as bad.

Fit Text

Like it or not people are accessing sites from all kinds of devices these days with all kinds of screen sizes. If your site doesn't scale then you're going to lose visitors. One issue you will ultimately face at some point is font sizes. These can easily be changed using media queries but another option is to use FitText.

FitText is a really simple bit of JavaScript that will scale your text to fit its containing element. You do have to call a function for each element you want to scale, and it does only work on the width rather than taking the height into account. But it is very cool. Just make sure you have a look at the code because it's so small this isn't something you will want in a separate JS file.