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?

See the rest of Abstract Autumn, Addictive @
my photostream

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.

Irritating when the thing looks so pretty out of the box. So rather than opt for one of the non-pretty options I just hacked it. Brutally I just added code to maintain an input as a csv, it needs fixing really but this does work, for now.

Click here to download my hack/fixed version which maintains a separate csv (in a designated ID – search replace “csvHolder” if you want to change its ID.)

Hopefully Drew can update his plugin so it works out of the box, its a really useful plugin.

Note: This rar includes my csv quick maintaining functions which are required.

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.