Stack Snippets - Using alert() vs document.write() vs console.log()

Question

Is it bad practice to use either alert(), document.write or console.log() in Stack Snippets? I personally find alert() quite annoying, and console.log() takes time to see the output (you need to open browser dev tools). I always use document.write.

Are there any guidelines for how to display data to the user? I searched but could not find any. I did notice however, the post Introducing Stack Snippets that alert()s were use to demonstrate. But, one of the answers used jQuery's .innerHTML() method.

I also check out the blog post on Stack Snippets being introduced, but there was no information there either.

So my question is: What is the best way to display data to the user when using a Stack Snippet?

@FrédéricHamidi I forgot about that, I don't see it too often in Stack Snippets! — Kaspar Lee
– Kaspar Lee, Commented Apr 14, 2016 at 8:23
related MSE post: meta.stackexchange.com/questions/239706/… — rene
– rene, Commented Apr 14, 2016 at 8:28

Travis J · Accepted Answer · 2016-04-14 22:08:43Z

It just depends on the question.

Sometimes the issue is page structure, in which case showing the properly formed structure is relevant and doesn't need a log or alert.

Sometimes the issue is related to object or array parsing or creation and then logging starts to make more sense, alert doesn't particularly work here as it implicitly calls .toString() and often just shows [Object object]; using JSON.stringify(obj) and writing it to the document is also an option.

Sometimes the issue is related to an algorithm in which case it is still going to be rather similar to the previously stated situation.

Overall, there is no explicit "best practice" for displaying output in a Stack Snippet so long as it conveys the use of the shown script to the question asker in a way that they can understand.

As shown in comments, there is a post on MSE about including a logging utility inside of the snippet, but there hasn't been any progress for some time on that front - or even much attention aside from a few diehards.

tl;dr; It depends. Regardless of where the output goes, if it is clear to see what is happening then there shouldn't be any problem.

"a few diehards" :(

canon
– canon

2016-04-27 03:03:16 +00:00
Commented Apr 27, 2016 at 3:03 — canon
– canon, Commented Apr 27, 2016 at 3:03

Community · Accepted Answer · 2017-03-20 10:32:11Z

I posted an answer on meta.SE which is related. Here's the relevant bit:

Why should we bother avoiding document.write() and alert()?

Both assume a browser environment even if we're demonstrating a purely javascript concept. We certainly don't want either method in the middle of what should be a node.js function.

Neither are what we're using to debug (I hope)

alert() is extremely intrusive.

document.write() shouldn't even be suggested to the novice user without a littany of caveats

Neither method offers robust serialization... forget serializing objects.

Our debugging messages deserve more love than that from our demo tool. We can do much, much better.

To that end, I strive to use the console logging methods but make them a little less retarded in the context of a visual demo. So, I'll generally add my own script for this:

<!-- console visualization; see https://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Here's a demo:

// sample values
var values = [1e100, "a", true, new Date(), function(){}, /(?:)/ig, undefined, null];

// log each value individually
values.forEach((v, i) => console.log("%i: %o", i, v));

// sample click handler
document.querySelector("button").addEventListener("click", function(e) {
  console.log("clicked: %o", this);
});

<!-- console visualization; see https://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<button>click me</button>

_{Here's the github project link: https://github.com/gh-canon/stack-snippet-console}

Stack Snippets - Using alert() vs document.write() vs console.log()

2 Answers 2

You must log in to answer this question.

Linked

Hot Network Questions

2 Answers 2

You must log in to answer this question.

Linked

Related