"Alert", "confirm" and "prompt" are considered bad practices?

Question

Where I work some professionals do not like to use these features and said they are considered bad practice and were warned by other more experienced programmed not to use and end up replacing these functions with modal windows.

My question is, were they right about that, should we avoid? The most appropriate is to make use of modal window to perform these operations?

window.prompt("sometext","defaultText");

alert("I am an alert box!");

function myFunction() {
   var txt;
   if (confirm("Press a button!")) {
            txt = "You pressed OK!";
   } else {
            txt = "You pressed Cancel!";
   }
   document.getElementById("demo").innerHTML = txt;
}

Answer 1

It is not that it is bad practice, because good or bad practice is an excuse of those who do not know what they are doing. Think about it, what does good practice mean? A cake recipe someone told you to make because someone practiced it and said it’s good, which is useful for learning?

These windows are modals then the question starts from a wrong premise. You can replace this modal with another modal created with HTML/CSS and manipulated with JS, this way you can give the look you want and have the possibility to handle quite flexibly. This is a better practice than using what the browser gives you ready? In some scenarios yes, it gets more beautiful and improves the user experience, in others it doesn’t make so much difference and only takes more work.

Doing right and wrong for the scenario is the only good practice you should follow, so you have to understand the whole, gain experience to make right decisions and not follow ready-made recipes. Most of the software we see out there is bad because they follow good practices, it seems incoherent, but that’s it, people use the right tool for the wrong task.

This is not a case that will be terrible, but there are many cases that gets bad, works and people do not realize how bad it is. How many times have you seen something clearly bad and wondered why someone you know you did and have experience did something like this?

It is ugly to use the modal of browser, but why would it be a bad practice? If it does not meet the need is wrong tool and not bad practice. It is the requirements that should determine this.

• Need to maintain an aesthetic pattern of the page?
• You need different behavior than you’re ready for?
• Can do something better and well done?
• You have time to do something better?

These are factors to decide to use your own mechanism. If it is to do a worse then this is good.

Answer 2

They are not bad practices, even because they are still in the language, I believe that we can say otherwise: "do not use Alert, confirm and prompt, because there are currently other ways to do that are more in line with the site layout and we have more control".

Why the layout of the site?

Because it is not possible to style the windows of these commands, they are generated by the engine in the browser, so it can get quite strange a alert for example here in the layout of Stackoverflow. If you click on the "Flag" link you will see a window, which of course is much more complex than a simple alert or any of the other commands, but you can see that the window is fully adhered to the layout of the site, because it is a form of window/modal/popup/Alert anything you want done with javascript/html/css code, that is, if you can leave it with the layou you want.

Why more control?

Following the same example above, from the link "Flag", it is possible to control the behavior of the window, for example change color by clicking on some option, open or window on this while it is still Abeta, etc. These and other behaviors would not be possible with the commands of your question, because as said, they are controlled by the browser engine, and the control over them is quite limited, so with the layout.

So you might say that it’s not good practice, but I prefer to think of "there are other better ways to do it".

One malpractice would make misuse of something, for example using the getElementsByTagName, take all elements of the type div and find one with the ID "test", and for that getElementByID.