Home

Display the environment in the UI

As a software engineer you are switching between production,  staging and development environments multiple times a day.

It's important to distinguish between these environments because you don't want to accidentally delete a customer's account in your production environment because you thought you were deleting things in your staging environment (when in fact you were working in your production environment).

In web development – typically – the only way you can see the difference between these environments is by looking at the URLs (e.g., Let's say we work for widget.com. production will be hosted on app.widget.com, staging on staging.widget.com, and when you develop locally it will be localhost).

This is tiresome and error-prone. why? because the difference between environments are just a few letters in the URL bar.

We can do better. How? By adding a banner to the web app that has a different colour for each environment. Below an illustration:

This simple hack will save you a lot of headaches.