It’s quite unprofessional, let alone embarrassing, to post some test content on a development site only to discover you’re actually in the wrong tab and you just posted to the live site.
To avoid this I use the Stylish Add-on for Firefox to inject custom CSS into live sites I’m working on.
For example, I have the following rule for touretteshero.com:
[pastacode lang=”css” manual=”%40-moz-document%20domain(%22www.touretteshero.com%22)%20%7B%0A%20%20%20html%20%7B%0A%20%20%20%20%20%20border-left%3A%2030px%20solid%20red%20!important%3B%20%0A%20%20%20%7D%0A%7D” message=”” highlight=”” provider=”manual”/]
The result is that, in my browser, the live site has a hard-to-ignore red border that acts as a clear visual reminder:
Update
Since writing this I’m working with four distinct versions of the site: local development, remote development, remote live and remote legacy (backup of the previous version).
I’ve refined my Stylish rules accordingly to add a custom footer for each. The new rule for the live site is:
[pastacode lang=”css” manual=”%40namespace%20url(http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml)%3B%0A%0A%40-moz-document%20domain(%22www.touretteshero.com%22)%20%7B%0A%20%20body%3A%3Aafter%20%7B%0A%20%20%20%20z-index%3A%2099999%3B%0A%20%20%20%20line-height%3A%2040px%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20background%3A%20%23800%3B%0A%20%20%20%20content%3A%20%22live%22%3B%0A%20%20%20%20left%3A%200%3B%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20bottom%3A%200%3B%0A%20%7D%0A%7D” message=”” highlight=”” provider=”manual”/]
which looks like this:
Whereas the local development version looks like this:
Red = Caution, Green = Go!