Jasper Rooswinkel

Pushing a footer in HTML and CSS

Jasper — Wed, 27 Oct 2010 15:21:44 +0000

Although it seems a trivial thing, stretching a page to position the footer always at the bottom of the page is not obvious in HTML. Of course, we could easily position a footer by absolute or fixed positioning (which, completely off-topic, doesn’t work on an iPad btw), but this is not the same thing.

What we would like to achieve is the footer being displayed at the bottom of the browser window, if all content fits on one page, while being pushed off screen when the content exceeds the page fold. For this we have to use negative margins.

Click here to see an example

First, make sure you wrap the footer in your HTML separately from the content of the page and add an extra div at the end of the content part. This div will take care of filling the space that is used by the footer. The following structure would work:


	
		
			This is the content
		
		
	
	
		This is the footer

Now, in your stylesheet, give the page wrapper a height of 100%. This will make sure that the content uses all available vertical space of your browser window. And here comes the sweet part: When combining this with a negative bottom margin that equals the height of the footer, your content area will “pull” the footer upwards, displaying it at the bottom of the area. A big hurray for negative margins:

html {
	height:100%;
}

body {
	height:100%;
}

#page_wrapper {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0 auto -100px auto; /* -100 is the negative footer height */
}

#content {
}

#footer_wrapper {
	width:100%;
	height:100px;
	background-color:#A62F00;
	color:#ffffff;
}

#fillspace {
	height:100px;
}

Finally, set the fillspace div to the same height as your footer. This will compensate for the negative margin for the content part of your page. If you’d leave this out, the content would interfere with your footer. Instead it’s being filled with a big nothing, exactly the size of your footer.

If you have visual columns (or some other kind of background) in your page wrapper, you could add them to the html-part of your CSS to create faux columns.

Collapsable form sections in jQuery

Jasper — Sun, 17 Oct 2010 18:50:19 +0000

I recently scripted a (very) easy solution to collapse part of a form, based on the state of a checkbox. The goal was to apply it to a form built using the Formbuilder module for CMS Made Simple, which was the main reason to keep it as simple as possible. It should fit nicely into the CMS Formbuilder back-end interface as I didn’t want to tweak this module (for more than one reason). The final solution is obvious – just the way I like it – and can be applied to any form, without interfering with… anything.

First, the following javascript should be included your source:

function show_hide_section(section,checkbox)
{
	if ($("#"+checkbox).is(':checked'))
	{
		$(section).show("slow");
	}
	else
	{
		$(section).hide("slow");
	}
}

To make this tiny piece of code work, be sure to include any version of jQuery as well using your favourite source, for example like this:

Now, all that’s left to do is to call the show_hide_section function as soon as the checkbox is clicked, passing the section that should be shown or hidden. Let’s assume we have a section field_address (in which all involved divs have been given the class “field_address”):


Yes, I have an address

By clicking the checkbox, the field_address class will be shown (if currently hidden) or hidden (if currently shown). A div-section containing the input fields will, obviously, look like this:


Street:
Postal code:
...

Click here to the end result in a live website. That’s all there is to it.

From Mac Mail to mailing list

Jasper — Tue, 12 Oct 2010 15:49:55 +0000

We decided it was time to update our mailing list with e-mail addresses of people that we did business with over the last years. Although we don’t use Mac Mail anymore – we have switched to Google Apps Premier -, I still have a lot of mails (and therefor addresses) stored in Mail. Exporting these addresses as .csv and importing them in my mailing software should be easy, I thought. However, this turned out not to be a standard scenario.

Mail does not support the exporting of addresses to .csv format. Then, I figured by exporting my addresses from Mail into Address book, I would be able to extract them as .csv and store them in a spreadsheet for uploading to my E-mail Marketing software. Wrong again, because Address book doesn’t support such an export either. With the right tools it’s doable, however. Reason enough to write the procedure down for future reference.

Exporting addresses from mail to Address book

For exporting all the people you’ve addressed in Mail to your Address book application, open Mail and go to “Window” -> “Previous Recipients”. If you’re only doing this for the purpose of creating a .csv file, you probably want to archive your existing Address book first to restore it later (deleting the addresses you’re going to add in the next step…). Select all addresses and click the bottom right button to copy them to Address book.

Address Book Exporter

Creating a .csv file from Address book

Because Address book doesn’t support .csv export, you should download the free Address Book Exporter. This is a cute little tool for exporting your Address book to .csv format (or other formats like Outlook or Yahoo – although I can’t think of a good reason why you would want this ). Typically the kind of tool you’ve never heard of until you need it. Anyway, by clicking Configure Settings you can even choose which fields you’d like to export (you probably don’t need them all for your mailing list). After this click Export Address Book and you’ve just saved yourself hours of typing.

Facebook OAuth 2.0 via Graph API using PHP and Zend

Jasper — Sat, 09 Oct 2010 12:40:05 +0000

Recently I added OAuth authentication and some Facebook Graph API calls to Vizited for connecting users to their Facebook accounts, allowing them to share their public bookmarks through Facebook. If you have ever tried implementing OAuth, you’ve probably discovered that it’s quite a challenge the first time. It takes some reading and experimenting before it starts to make sense. Probably because the process exists of some steps (requests) that are a little bit confusing in the beginning.

I’m a huge fan of the Zend Framework which didn’t make the task easier, because there are not a lot of examples available. I love Zend because it makes the PHP-part of my life a lot more fun and, besides this, Vizited is developed in Zend and I wanted to fit the OAuth thingy nicely in. In this article I will explain my approach which will hopefully help others that are struggling with the same idea. The principles in this article can easily be applied without Zend Framework as well.

Unfortunately I don’t have a Zend installation on this blog (yet), so I didn’t create a fully working example. I will show you the essential parts of the code I developed for Vizited and assure you it works. You can test it yourself by creating a free account on Vizited and linking it to Facebook (or Twitter or LinkedIn, which basically use the same technology for authentication). I’m happy to answer any questions you may have, just put them in the comments.

One other thing before you continue reading this: this tutorial is probably not fit for beginners. I’ll assume you have significant knowledge of PHP, Zend and maybe some Javascript, because it will be too much work to explain everything in full detail.

Creating a Facebook Application and updating the Zend application.ini

You should start by creating a Facebook Application. There’s a lot of information available online on how to do this. Although you may not be developing an application that will be displayed “widget-style” on a user’s Facebook account, you’ll still need an application for Graph API calls and the OAuth authentication flow.

After you’ve finished setting up the application in Facebook, you should end up with a client_id and a client_secret (which can be retrieved from the Web Site tab of your application configuration). These we will add to the application.ini in Zend, together with a callback URI, like this:


facebook.client_id = ""
facebook.client_secret = ""
facebook.redirect_uri = "http://www..com/social/facebookcb/"

For easy reference, I have the (good?) habit to add application.ini settings to my Zend Registry in my Bootstrap.php, like this:


protected function _initConfig() {

	$aConfig    = $this->getOptions();
	Zend_Registry::set('facebook_client_id', $aConfig['facebook']['client_id']);
	Zend_Registry::set('facebook_client_secret', $aConfig['facebook']['client_secret']);
	Zend_Registry::set('facebook_redirect_uri', $aConfig['facebook']['redirect_uri']);

}

Now you’ll be able to very conveniently reference the attributes like this Zend_Registry::get(‘facebook_client_id’).

Requesting authentication and authorization

Authentication and authorization with Facebook exists of several steps, that are described here. To implement these steps, we have to create a controller in Zend that contains the necessary actions. As you could see in the redirect_uri in the application.ini, our controller is called socialController.

This controller has two main actions: facebookauthAction and facebookcbAction. The first one will start the authentication and authorization flow and handle the first redirect, the second one will handle the callback from Facebook. This is the code for starting the flow:


public function facebookauthAction()
{
	$this->_helper->viewRenderer->setNoRender(true);

	if ($userid = Zend_Auth::getInstance()->getIdentity()->id)
	{
		// Get a Facebook authorization for the publish_stream and offline_access
		$url = 'https://graph.facebook.com/oauth/authorize?client_id=' .
			Zend_Registry::get('facebook_client_id') .
			'&redirect_uri=' .
			Zend_Registry::get('facebook_redirect_uri') .
			'&scope=publish_stream,offline_access';

			// Return URL that should be used for redirection in Javascript
			die ("1|$url");
		}
		else
		{
			// No user logged in
			die ("0|Please login first");
		}
	}
}

Line 8 is the most important one, this is were the URL is compiled. It uses the application.ini settings together with the scope parameter. Make sure you select the right scope for your purpose! The option publish_stream will allow you to post to the stream of a user, offline_access will allow you to do this, even if the user is logged out from Facebook. Details can be found on this page.

Less important, in my code I will only redirect the user if he’s already logged in to the local application (in this case Vizited), else I will ask him to login first. Line 5 takes care of this. Of course this is not required for Facebook.

In line 3 of this code, I turn off the rendering of the view for this action. The reason for this is that I call this action asynchronously from Javascript and I want the result to be returned to the script as well. The returned URL which is created in line 8 should be used to redirect the browser. I do it like this in my Javascript:


// Out of context! jQuery is used to call the facebookauth action
...
$.get('/social/facebookauth/', getFacebookAuthReady);
...

function getFacebookAuthReady(response) {

	var ar_response = response.split("|");
	var responseCode = ar_response[0];
	var responseText = ar_response[1];

	if (responseCode == 1)
 	{
		// Go to URL for Facebook Authorization
 		window.location.href=responseText;
 	}
 	else
 	{
 		// Show error
		...
 	}
}

Basically, it doesn’t matter how you redirect to this URL (you could do this in your view or by using the redirect feature of Zend). I do it this way because I want to display an error to the user if he or she is not logged in. I hope this makes sense.

After you’ve implemented this code, you can test this action by entering www.yourdomain.com/social/facebookauth/ in your browser which should direct you to Facebook, asking you to authorize your application.

Handling the callback

After the redirect to graph.facebook.com/oauth/authorize Facebook will ask the user to login (if not already logged in to Facebook) and to give the requesting application (your application!) permission to his or her account. Next, Facebook will redirect back to the redirect_uri. In our case, this is the facebookcbAction of the socialController. More specifically:


public function facebookcbAction()
{
	$request = $this->getRequest();
	$params = $request->getParams();

	if (isset($params['code']))
	{
		// This is the callback from Facebook, get the code parameter
		$code = $params['code'];

		$url = 'https://graph.facebook.com/oauth/access_token';
		$arpost = array(
			'client_id' => Zend_Registry::get('facebook_client_id'),
			'redirect_uri' => Zend_Registry::get('facebook_redirect_uri'),
			'client_secret' => Zend_Registry::get('facebook_client_secret'),
			'code' => $code);

		// Now request the access_token
		$result = $this->requestFacebookAPI_GET($url,$arpost);

		if ($result === FALSE)
		{
			// Redirect to error page
			...
		}
		else
		{
			parse_str($result, $arresult);

			// Use the access_token to retrieve the user's profile
			$url = 'https://graph.facebook.com/me';
			$arpost = array('access_token' => $arresult['access_token']);

			$result = $this->requestFacebookAPI_GET($url,$arpost);

			if ($result === FALSE)
			{
				// Redirect to error page
				...
			}
			else
			{
				$arprofile = json_decode($result,true);

				$data = array(
					'id' => Zend_Auth::getInstance()->getIdentity()->id,
					'facebook_access_token' => $arresult['access_token'],
					'facebook_name' => $arprofile['name'],
					'facebook_id' =>  $arprofile['id']
				);

				// Save this array in the database as part of the user profile
				// Redirect to success page
				....
			}
		}
	}
}

In line 6, we start with checking if the parameter code is returned by Facebook. This code should be exchanged for an OAuth access token for this user and without it we’re lost. The access token is the key to all the Graph requests we want to perform on behalve of this user. To exchange the code for the access token, we generate a new GET request for which we use the private method requestFacebookAPI_GET with the parameters as defined in line 12.

The homebrew requestFacebookAPI_GET method performs a cURL HTTP request and looks like this:


private function requestFacebookAPI_GET($url, $arpost) {

	//
	// Create a cURL request to Facebook
	//
	$ch = curl_init();

	curl_setopt($ch, CURLOPT_URL, $url . "?" . http_build_query($arpost));
	curl_setopt($ch, CURLOPT_POST, false);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);

	$result = curl_exec($ch);
	curl_close($ch);

   	return $result;

}

The result that is returned from this function is parsed after which we have the access token. In line 32 to 34 we use this access token to perform our first Facebook request that actually requires an access token (getting the users profile). The JSON result is then parsed and stored in an array, together with the access token, which you can save to your database for future use.

Publish to the feed/wall of a user

If you decided to obtain publish_stream rights in the authorization step, and the user allowed this, you will be able to publish messages to the user’s feed. I will show you a quick example on how to do this.

First, we’ll need to tweak the requestFacebookAPI_GET to POST instead of GET (trust me, this is not very obvious if you’re trying to figure this out without the right info, until you find this page):


private function requestFacebookAPI_POST($url, $arpost) {

	//
	// Create a cURL request to Facebook
	//
	$ch = curl_init();

	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($arpost));
	curl_setopt($ch, CURLOPT_POST, true);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);

	$result = curl_exec($ch);

	curl_close($ch);

   	return $result;

}

There are only tiny differences: CURLOPT_POST is set to true and the CURLOPT_POSTFIELDS are filled instead of the query string, which makes this a POST request. Obviously you could integrate the both in one method, but I decided not to. The overall point is that the Facebook Graph API requires part of its access through POST-requests and part through GET-requests.

Now let’s post something (anything) to the wall:


// Get the access token of the user from the database and
// store it in the $access_token variable
...
$access_token = ...

// Now publish a link to the feed/wall of the user
$fburl = 'https://graph.facebook.com/me/feed';
$arpost = array(
	'link' => 'http://www.jasperrooswinkel.com/',
	'name' => 'Jasper Rooswinkel',
	'caption' => 'Home of Jasper Rooswinkel',
	'description' => 'This is very nice!',
	'access_token' => $access_token
);

$result = $this->requestFacebookAPI_POST($fburl,$arpost);

The result should appear on the wall of the user almost instantly. If not: verify your code, this is tricky and you should test it with simple content. If yes: great success! Btw. it’s a good idea to create a test account on Facebook before testing this on actual users, because all your friends will see the new posts.

That’s it for now. I hope this helps!

Creating an animated GIF using Fireworks in 8 simple steps

Jasper — Tue, 05 Oct 2010 16:03:38 +0000

It doesn’t get more old school than this: animated GIFs. However, on very rare occasions it’s the most simple and therefor most cost efficient solution for flicking a few images. Because I’m creating animated GIFs less than once a year (and today was that day) and I have to refresh my memory every time I do it, I decided to jot down 8 simple steps to creating an animated GIF using Fireworks (CS4). Yabadabadoo!

Create a GIF image for each frame in your animation, all of identical width and height;
Create a new document in Fireworks which has the same width and height;
Drag the first GIF to layer 1;
Add a new “state” (menu “Window” -> “States” if not already in your panel);
Drag the next GIF to layer 1;
Repeat steps 4 and 5 for each frame;
Set the State Delay (the number right to the name of a state) for each state to a not so annoying value and test the animation using the “Preview” tab;
Export the result as an Animated GIF using the Export Wizard (menu “File”).

How simple can it be? Jeeez… I hope I will remember to look at my blog next time I need this.

Smooth fullscreen background slideshow in jQuery

Jasper — Sun, 03 Oct 2010 14:33:11 +0000

After having a look at a variety of fullscreen slideshow effects in jQuery, I figured this could be done smoother (by waiting for images to actually load before displaying them and adding an optional grid) and in only a few lines of code. I use this effect for displaying a slideshow of images on the background of this blog and I cleaned op the code for anyone’s enjoyment. In this article I will walk through my ideas for anyone who’s interested in using this effect.

Click here to see the end result | Click here to download the source

Basic HTML structure

The goal of this effect is to display the slideshow in the background, without interfering with the actual content of the website. The following document structure will take care of this:






 
 Actual page content

The page content will be added to the section page_content. This section needs to be on top of the background and the background grid. The background grid (div with id bg_grid, which will contain a transparent .png existing of a single visible pixel and three transparent pixels) is put on top of the background image (img with id bg).

This stack is achieved by using fixed positioning on bg_grid as well as bg and giving bg_grid a higher z-index than bg. Furthermore, page_content needs to be positioned relative to make it float over the background and be flexible enough to contain any content you wish. The following CSS takes care of this all:


#page_content {
 /* Display on top of slideshow */
 position:relative; /* This is very important! */
 z-index:2;
}

img#bg {
 /* Stretch background */
 position:fixed;
 top:0;
 left:0;
 height:100%;
 width:100%;
 z-index:0;
}

#bg_grid {
 position:fixed; /* This is very important! */
 top:0;
 left:0;
 height:100%;
 width:100%;
 background: url(grid.png) repeat;

 /* Display on top of background */
 z-index:1;
}

As you can see, the background is stretched simply by setting width and height to 100%. This works beautifully for landscape images, but may be disturbing if your images are portrait. This code will not solve that for you. The grid on top of the image can easily be turned off by deleting the background from #bg_grid.

Script for fading the background images

As promised, I will only use a few lines of code to make the magic happen. In the first part of the script, I define three arrays (aImages, aURL, aArtists) that contain the links to the images, the related URLs (that will be displayed in the description) and the related artists (also displayed in the description section). I will leave the array definitions out for now, as you can easily look these lines up in the example code. The core of the functionality is:


$(document).ready(function() {

	/* Define the function that triggers to fade in the background */
	$("img#bg").load(function()
		{
			/* Fade in during 3 seconds */
			$("img#bg").fadeTo(3000,1);

			/* Animate the picture description during 1 second */
			setTimeout(function()
				{
					$("#image_description").animate({right: '+=150'}, 1000)
				}, 1000);

			/* Set the timeout to fade out after 10 seconds*/
			setTimeout(function()
				{
					$("#image_description").animate({right: '-=150'}, 1000);
					$("img#bg").fadeOut(3000);

					/* Load the next image after 4 seconds */
					setTimeout(LoadImages,4000);
				},10000);
 		});

	/* Start the slideshow one second after the page is ready */
	setTimeout(LoadImages,1000);

});

function LoadImage(iNr)
{

	/* Assign the new image to the background */
	$("img#bg").attr("src", aImages[iNr]);

	/* Assign the artist name to the description */
	$("#image_artist").html(aArtists[iNr]);

	/* Assign the image url to the description */
	$("a#image_url").attr("href", aURL[iNr]);
	$("a#image_url").html("for sale @canvasinabox.com");

};

function LoadImages()
{

	/* Select a new random image number */
	while(iPrev == iRnd)
	{
		iRnd = Math.floor(Math.random()*aImages.length);
	}

	/* Show the selected image */
	LoadImage(iRnd);

 	iPrev = iRnd;

};

To start the fade in, we add a handler with a function to the bg image element. For this we use the load event (in line 4) which triggers its handler after the image has been loaded into the browsers memory. This is very important, because the image will most likely not fade in smoothly if it’s not already loaded or in the browsers cache. The fade in may be half way or already completed before the image is loaded, which we don’t want. This function will also take care of animating the description and triggering the fade out after 10 seconds.

In line 27 we tell the browser to run LoadImages for the first time, one second after the page is ready. LoadImages (which starts on line 46) selects a random image number and makes sure this is not the same number as the image that was displayed before. It feeds this number to the LoadImage function (line 31) that actually loads the new image (thereby triggering line 4 when ready!).

Finally, the next image is loaded in line 22, four seconds after the fade out was started (which takes three seconds to finish). That’s all there is to it. Feel free to download the source and use these ideas for your own projects.

Five essential Firefox Add-ons for webdesigners

Jasper — Sat, 02 Oct 2010 09:22:54 +0000

Of course, listing five of your favourite anythings is not a very original concept for a blog. Especially when the first two are already so popular that it makes you want to pop-out your eyeballs. Sorry, but an undefined part of me just couldn’t resist writing this down anyway thereby adding more choices to your difficult life. Here’s my list.

1. Firebug

Firebug

Firebug is probably the most popular Firefox add-on for developers ever. I honestly couldn’t do without it, as it makes my debugging and developing so much easier. Microsoft must have seen this too because they integrated similar functionality in their Internet Explorer 8 (it’s called Developer Tools).

Firebug is an add-on with add-ons. An interesting one is Pixel Perfect, which helps you with making your websites… pixel perfect. By displaying an overlay of your design you can improve the positioning of elements on your web pages. Nicely done.

2. Web Developer

Web Developer

Web Developer adds a toolbar to Firefox containing a lot of very neat and handy tools. However, since I started using Firebug, I’ve been using Web Developer less and less. But I still have it installed and up-to-date on all (er, two…) of my development machines.

The feature I use most is the Ruler (yes, I like to rule: menu Miscellaneous -> Display Ruler) to measure the sizes of elements. In the end, maybe I would be perfectly happy with a “Just-another-Ruler” add on, but I don’t think this would get me to ditch Web Developer. It’s like this one team member that you can always rely upon.

3. ColorZilla

ColorZilla

The recently-very-much-improved ColorZilla add-on is another tool that makes my live just a little bit more worth living. What I love most is that you can color pick any color in your browser and it will return the hexcode for pasting in your CSS documents.

If you’re a bit lazy-in-a-good-way – like me – this is a great work-around for searching through your CSS document to refind a color and for matching colors to an image on your page. The latest version has some significant improvements and was debugged, so it’s becoming better and better.

4. 1Password

1Password

Although not a Firefox plug-in pur sang, 1Password together with its excellent Firefox integration and toolbar is another utility anyone should have in his or her toolbox. It’s not free, but it’s worth every penny.

When developing and testing, you’ll probably be logging in and out of accounts all the time. Hosting accounts, MySQL databases, forums, sites, etc. 1Passwords stores all your passwords and automagically fills-in your login credentials. I, for example, currently have six Twitter accounts running for several projects, customers and testing purpose. 1Passwords facilitates me in switching between those accounts using one mouse click. This is very efficient.

If you’re using Dropbox, you can even sync your 1Password data file to multiple systems. Love it!

5. Vizited Toolbar

Vizited Toolbar

Hugely biased I must admit that I use the Vizited Toolbar a lot for development purposes too. Although still in beta (what isn’t?), I use it to bookmark and organise websites that I visit during the day. I tag websites and articles as “inspiration”, “php”, “css”, etc. or with the clients name to group them and quickly retrieve them later on. Vizited really improved my personal workflow.

By using Vizited, I experience that there two types of bookmarks. Bookmarks for sites that you visit and revisit the same day or week, which works excellent with Vizited because they will almost always be available right there on the first page of your private Vizited page. And another set of bookmarks that you will use for inspiration and want to share with the rest of the world. They should be tagged and be given good descriptions, so you can easily share (including your personal note) and retrieve them, even after a few months.

To use this toolbar, you need to create a (free) account on Vizited first (which will be instantly activated and you only need to fill in an alias and e-mail, so it’s not a big deal). After this you will have access to your bookmarks anywhere. End of commercial.

Unexpected expiration of Zend_Auth sessions

Jasper — Thu, 30 Sep 2010 19:16:46 +0000

I was struggling a bit with managing PHP sessions within the Zend Framework. More specifically, the session of an authenticated user expired after 24 minutes (1440 seconds), even though I instructed Zend to set the expiration to 86400 seconds (1 day), like this:

$db = Zend_Db_Table::getDefaultAdapter();
$authAdapter = new Zend_Auth_Adapter_DbTable($db);

$authAdapter->setTableName('users');
$authAdapter->setIdentityColumn('username');
$authAdapter->setCredentialColumn('password');

$auth = Zend_Auth::getInstance();
$result = $auth->authenticate($authAdapter);

// Did the user provide the correct credentials?
if ($result->isValid()) {

	// Store all userdata except the password in the session
	$data = $authAdapter->getResultRowObject(null,'password');
	$auth->getStorage()->write($data);

	$authSession = new Zend_Session_Namespace('Zend_Auth');
	$authSession->setExpirationSeconds(86400);

}

How sessions work and what you should be aware of

PHP stores the session ID in a cookie and, when a new request arrives, uses the session ID from the cookie to retrieve the session file from disk. If a session expires, this can have at least two causes 1) its session file on the server is gone or 2) the related cookie is no longer available. As PHP stores its sessions in a shared location (usually /tmp/), I figured someone or something else was tampering with my session files.

After having some deep thoughts, I came to the following conclusion. In a shared hosting environment, other PHP scripts are also putting their session files in /tmp/. This should not be a problem, however, garbage collection takes place on system wide intervals (which default to 1440 seconds) and (worse!) scripts from other users can even decide to override this interval (if you’re really trigger happy you can delete all session files, every minute). In summary: my sessions are not safe in /tmp/!

Saving your session files in a different location

Fortunately, Zend Framework (beyond version 1.8) offers a nice solution to store your session files in a different location. First you have to create a folder and chmod it to 777 so it’s writable for PHP. In this example I created the folder in “/application/../data/session/”. Next, you tell your application to change the save path of the sessions and the lifetime of your sessions by adding the following lines to your application.ini (86400 seconds = 24 hours):


resources.session.save_path = APPLICATION_PATH "/../data/session/"
resources.session.gc_maxlifetime = 86400
resources.session.remember_me_seconds = 86400

Finally, to make this work, you need to bootstrap “session”, by putting the following code in your Bootstrap.php:


protected function _initSessions() {
 	$this->bootstrap('session');
}

To check if this worked, monitor the new sessions folder and, as soon as you log in, a new session file will appear. Deleting this file will log you out.

Firefox Profilemanager to the rescue

Jasper — Wed, 29 Sep 2010 19:22:08 +0000

One of the better kept secrets of Firefox – at least for me it was – is the option to run multiple independent user profiles in one installation. Quite a nifty feature and I found a great use for it recently. For one of our projects, Vizited, I’ve been working on a Firefox toolbar which triggered a few challenges.

For developing this toolbar, I use several Firefox add ons (e.g. XUL Gear for buiding the xul files). Unfortunately, during development of the toolbar, I regularly have to shutdown and restart Firefox to test changes in the code. This is not very convenient as this also causes the other add ons to close. Besides this, I rather test my toolbar in a “clean” set-up of Firefox instead of alongside my other third party plug-ins.

Firefox Profile Manager

The “Profile Manager” takes care of both inconveniences. Details how to configure multiple profiles, can be found in the Mozilla knowledge Base. I will explain my approach in two command lines.

On Mac OSX you can easily start the Profile Manager in a terminal window (first quit your running Firefox instance):

/Applications/Firefox.app/Contents/MacOS/firefox-bin -ProfileManager

After configuring a profile, you can start multiple instances of Firefox like this (duh!):

/Applications/Firefox.app/Contents/MacOS/firefox-bin

For every instance you can choose a different profile in the pop-up. This way, Firefox will peacefully run multiple instances and you’ll be able to restart them individually. Isn’t that nice?

How to identify a font?

Jasper — Tue, 28 Sep 2010 17:08:10 +0000

Great success!

If you’re a (web)designer, you’ve probably experienced this problem more than once – at least I have. For a new design I asked my client to send me his logo. This is one of those projects where the logo is already available and the website should be designed “around” the logo. No problem, I’m flexible and luckily – although the client prepared me for this – I was sitting down when I received his slightly outdated logo in my mailbox.

Because we promised to keep the logo for now, and to start with designing the website first, for obvious reasons I was interested to identify the font that was used for the logo. But how? After feeding the correct mix of keywords to Google, it proposed me a rather elegant solution.

So, if you’re as ignorant as I am when it comes to naming fonts and/or typefaces, you should really check out What The Font. I had to crop and resize the text in the logo a bit, but then it actually unbelievably worked without much effort at all! The font was identified, including some alternatives. Make sure you follow the guidelines and this will most likely simplify your life as well.