Month: August 2015

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:

@-moz-document domain("www.touretteshero.com") {
   html {
      border-left: 30px solid red !important; 
   }
}

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:

@namespace url(https://www.w3.org/1999/xhtml);

@-moz-document domain("www.touretteshero.com") {
  body::after {
    z-index: 99999;
    line-height: 40px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #fff;
    background: #800;
    content: "live";
    left: 0;
    position: fixed;
    bottom: 0;
 }
}

which looks like this:

Whereas the local development version looks like this:

Red = Caution, Green = Go!