Visually differentiate environments for better programming efficiency

Codever Logo

(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

Recognise dev tab when in production
Recognise dev tab when in production
Recognise prod tab when in development
Recognise prod tab when in development

Code changes


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

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 💪

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

routerLink with query params in Angular html template

routerLink with query params in Angular html template code snippet Continue reading