The benefit of using GIT in the way below is that it maintains version history AS WELL as offering a managed host, i.e. it deals with uploading as well as versioning (in 1 git bash push.)

So here’s the scenario – there’s one of you, or maybe a few core founders/dev’s and you want to use GIT to version control your developments of a new web app or site. You already have a shared hosting account with 1and1 which works fine up to 20k hits a day or so, is there really need to have the thing scalable on demand from day one? No? Great, read on. If you REQUIRE scalability off the bat (I bet you don’t, really) then go find a PaaS/jump on AWS, for now here’s how to get GIT versioning (with automatic publication) working on your 1and1 shared hosting.

Firstly go read this, its a great guide that pretty much* got me there (95% of the credit to Abhijit), there’s just a few changes to get it to work on 1and1.

How I did it: GIT on 1and1

Load up your FTP, get to the root of your hosting and make your main site dir, in this case we will call it AppDev1:
/AppDev1
Next make two directories underneath it: “repo” and “live”, I shall explain these after you have made them:
/AppDev1/live
/AppDev1/repo
What these two are going to do is give you a live “root” for your web app/site as well as a GIT repository (which stores all the changes.) By separating them you keep everything simple. [live = web root folder, repo (or whatever you call it) = git bare repository.]

Next locally (on your machine) create a folder which you want to develop in:
C:/EpicNewApp

…And load up GIT BASH (assume you have) and enter the following:
cd "C:/EpicNewApp";
git init;

Next go ahead and load your SSH client (putty) and log into your 1and1 Account (there is guidance on 1and1 under SSH accounts, if you need it.) Once logged in enter the following:

cd "/AppDev1/repo"
git init --bare
cat > hooks/post-receive
#!/bin/sh
GIT_WORK_TREE="../live" git checkout -f
chmod +x hooks/post-receive

*note: This differs from the aforementioned guide in the address entered under GIT_WORK_TREE, this is the only way I could get this setup to work on 1and1.

You can also simply stick these lines into a file called post-receive and upload the file to the “hooks” folder of your new bare repository (repo), if you are so inclined.

That’s it, your done with the SSH, now you can bind a remote location in GIT BASH (replace the obvious:)
$ git remote add web "ssh://u99999999@yourMain1and1Domain.com/~/AppDev1/repo/"
…And go ahead and push to 1and1 (you will need your SSH password to do so.)
$ git push web +master:refs/heads/master
All being well this should have pushed a version to your /AppDev1/repo folder and also updated the live files as per your changes!

Happy Ghetto Versioning!

Note: As per comments, removed .git reference from link, thanks Ano.

It was a busy November, but it paid off – completed a good few projects for some great clients, and whats more I won no# 1 Top Freelancer @ people per hour!

You can read more about some of my recent projects here, although there’s only a few case studies up, the most public of the projects was a great life planning app that I built to first iteration, you can check it out (DO IT NOW!) @ 5years.me – built in the cloud on PaaS, behind the scenes I have also helped develop a social media analytics platform that is a marketeers wet dream, maybe as it gets properly released I will divulge more on that. Needless to say November was a great month of good work for great clients – off the radar now until my big project in early 2012

Javascript – Using JS to find Browser Country / Location not from IP Photo by ToastyKen

Common solutions to identifying a users locale/localizing/localising a web client:

Using PHP / ASP.NET take the users IP and feed into an ip to location service (geo ip) to find a country from ip.
Pro’s: Server-side off the bat, can cache a database of IP’s (although would you?)
Con’s: Adds another 2 hops to at least initial page load, IP location service’s can cost or be faulty

Using the request headers (again server-side) to identify an “accepted language” and then guestimating their location (taking en-US…for example.)
Pro’s: Server-side to start with, no extra hops/calls required, this data is already available whether you use it or not, more useful for language (although limited)
Con’s: Unreliable – mostly because of a few of the BIG browsers default to en-US for all english users, often international users might learn to use a browser in English anyway – defeating the point

Another solution (work in progress:)

A step towards a proper solution, and in my case a solution for MY original problem, is to at least work out their TIMEZONE. What? I hear you say, why the timezone? Well if you know, for example using analytics data, that your user base is 40% US, 50% UK and 10% rest of the world you can at least make a START by dealing with the two major constituents of your audience. I can envisage A more complete solution though, by combining the use of request headers accepted language AND the following Javascript timezone detection:

Searching around a bit I found this which showed a lot of promise. This javascript works out the users Operating System time offset, and from that you can define which timezone they are in. Useful, if like me you know your users in a specific timezone are likely to be in one country, not particularly if they are possibly in multiple countries within a timezone.

A solution / exploration – location detection in javascript

The following Javascript gives you both indicators, using navigator.language/systemlanguage it detects the browser’s language, and then using an expanded upon version of the above script it will provide you with the possible countries from the users OS timezone offset. How useful this is to you is depending on the application, but check it out – build some fantastic solution off of it, then show me, because I probably won’t get round to it!

var langCode = navigator.language || navigator.systemLanguage;
var lang = langCode.toLowerCase(); lang = lang.substr(0,2);

var dateObject = new Date(); //this timezone offset calc taken from http://unmissabletokyo.com/country-detector.html
var timeOffset = - dateObject.getTimezoneOffset() / 60;
var c = ""; //this will ultimately end up as a country/csv of possible countries
switch (timeOffset) { //I expanded upon this switch, adding all the possible countries
	case 0:
	 c = 'Algeria, Ascension Island, Burkina Faso, Faeroe Islands, Ghana, Guinea Republic, Iceland, Ireland, Ivory Coast, Liberia, Mali, Morocco, Sao Tome & Principe, Senegal, Sierra Leone, St Helena, The Gambia, Togo, United Kingdom'; break;

	case 1:
	 c = 'Albania, Andorra, Angola, Australia, Austria, Belgium, Benin, Bosnia, Cameroon, Central Africa Republic, Chad, Congo, Croatia, Czech Republic, Democratic Republic of Congo (Zaire), Denmark, Equatorial Guinea, France, Gabon, Germany, Gibraltar, Guam, Hungary, Italy, Liechtenstein, Luxembourg, Macedonia (Fyrom), Malta, Mariana Islands, Marshall Islands, Micronesia, Monaco, Netherlands, Niger, Nigeria, Norway, Papua New Guinea, Poland, Portugal, San Marino, Serbia, Slovak Republic, Slovenia, Spain, Sweden, Switzerland, Tunisia'; break;

	case -1:
	 c = 'Cape Verde Islands, Cook Islands, French Polynesia, Guinea Bissau, USA'; break;

	case 11:
	 c = 'New Caledonia, Solomon Islands, Vanuatu'; break;

	case -11:
	 c = 'Niue Island, Samoa (American), Samoa (Western), USA'; break;

	case 11.5:
	 c = 'Norfolk Island'; break;

	case 12:
	 c = 'Fiji Islands, Kiribati, Nauru, New Zealand, Tuvalu, Wallis & Futuna Islands'; break;

	case 13:
	 c = 'Tonga'; break;

	case 2:
	 c = 'Botswana, Bulgaria, Burundi, Cyprus, Democratic Republic of Congo (Zaire), Egypt, Finland, Greece, Israel, Jordan, Lebanon, Lesotho, Libya, Lithuania, Malawi, Mozambique, Namibia, Palestine, Romania, Rwanda, South Africa, Sudan, Swaziland, Syria, Turkey, Zambia, Zimbabwe'; break;

	case 3:
	 c = 'Bahrain, Belarus, Comoros Island, Djibouti, Eritrea, Estonia, Ethiopia, Iraq, Kenya, Kuwait, latvia, Madagascar, Mayotte Islands, Moldova, Qatar, Russia, Saudi Arabia, Somalia, Tanzania, Uganda, Ukraine, Yemen Arab Republic'; break;

	case -3:
	 c = 'Argentina, Brazil, Cuba, Greenland, Guyana, Uruguay'; break;

	case 3.5:
	 c = 'Iran'; break;

	case -3.5:
	 c = 'Surinam'; break;

	case 4:
	 c = 'Armenia, Azerbaijan, Georgia, Mauritius, Oman, Reunion Island, Seychelles, United Arab Emirates'; break;

	case -4:
	 c = 'Anguilla, Antigua and Barbuda, Aruba, Barbados, Bermuda, Bolivia, Brazil, Canada, Chile, Dominica Islands, Dominican Republic, Falkland Islands, French Guiana , Grenada, Guadeloupe, Martinique, Montserrat, Netherlands Antilles, Paraguay, Puerto Rico, St Kitts & Nevia, St Lucia, Trinidad & Tobago, Venezuela'; break;

	case 5:
	 c = 'Diego Garcia, Maldives Republic, Pakistan, Turkmenistan'; break;

	case -5:
	 c = 'Bahamas, Brazil, Canada, Cayman Islands, Columbia, Ecuador, Haiti, Jamaica, Panama, Peru, Turks & Caicos Islands, USA'; break;

	case 5.5:
	 c = 'Bhutan,India,Nepal,Sri Lanka'; break;

	case 6:
	 c = 'Bangladesh, Kazakhstan, Kyrgyzstan, Tajikistan, Uzbekistan'; break;

	case -6:
	 c = 'Belize, Canada, Costa Rica, El Salvador, Guatemala, Honduras, Mexico, Nicaragua, USA'; break;

	case 6.5:
	 c = 'Myanmar (Burma)'; break;

	case 7:
	 c = 'Australia, Cambodia, Indonesia, Laos, Thailand, Vietnam'; break;

	case -7:
	 c = 'Canada, Mexico, USA'; break;

	case 8:
	 c = 'Australia, Brunei, China, Hong Kong, Indonesia, Macau, Malaysia, Mongolia, Philippines, Singapore, Taiwan'; break;

	case -8:
	 c = 'Canada, Mexico, USA'; break;

	case 9:
	 c = 'Australia, Indonesia, Japan, Korea, North, Korea, South, Palau'; break;

	case -9:
	 c = 'USA'; break;
}

//at this point Lang should be a 2 letter language code (e.g. en), timeOffset will be the users hour offset from GMT and c will be the csv of possible countries!
alert('Lang: ' + lang + "\r\n" + 'timeOffset: ' + timeOffset + "\r\n" + 'Possible Countries: ' + "\r\n" + c);

You can get the full source for this zipped here, included is a minified version wrapped in a function, isn’t that nice of me? Use it as you will, and if you create something epic, show me!

Countries/timezones: I built the timezone offset switch based on the wikipedia list of countries and their timezones, so its comprehensive.

Was saving down facebook data into a database from the graph api, wanted to save the urls in a mixed url table but didn’t want to bother saving the whole http://www.facebook.com every time, what a waste of data. Initially I lazily abbreviated this too: fb.com/whateverthepagewas, left the acquisition stuff to its job and then went off to do something else. Coming back to the management system I accidentally clicked one of these fb.com/ links, and it worked! Facebook have set it up as a redirect. Maybe this was common knowledge but I hadn’t heard of it before…Anyhow a useful biproduct of dataspace savings!

So check it out: fb.com/hayday

That will redirect you too http://www.facebook.com/hayday (my page.) – just like fb.me, but traditional-like, lol. Neat eh? Anyone else know any facebook quick wins?

Get last day of last year – obvious, but still (+1 this for first day):

SELECT DATE(CURDATE()- INTERVAL DAYOFYEAR(CURDATE()) DAY);

And how useful… FROM_UNIXTIME takes a unix timestamp and makes it a friendly datetime, its like they KNOW I am coding for facebook data acquisition…Anyhow…

To make a GMT UNIX time-stamp for the first day of this month:

SELECT UNIX_TIMESTAMP(CONVERT_TZ(DATE(CURDATE()- INTERVAL DAYOFMONTH(CURDATE()) DAY), '+0:00', 'SYSTEM'));

You can switch out the dates obviously, and there are probably other ways, still, mostly pain free.

Using the below you can add/remove items to an input which acts as a csv holder, should be self explanatory, get and set are just shorteners.

function get(a){ //small get
	if (typeof a != "undefined") {
		return document.getElementById(a).value;
	} else {
		return '';
	}
}

function set(i,v){ //small set
	document.getElementById(i).value = v;
}

function append(i,v){ //small append
	set(i,get(i) + v);
}

function appendTocsv(i,v){ //small append csv
	if (get(i).length == 0){
		set(i,v);
	} else {
		append(i,', ' + v);
	}
}

function incsv(id,v){ //check a csv (in element with id) for a value (v)

	var csv = get(id);
	var csvArray = csv.split(', ');
	var found = false;

	if (csvArray.length > 0){

		for (i = 0; i <= csvArray.length; i++){

			if (csvArray[i] == v){ found = true;  }

		}

	}

	return found;

}

function removeFromcsv(id,v){ //removes a val from csv

	var csv = get(id);
	var csvArray = csv.split(', ');
	var removed = false;
	var endString = "";

	if (csvArray.length > 0){

		for (i = 0; i <= csvArray.length-1; i++){

			if (csvArray[i] == v){ removed = true;  } else { 

				if (endString.length > 0){ endString += ', '; }
				endString += csvArray[i]; 

			}

		}

	}

	set(id,endString);

	return removed;

}

Clock Face by tibchris
Facebook Time in PHP, who the what where?

If you haven’t tried pulling anything time-sensitive out of the graph API yet, don’t, that’s my advice. There is not a single bit of coherent explanation as to how the API hand’s out times, when I first researched it I had written on my pad “Pacific time”…great, did my past (possibly beer holding) self not remember that Pacific time is one thing half the year and another the other half? PDT/PST? Obviously not. What’s more, now when I check (post something on a page, grab it with graph API) – its giving me GMT+00 times, WHEN I’M IN GMT+01.

All I can work out is facebook have either been pleasant enough to convert the time to the users original registration locale (likely, and pleasant) and not noted it down ANYWHERE publicly, or they have chosen to use GMT. Probably the former, either way – facebook developers – we need a better solution for working with facebook times.

The JQuery documentation for this doesn’t account for the reality of the above, its all very well if you want the empty column/div to SHOW all the time as empty, that is remain as some sort of visible placeholder, but if the empty list should show as empty, until an object is ready to be dropped on it then JQuery sortable’s don’t work. It all comes down to dimensions, if an empty list exists without a height value, you can’t drop onto it.

More specifically, if an empty jquery-sortable list exists without a specific height set at the point of [.sortable start] (that is BEFORE the event is fired) then you just cannot drop the sortable.

Image by Dmitry Baranovskiy

I played with fixing this by adjusting each empty list (in the example belows case #col1,#col2,#col3) to have a defined height (and background, which looks nice) within the sortable “start” option, but this just creates boxes (or landing pads/zones) you can see, but not drop on.

Long and short of it – the solution to being able to drop jquery sortable’s onto invisible empty lists is to bind a function which adds a css class (or sets the height specifically) to the empty (invisible) sortable list when a user clicks one of the goal objects. This is then fired BEFORE the sortable takes hold and so creates drag-droppable landing zones for the users held sortable. It then uses the sortables “stop” property to remove the class it has added to any columns which have it.

function sortAndDrag() {

	//show BEFORE sortable starts
     $("#col1, #col2, #col3").bind('click mousedown', function(){
          $(".col").each(function (c) {
                if ($("div", this).size() == 0) {
                    $(this).addClass("colZoneEmpty")
                }
            })
     });

	//enable sortable
    $("#col1, #col2, #col3").sortable({
        revert: true,
        connectWith: ".col",
        stop: function (a, d) {
            $(".col").removeClass("colZoneEmpty");
	    //any ajax processing
        }
    });

}
//in this example 3 column div's exist with the id's 'col1','col2','col3', all of which have the class 'col'
//colZoneEmpty is a css class which makes the empty list visible

There are of course improvements you could make here, like checking the users dragging before setting any styling, but this quick hackaround works where it shouldn’t.

You can host facebook apps on any host, but hosting somewhere unsecure (not accessible via https) will flag up the following prompt for anyone browsing to the page with secure browsing turned on (high proportion of fb users.) You CAN also use amazon cloud storage (S3) for free https file storage, up to a level, however you cannot run server side code (php/ASP.NET) without setting up a server with their EC service.

Not pretty eh? What will that do to your conversion rates? Yep nothing good.

Its not just the mavericks either, for example brands like banana republic are still running http stuff, prompting the user with this message on loading their like-capture pages.

Set up 1and1 shared hosting to host Secure SSL facebook apps/applications/tab pages

So anyway here’s the cheap, quick way to hosting your facebook apps SECURELY using 1and1 shared hosting.

1. Log onto admin.1and1.co.uk (or .com)
2. (Optional) Register a domain name which you don’t mind generically hosting your fb content. For me this is www.whfb.co.uk – this will only show up if users looked at the information for the frame, probably wont ever matter, but if you are running a whole host of different niche pages it might be worth it for simplicity/segmentation.
3. Go to domain management section and click “Shared SSL Encryption” under SSL option
   
4. Assign the Shared SSL Encryption to your generic domain/main domain you want to use
   
5. Setup a folder under your domain like you would with any facebook page, use the facebook php api to fangate or just put some html up there, bare in mind all objects referenced in what you put up should direct resources to “https” not http. That is if you reference “http://www.example.com/someimage.png”, switch the http for https (save your own copy of the file if you need to. Referencing images locally in the folder should work fine for http/https if you use the same domain.
6. Setup your facebook app (theres thousands of guides on this…) and set the following (under “Select how your app integrates with Facebook -> Page Tab”)
   
7. Add the app to your facebook fan page and visit it, (setting it as default landing page perhaps ) – you should not get any security messages, if you have you need to go back and check your html is pointing to any external elements via https.

Chances are if you are running 1and1 shared hosting (or any other major) then you will have SSLRelays free of charge with your package, what’s more this takes about 1 minute to setup, so test with this before you stick stuff in the cloud!

As I have been dabbling with facebook fan pages I thought I would share a few of the take-away’s, in this case purely to do with the branding of your facebook page, increasingly an important outward factor in all web developments – facebook fan pages are perhaps the building blocks of a good social sprawl. I will post later about the technicalities of using fan-gated iframe apps (hosting them on 1and1/Amazon S3 for no extra cost) and similar but for now lets focus on the looks.

Take a look at these few examples:

You have probably noticed straight away what I am getting at. Coherence. Branding coherence is an eternal battle for marketing departments, making your brand appear coherent to the corporate strategies laid down to be long term principles. In the realm of smaller web projects though its not such a huge deal. The first thing I do when setting up a new facebook page is get the overall branding planned and implemented. In short I make/contract 6 Images. These 6 images will either work well together, leaving a mark in the mind of an already bombarded potential fan or they’ll excite no one and be forgotten along with the other mediocre half-attempts. Get these 6 images right.

So here’s how it is. You are allowed a facebook profile pic for your page, this image can be just a logo (check out HP) or it can be utilised as any ad space might be, stick up an exclusives offer deal, some shocking message etc. This image can be up to 200 px x 600 px and you can upload a higher resolution, baring in mind the width will always be proportionate.

Your other 5 images come in the form of Tagged/Wall posted/Album images. These are shown across the top of your wall (where ultimately you wan’t your fans to be hanging out) and are sorted in a RANDOM order by facebook. That’s right, however you upload them they will occasionally appear in a completely different order unlike the ones on your personal profile page. These stick to normal photo proportion ratio’s and can be uploaded via the “upload photos” option on the pages’ wall. Remember they don’t have to be photo’s, use these 5 images to extend (coherently) the brand of the page you are trying to promote.

Take a look around, check out some pages of your favourite brands, I have no doubt they will be using the images in clever ways, ways that can improve like rates, conversation and overall brand image.

Facebook Fan Page Branding Template



(Adobe Illustrator CS4, 600kb Rar’d)

Its an Adobe Illustrator file with a dummy facebook page laid out with artboards setup for each of the 6 images I talk about above, it should let you create all your images in a single space so you can really get a feel as to how well they gel together. Once you have constructed your images, switch to artboard view and click each image in turn, remember when exporting the main profile pic image that it needs to be 200 pixels wide, this way you won’t suffer any of facebooks image downscaling nasties.