Visually differentiate environments for better programming efficiency

(P) Codever is an open source bookmarks and snippets manager for developers & co. See our How To guides to help you get started. Public bookmarks repos on Github ⭐🙏

Going “green”

As mentioned How I manage my dev bookmarks to save time and nerves I use heavily Codever to manage my bookmarks and code snippets, so there is always a browser tab open with the website. Lately I’ve also been developing quite a bunch of new features on the project. Lots of testing happens in the browser, and until now there was no quick way to differentiate between the production and development version, unless I look at the URL in the browser’s navigation bar of course.

Because I am always looking for things to make me life easier, I’ve remembered of an old trick to help me much easier differentiate between the two versions:

• change the color of the navigation bar
• change the favicon

Both are now green for the dev environment 🤓🟢

See in the pictures below how easy it’s to recognise the versions without looking the url

Code changes

Favicon

The code changes were minor. First change the favicon href attribute when not production

export class AppComponent implements OnInit {
    favIcon: HTMLLinkElement = document.querySelector('#favicon');
    readonly environment = environment;

    ngOnInit(): void {
        if (environment.production === false) {
            this.favIcon.href = 'assets/logo/logo-green.svg';
        }
    }
}

See Configure and use environment specific values in Angular and html template to see how to work with Angular environments

Navigation bar color

Then set the navigation’s bar color to green also based on not production condition

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow"
     [ngClass]="{'navbar-dev' : environment.production === false}" >

The navbar-dev css class

.navbar-dev {
  background-color: darkgreen !important;
}

See Conditional css class in angular html element on how to change a class in Angular dynamically

Multiple dev/testing environments

Of course if you have more dev/test environments like integration or preprod, consider differentiating them as well, your developers will thank you.

You won’t believe how these little tweaks can improve your development experience 💪