Js live samples simplified

MDN
#1

Hi,
In the javascript reference docs it’s quite common that no html/css is involved, we only want to demonstrate some pure js functionality.
In this case embedding html and css code is simply waste of space.
On the other hand if we don’t do that then the user doesn’t see the result, so it is not so “live” anymore.
Lot of examples look like:
`
let a = “text”;

a;
`
It works fine in a real console but the document of the iframe remains empty, so not very useful here.
In my opinion the EmbedLiveSample macro could be enhanced in a way to display the result of the code instead of showing an empty iframe.
Overriding console.log would be an option.

What do you think?

#2

I’d like to have a version of EmbedLiveSample that would automatically wire up a console.log() override and route it to the iframe used for the sample.

Then we could do something like

Example

function isCircleAreaTooBig(radius, maxArea) {
  let area = Math.pi * (radius*radius);
  return area > maxArea;
}

console.log("Is area of circle with radius 5 too big?");
console.log(isCircleAreaTooBig(5, 30) ? "Yes" : "No");

{{EmbedConsoleSample(“Example”)}}

#3

Definitely.
It can also make sense if we do have HTML as well.
An extra argument like overrideConsoleLog would do it.
How can we make it happen?

#4

Well, the EmbedLiveSample macro has gotten over-complicated and messy. I would probably create something new to migrate to for this stuff, ideally taking a dictionary-style options object instead of a bunch of parameters.

Then you could do something like

{{NewEmbedLiveSample({sampleId: “sample-id”, height: “120px”, allowedFeatures:“camera”, showConsole: true})}}

Syntax might be off a tad but that gets the point across.

1 Like