How to Color-code Your Deployment Environments | by Madeleine Smith | May, 2022

And turn out to be a productiveness guru 💯

A feature image consisting of ‘Color coding’ as text on a background of multiple bright colors.

For one of many shopper initiatives that I’m engaged on, we have now a number of deployment environments up and operating. On the final rely, we had 5 — native, improvement, qa, staging and manufacturing.

Nonetheless, with so many environments, I used to be discovering it actually troublesome to distinguish between every of them as every web site appears precisely the identical. The one distinction being a single phrase within the URL:

A screenshot of the development environment of one of my client projects prior to color coding. Everything is blurred out except the word ‘dev’ in the url.
A screenshot of the production environment of one of my client projects prior to color coding. Everything is blurred out except the word ‘production’ in the url.
Is that this dev or manufacturing? I don’t know!

I needed to have the ability to instantly know which setting I used to be . Which means that I’d be capable to inform every setting aside visually, and decide the setting if given a URL by another person. And this is able to additionally permit me to understand how cautious I must be — i.e. I’m can go mad in a neighborhood setting however will exert due warning on staging/manufacturing.

I took inspiration for learn how to remedy this from my expertise utilizing Postico (a PostgreSQL shopper) in a earlier staff. Postico permits you to color-code every of your information sources — so the tab for our manufacturing connection was purple and for improvement it was inexperienced.

I got here up with the thought to alter the colour of the highest navigation bar relying on the setting. After a little bit of looking, the Stylish Chrome extension appeared to suit the invoice. This extension permits you to customise an internet site by making use of customized CSS kinds on prime of present kinds.

For every of my deployment environments I created a brand new type by deciding on the ‘Create New Model’ choice:

A screenshot of the Stylish Chrome extension with two options displayed — ‘Create New Style’ and ‘Manage All Styles’.

From there, you’re taken to an ‘Add type’ web page the place you’ll be able to specify your CSS:

A screenshot of the ‘Add Style’ page within the Stylish Chrome extension.

In our venture, the highest navigation bar has a category of navbar (tremendous authentic 😛) so the CSS I added was:

The place the COLOR placeholder is the particular colour I needed to make use of. For every setting, I restricted the rule to solely act on its area utilizing the ‘Applies to’ dropdown.

And the consequence appears like this:

A screenshot of the development environment of one of my client projects after color coding. Everything is blurred out except the word ‘dev’ in the url.
A screenshot of the production environment of one of my client projects after color coding. Everything is blurred out except the word ‘production’ in the url.
Ah, a lot better — I can instantly inform the distinction 💯

For my native setting, I took a barely totally different tack. As I’ve the 2 repositories (FE and BE) operating regionally, I simply modified the CSS file within the FE repo. I most likely may’ve arrange a brand new Trendy rule for native improvement however that might additionally imply that I could possibly be probably altering the colour of navbars of any web sites that I run regionally.

In an analogous vein, we’re utilizing an essential third-party dependency in our venture — for which there exists a non-production setting (sandbox) and a manufacturing setting.

I used Trendy once more to alter the header bar of this web site to have the ability to know which of our deployment environments are pointing to the sandbox dependency and that are utilizing the manufacturing dependency.

A screenshot of the navbar of a third party dependency after color coding.
That is the sandbox model of the third social gathering dependency — for which my native (lilac), improvement (inexperienced) and qa (orange) environments are pointing to it. The manufacturing model of this dependency has a separate colour scheme happening.

The CSS I used for the above appears like the next:

To complete off this color-coding journey, I needed to color-code my database connections to match my deployment environments. I’m at the moment utilizing the database administration performance in GoLand as my SQL GUI. Although I think about all of JetBrains’s merchandise perform in a lot the identical method:

As soon as a knowledge supply is added, merely proper click on on it and choose ‘Shade Settings’:

A screenshot of a menu in GoLand with the ‘Color Settings’ setting selected.

From there you’ll be able to choose your colour, which is able to seem in numerous locations — equivalent to editor tabs and the ‘database explorer’.

And right here’s what mine appears like:

A screenshot of the database explorer in GoLand with each of the connections being a different bright color.
Ow, my eyes, it burnsss… 🤭

As a enjoyable little venture, I created a rule on Stylish to have the ability to simply decide which pull requests are mine on GitHub. Generally we have now so many pull requests on the go without delay that it’s not instantly apparent which belong to me!

A screenshot of the pull request page in GitHub with my Stylish rule active.
The Trendy rule I created to focus on my pull requests. Click on here to obtain

I initially needed to focus on the entire div in query although I’m undecided that is doable with straight CSS (as you’ll be able to’t ascend the DOM with a selector). So as a substitute I settled for highlighting my GitHub username — which does the trick.

More Posts