Interactive examples - testing, please!

In the last few months we’ve been working on an “interactive editor” feature for CSS and JavaScript reference pages on MDN. This will show the effect of some JS, or a CSS property, and let the reader edit the code and see the result directly, without having to open CodePen or JSFiddle in a new tab.

We’re close to starting a beta test for this thing, but before that I’d love it if a few people could try the editor out and file bugs.

You can see a few example pages here:

JS:
https://interactive-examples.mdn.mozilla.net/pages/js/array-concat.html
https://interactive-examples.mdn.mozilla.net/pages/js/array-reduce.html
https://interactive-examples.mdn.mozilla.net/pages/js/array-push.html

CSS:
https://interactive-examples.mdn.mozilla.net/pages/css/background-color.html
https://interactive-examples.mdn.mozilla.net/pages/css/background-size.html
https://interactive-examples.mdn.mozilla.net/pages/css/transform.html
https://interactive-examples.mdn.mozilla.net/pages/css/filter.html
https://interactive-examples.mdn.mozilla.net/pages/css/box-shadow.html

(Ultimately they’ll be embedded in the existing MDN pages for these functions and properties.)

Right now we are most interested in functional bugs: things you tried to do that behaved weirdly or brokenly.

Please file bugs here: https://github.com/mdn/interactive-examples

Thanks!

1 Like

Looks good :+1:

I get an error in the FF56 console which is to do with the test domain

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://developer.mozilla.org’) does not match the recipient window’s origin (‘https://interactive-examples.mdn.mozilla.net’).

I get the same error on Firefox Nightly 57.
Also I tried to add a console.log(123) but wasn’t working, only when I cleaned all the code and left this one I got the console.log

The view for CSS is amazing!

Yeah, the CSS ones don’t work. They spit the postMessage error to console and nothing happens when you try to press keys, either. In fact, I can’t even use browser keyboard shortcuts like Cmd-W to close the tab.

They all look magnificent though!

Sheppy

This is a recent regression, I filed a bug.

Hi all. I’m helping with MDN docs and was asked to test the Interactive Editor by @wbamberg.

I’m playing around with the editor; testing out exisiting code examples etc and in general l really like it! Great work :slight_smile:

While using it to try out some of the MDN examples I stumbled on what I think is a bug:

It seems to be a little intermittent, but on Firefox 55 and Chrome 61 (Mac OS) - when copying all text within the editor (Command/Ctrl+A) and pasting text from the clipboard in, I sometimes lose the line numbers on the left of the editor window. This leads to unexpected behaviour when deleting from the first character position on the line. I don’t imagine this is a big deal, but thought I woudl mention.

I’m using this version https://interactive-examples.mdn.mozilla.net/pages/js/array-push.html

Can attach a screencap gif of the issue if that’s useful. Also happy to raise issues on the github repo. Just let me know! :slight_smile:

I grabbed the latest version from github (https://github.com/mdn/interactive-examples) and was trying out the recently added multiple console.log support locally - a worthy addition I think, as it will give us more flexibility with examples.

I tried out the following code:

var fruits = ['Apple', 'Banana'];

console.log(fruits);

fruits.push('Orange');

console.log(fruits);

which when run, comes back with:

Apple,Banana,Orange
Apple,Banana,Orange

I was expecting output more like:

["Apple", "Banana"]
["Apple", "Banana", "Orange"]

So there’s a couple of things here:

  1. It looks like multiple console logs can produce unexpected results.
  2. (A question) When we output the contents of an array should the editor output show square brackets and quotes?

Hope this is helping and that I am posting in the right place.

That is interesting behaviour. Thanks for testing Mark. I would say, go ahead and create a bug for this, as well as the previous comment regarding the line numbers. Prismjs is not really meant to be an editor so, we are running into some edge cases here where it does not always behave as we would want/expect.

No problem Schalk. Happy to file bugs.

Just to double check - bugs and issues should be filed on the github repo?

Yes, that would be the place. Thanks again