I am Ad Taylor

2009

• text-longe

  Links

  • http://www.grabaperch.com

  Perch Admin collapsable menu

  Posted on : Tuesday, 8 September, 2009

  I promise that this will be my last post about Perch, I am starting to look somewhat obsessed.

  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.
• Helvetical

  Posted on : Tuesday, 1 September, 2009

  SMALL Helvetical update.

  Hi all. The new UI refresh of Google Cal is great, they have really done a brilliant job. Yet it hasn’t been too kind on Helvetical, making it unbearable to use. I set about trying to patch up the holes but the nature of a userstyle has made this an ugly and unproductive task. So I feel it is best to start from scratch again and build in some of the feature requests.

  In the mean time, I have created a patched up version that makes the userstyle usable yet far from pretty. Download from http://userstyles.org/styles/20669. Obviously the alternative is to disable it for a while.

  It would be great if we could use this time to build up a feature list for Helvetical 2. So leave a comment or mail me. BTW, this isn’t some excuse to put the project on the back-burner — I have penciled in the end of the month to complete.

  Cheers, Ad

  

  Helvetical pimping up Google Calendar.

  I know I am not alone in my love/hate relationship for Google’s apps, the functionality is brilliant but the UI is ugly. Google Calendar is most definitely not the exception to the rule, it hurts my eyes.

  Helvetical extends the work done by Jon Hicks on Helvetireader, turning the mayhem of the Google interface into something that doesn’t offend. It was created for use with Fluid.app but I’m sure you can hack the CSS to work for your needs.

  Please note that this is an on-going project so things are a bit rough around the edges. I hope to update soon.

  Usage

  Thanks to the help of David DeSandro, Helvetical now works in Greasemonkey, Stylish, Fluid and others.

  First of all you either need to have Greasemonkey, Stand, Fluid or Stylish installed. Relevant instructions can be found if you follow the links, the easiest option seems to be Greasemonkey for either Safari 4 or Firefox.

  • Install the user script here.
  • Install the user style from userstyles.org.

  New icon

  I love using the icon that Joshua Brewermade for Helvetireader, it’s clean, Swiss and still sits nicely in the, oh so glossy, dock. I knocked up a quick version for you Fluid.app and Prism users out there so that HelvetiCal and Helvetireader can sit better on your dock. Find it here.

  

  Updates

  I shall post all updates here but if you want to know about them as they happen follow @HelveticalNews

  • Version 1.1 – Now with coloured ‘Other Calendars’ and support for https:// hosted calendars.
  • Version 1.2 – Cleaned up for use with Google Gears [Help from Martijn van der Ven].
  • Version 1.3 – Fixed Firefox specific bugs (tasks, labs items,hover states etc)
  • Version 1.4 — Events are now colour coded in the ‘Months’ section.
  • Version 1.5 — Maintenance. Moving elements back to their original position and filling in the new found blanks. Recommended.
  • Version 1.6 — Added RSVP colouring and line-throughs. Thanks to Chris Barth for his help.

  Useful links

  • Fluid
  • Offline Gmail, Google Docs, Helvetireader, etc. using Fluid by Josef Richter
  • Fluid Icons – Though I do plan to have one for Helvetical soon.
  • Helvetireader
• Archive Extractor – A Perch Hack / Plugin

  Posted on : Tuesday, 4 August, 2009

  Archive Extractor – A Perch Hack / Plugin

  Edit : Changes made as per Drew’s advice. Now deals with ’shared’ content and custom table prefix.

  For sometime now I have been meaning to post this little hack I came up with — however I completely forgot. This is a hack for the brilliant ‘little’ CMS , Perch .
  It was made through necessity as I wanted to use Perch but I needed to be able to have news items from other pages on the front page. To my surprise it was nice and easy, and although I’m sure it will be inefficient, it seems pretty fast.

  It is an incredibly simple plugin that pulls the JSON out of the Perch database and returns it. It doesn’t try to do anything else — no formatting, no nothing — just the way I like it.

  Standard disclaimer : I am not a server-side kinda guy, I can not take responsibility for anything this plugin does to your installation of Perch, server security or general happiness. That said, I can’t see how these lazy few lines of code could screw up much.

  Installation

  Download the file and put it in your Perch “plugins” folder. This isn’t mandatory for it to work but just seems like a logical place to put it. Watch out when you next need to update Perch — Back up!!

  Usage

  You must include the file at the top of the page you wish to use Archive Extractor. If your Perch directory is called “perch” then the include could be something like this:

  	 include('perch/plugins/archiveExtractor/archiveExtractor.php');
  

  To use just call the function with the 2 variables, the Perch Content name (e.g “News Item”) and the path to the page it is on (e.g “/news/index.php”). With the data returned you can iterate through the items and pull from it the data you want.
  Maybe best seen as an example:

  	// Call function with variables.
  	$newsArchive = archiveExtractor('News Item','/news/index.php');
  	// Check to see if there are any results
  	if($newsArchive) {
  		$limit = count($newsArchive);
  		// Loop through all results
  		for ($i=0; $i < $limit; $i++) {
  			// In the example the word 'title' refers to the id of a content type 
  			// from the 'News Item' content template
  			echo '
  '.$newsArchive[$i]->title.' Trip
   on '.$newsArchive[$i]->information.'.
  ';
  		}
  	}
  
  

  If you want to extract data from shared regions, simply leave out the content path. It took me a while to understand the point of this (as this was recommended by Drew) but obviously it would be handy if you only wanted to extract part of the data (i.e. title and date).

  $newsArchive = archiveExtractor('News Item');
  

  Download Click to view code

  /*
  	Archive Extractor - A Perch Hack
  	By Ad Taylor - http://www.iamadtaylor.com
  	For usage see :
  	Creative Commons Attribution-Share Alike 2.0 UK: England & Wales Licence
  */
  
  function archiveExtractor($contentKey,$contentPage = '*')
  {	
  	$query = queryDB($contentKey,$contentPage,$limit);
  	if ($query) {
  		foreach ($query as $key => $value) {
  			$json = $value;
  		}
  
  		return PerchUtil::json_safe_decode($json);
  	} else {
  		return NULL;
  	}
  
  }
  
  
  function queryDB($contentKey,$contentPage) {
  	
  	require_once $_SERVER['DOCUMENT_ROOT'].'/edit/config/config.php';
  	
  	$link = @mysql_connect(PERCH_DB_SERVER, PERCH_DB_USERNAME, PERCH_DB_PASSWORD);
  	
  	if (!$link) {
  		return NULL;
  	}
  	else {
  		mysql_select_db(PERCH_DB_DATABASE,$link);
  		$sql = "SELECT `contentJSON` FROM `".PERCH_DB_PREFIX."contentItems` WHERE `contentKey` LIKE '$contentKey' AND `contentPage` LIKE CONVERT(_utf8 '$contentPage' USING latin1) OR '*' COLLATE latin1_swedish_ci";
  		$result = mysql_query($sql, $link);
  		return mysql_fetch_assoc($result);
  		mysql_close($link);
  		
  	}
  }

• Links

  • http://www.jquery.com/
  • http://snook.ca/archives/html_and_css/css-text-rotation

  Detecting old versions of Firefox for progressive enhancement

  Posted on : Friday, 31 July, 2009

  Today I have been redesigning my CV (as you do) as I wanted it to be hosted/printed/enjoyed from my site and not as a PDF. Whilst designing it I saw a post by Jonathan Snook on CSS text rotation, this is really exciting as Jonathan also shows you how to use a filter to make it work in IE — exciting stuff.

  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');}
  
  }
  

• A fixed position sidebar with scrollable content – all centred!!

  Posted on : Thursday, 23 July, 2009

  Today I got the chance to redesign a site I made for a client sometime ago. I have been having the same problem with it I had back then. The sites aims are to be simple and minimal BUT to have all content broken into individual pages/sections. This lead to some small pages and it looked odd. (Though I thoroughly agree with small and simple approach)

  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.

• « Older Entries

by tag

• wordpress
• textmate
• site-map
• sermon
• progressive-enhancement
• perch
• jquery
• javascript
• iphone
• inspiration
• hover
• firefox
• draplin
• design
• css
• bundle
• browser-sniffing

by date

2010	Feb ( 1 )
	Jan ( 1 )
2009	Sep ( 2 )
	Aug ( 1 )
	Jul ( 4 )
	Jun ( 5 )