This content originally appeared on DEV Community 👩💻👨💻 and was authored by Adrian Matei
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 💪
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Adrian Matei
Adrian Matei | Sciencx (2022-12-08T05:47:26+00:00) Increase productivity by visually differentiating between environments. Retrieved from https://www.scien.cx/2022/12/08/increase-productivity-by-visually-differentiating-between-environments/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.