An easy visual alert for your staging site

Quick tips are random posts regarding something I discovered on my way to something bigger. They usually get longer than “quick” would imply, for which I refuse to apologize.

I’ve had a lot of fun with Jekyll lately. There are little things popping up on this blog that seem insignificant but took way too much time. I’m not sorry, I had fun doing it. I intend to blog a bit more about my Jekyll hacks, but I threw this one on today and it’s simple enough to write about in under five minutes.

I use staging sites to test changes to web projects before publishing them. This is great — and I wouldn’t want to work any other way — but I sometimes forget which site I’m on and find myself banging my head because changes aren’t taking, or perhaps tweeting a URL from a staging domain (guilty, but it was just my own, not a client or employer’s). I used to handle this with PHP, and still do in some cases where that’s convenient, but this is way simpler.

The code I just dropped in is a tiny bit of JavaScript that just checks the current page url against a hardcoded target url. If it’s on anything other than the main domain, it puts a thin red bar up at the top of my browser. Effective and unobtrusive (and easy to turn off if it gets in the way), but it requires customizing when using on different sites.

I’m using jQuery, but the same thing can be accomplished with just a few extra characters if you’re not loading jQuery in your project. Here’s what it looks like:

if (!(/^http:\/\/brettterpstra.com/).test(window.location.href)) { 
	$('<header id="devbanner">').prependTo('body'); 
}

Pair that up with some CSS:

#devbanner {
	position: fixed;
	height: 5px;
	background: rgba(169, 44, 44, 0.25);
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
}

And you’re good to go. Yep, I’m clumsy enough to need this.