It comes as no surprise that I have no ‘ɐ’ or ‘p’ key on my keyboard and I needed a better solution than having to construct it on my clipboard using the upside-down generator .

Enter Lessn.

Lessn

To cut a long story short, I downloaded and installed Lessn and made a little change that constructed the international domain for me. Whilst I am aware all this is doing is outputting the new domain, it adds it into my blogging ‘workflow’ . Not to mention the benefits of Tweeties custom shorteners [though I am yet to play with this]

The changes are simple, change line 7 & 8 of /-/index.php to:

define('CUSTOM_DOMAIN', 'www.uıɐɯopɹnoʎ.com');
define('LESSN_DOMAIN', 	preg_replace('#^www\.#', '', CUSTOM_DOMAIN));

A beautiful little book Zoë’s Nanna gave us

This hack was born out of necessity as I found that the admin UI on large Perch sites looked daunting to new editors. Though the UI is beautiful and clean I was finding the lists would be endless and the editor could not find the page, let alone the region. This is something that Perch are looking at but I wanted a solution for the meantime. Unfortunately the solution is horribly hacky, involving altering the perch.js file.

How to

Add the following to the bottom of the perch.js file (found in the your-perch-folder/assets/js/perch.js)

function pageTidy () {
	if($('td.page').length > 1) {
		resetToTidy();
		$('.page span').css({ cursor: 'pointer' });
		$('.page span').click(function() {
			resetToTidy();
			$(this).parent('td').parent('tr').addClass('currentPage');
			$('.currentPage').children('td').show();
			$('.currentPage').nextAll().each(function(index) {
				if($(this).css('display') == 'table-row'){
					return false;
				}
				$(this).show();
			});
		});
	}

}
function resetToTidy() {
	$('.d  tbody tr').hide();
	$('.shared').parent('tr').show();
	$('.shared').parent('tr').nextAll().each(function(index) {
		if($(this).children('td').hasClass('page')) {
			return false;
		}
		$(this).show();
	});
	$('.d tr').removeClass('currentPage');
	$('.page').parent('tr').show();
	$('.page').siblings('td').hide();
}

Then add pageTidy(); to the init function. So it would now look like:

var init	= function() {
		$('body').addClass('js');
		enhanceCSS();
		initPopups();
		hideMessages();
		pageTidy();
	};

Warning

Use at your own risk! I have found it seems to work happily on my project but I can’t imagine that it’s a good idea to be hacking away at core files.

I decided to use it on my CV, but whilst designing I noticed it wasn’t working in Firefox older than 3.5. This sucked. So I set about BROWSER SNIFFING. I didn’t take this decision lightly but I figured it is no different to [if IE] and the only difference to the code would be removing a class.

jQuery to the rescue

To make long story short, I used the version function in jquery. Comments are in the code:

if($.browser.firefox || $.browser.mozilla) {

 var ver = $.browser.version;

 // Take out al the full stops so we can use it
 // as an integer
 ver = ver.replace(/\./g,"");

 // As the version numbers differ in length
 // we force all numbers to be the same length.
 // This is ok as we are only interested in the
 // first couple of digits
 var verl = ver.length;
 while (verl < 7) {ver = ver + '0'; verl = ver.length;}
 ver = parseInt(ver);

 // Check to see if the browser is older that 3.5
 if(ver <= "1910000") {$("h3").removeClass('rotate');}

}

SO

I decided I would make a single page site with all content separated down the page but joined together with some pretty graphics and smooth JavaScript. I hit a problem.

I wanted the navigation to be fixed and on a 960px centred grid, with the navigation sat on the side on the content. I have to admit this got me stumped for a bit, but I figured out this way.

WARNING: This could be a crappy method.

Assuming we have 3 DIVs – #wrap,#content and #sidebar the css would be as follows.

#wrap {
	position: relative;
	width: 960px;
	margin : 0px auto;
}
#sidebar {
	position : fixed;
	top : 0px;
	left : 50%;
	width : 960px;
	padding-left : 235px;
}
#content {
	width : 700px;
}

A brief explaination.

The example all works off the assumption that the #content width is 700px and that we would want a 15px gutter between the elements. So as we are using a percentage to centre the DIV we know where the DIV will be — bang in the middle — and we need to work out how far to push it out. This is done by the simple calculation:

(700-(960/2))+15 = 235px

Yeah, I know, stupidly obviously simple. Just it had me hanging around for ages trying to solve. Just thought it could help someone else.