Visually differentiating your development site

I have most of the websites I work on set up with separate development (usually local¹) and production/deployment servers. It’s pretty easy to keep straight when I’m first designing a site, but going back later and making changes can cause some confusion with all the refreshing and dealing with caches and all. So I’ve been using a trick to make it clear which version I’m loading at any given time.

All of my local development sites are mapped to .dev addresses, e.g. brettterpstra.com. I use php to scan the current SERVER_NAME variable for .dev and insert an unobtrusive div at the top of the content if it’s found. At the very top of the page (in the header file, assuming the site is modular), I insert this line:

<div markdown=0>

<?php $dev = preg_match("/\.dev/",$_SERVER['SERVER_NAME']) ? true : false; ?>

</div>

As a side note for those not familiar with this syntax: it’s a ternary conditional operator, meaning that $dev is set to either true or false based on the result of the condition. The format here is [variable] = [condition] ? [evaluate true] : [evaluate false];. Think of the question mark as “if” and the colon as “else.” It’s just all on one nifty line.

Now we use the $dev variable to determine whether or not we’re inserting an extra element in the markup. Right after my body tag, I have this logic:

<div markdown=0>

<?php if ($dev) {
	echo "<div id=\"development\">\n";
	echo "</div>\n";
} ?>

</div>

Yep, it just inserts a div if the $dev is true (SERVER_NAME contained .div). You can change the condition above to find whatever differentiates your development server from your production and/or deployment servers.

Lastly, I style the div with some CSS:

<div markdown=0>

#development {
	position: fixed;
	bottom: 0;
	left: 0;
	background: transparent url(http://d33frhdcafae93.cloudfront.net/images/devsticker.png);
	text-indent: -99999px;
	width: 150px;
	height: 150px;
	z-index: 9999999;
}

</div>

That sticks a dogear image I made into the lower left corner of the site, in a fixed position that is always visible but rarely in the way (you’re welcome to steal the image, if you want it). It’s an easy trick, but I’ve found it saves me a lot of frustration when I get too obsessed with a minor detail to bother looking at the URL and realizing I’m not even refreshing the right version of the site. Maybe you never have that problem, in which case I applaud your level, collected personality. People like me, though, can always use a little extra help.