Interactive editors in beta

MDN
#1

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 an online editor in a new tab.

We’re ready to start beta testing this feature. We’d love it if you gave it a try, and told us what you think.

We’re actually running the beta test mostly as an A/B test. Six pages - three JavaScript and three CSS - are included:

When a user who’s logged in visits one of these pages, they see the old page. When a non-logged-in user visits one of these pages, they are placed in either the control group “a” or the experiment group “b”, with a 50% probability of each. Users in the control group see the old pages, and users in the experiment group see the new ones, and can play with the editor.

The editor also links to a survey where users can tell us what they think of it.

If you just want to see the new pages, you can force MDN to show you them by including a query parameter in the URL, like this:


If you try out the pages, please let us know. Fill in the survey, tweet us, comment in this Discourse thread, send us a message by carrier pigeon. And thanks for using MDN and helping us make it better!

8 Likes
#2

Just did only a little bit of testing, on the second link.

  1. Page loaded quickly on my connection.
  2. Reset script button worked as expected.
  3. Executed script worked as expected.
  4. Edited script worked as expected.

:slight_smile:
Greate work…Definitely a feature that I’ve been waiting for.

1 Like
#3

We’re all super excited about this feature. Some ongoing discussion about some details of priority of where to add it first and about certain layout issues, but the feature is going to be amazing! The team has done amazing work on it.

Sheppy

3 Likes
#4

Look great! Works well too.

One thing I am not sure I am a fan of is the slow fad-in of the results. Can we do instant and make have a new row with the latest results show up? This way it would work more like the existing JS console and also let you see previous runs.

1 Like
#5

Am I missing something here? The CSS editors seem to work but I can’t see any interactive editors on the JS pages. Probably me but just wondering. Thx

#6

Wow, I was just thinking about the possibility of combining contenteditable with Prism for CodeFlask.js project, and while I was thinking you guys were already developing it! Badass!

Do you have any plans of publishing the editor’s code on Github or something?

1 Like
#7

Looks very good! This is a very valuable feature :slight_smile:

1 Like
#8

Hey Rod,

If you go to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push?v=b do you then see the JS interactive editor?

#9

Indeed! You will find the project here: https://github.com/mdn/interactive-examples

#10

Wish I had that when I was starting to learn JS and CSS :slight_smile:
Glad to know that there will be an interactive editor the next time I need to learn some new JS or CSS thing.

2 Likes
#11

Thank you for your very kind comment Sato.

#12

This is very nice! I visit the mozilla documentation for JS alot and would love to see working examples everywhere for each piece of code.

What i do miss, is a “copy” button or some other type of “try this code” for examples below the first one provided… This way i dont need to copy and paste other examples on the same documentation page to try them out.

Regards

1 Like
#13

Playing around with parameters explains sometimes faster than reading all the text.Why it was not offered before? ;-).

1 Like
#14

Grrreat! One problem though is the editor seems to interact poorly with the Samsung s4 standard keyboard in fennec. I tried to type navigator. mediaDevices.getUserMedia({video: true}) but the editor kept erasing (bakspacing over) my words as soon as I entered any punctuation, braces, colons. I suspect the keyboard as it also added (in)conveniences like space after the first period.

1 Like
#15

I sadly got in the wrong group so I couldn’t play around with CSS Transform Editor
:frowning: T_T :frowning:
But I can tell that the JS console log is decent and well appreciated.
( that is the only thing I could play with :wink: )

But to hance discussion : I found that while fooling around searching for Editor

That is a nice feature you included some nice stuff in it (like z-index for :before & :after)

yeah I love what MDN does. Bye.

1 Like
#16

Great to hear some feedback from someone using it on a mobile device. Thanks jib. I will do some testing in this regard and see how we can make using the JS editor more seamless on mobile devices.

Btw, are you using the standard keyboard that comes with the stock Samsung S4 Android version or, are you using something like gBoard? Thank you in advance.

#17

I wanted to try it right away. :slight_smile: Yes I’m using the stock “Samsung keyboard”, but under “Samsung keyboard settings” I have “Keyboard Swipe” set to “SwiftKey Flow”. That seems to be the culprit. When I turn that off the problem goes away.

#18

@JamesWeb, as far as I know, whichever bucket you are in, you can always get the versions that contain the editors by appending the “v=b” URL parameter, like: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color?v=b.

I wonder why you see the editors for the JS pages but not the CSS ones, that shouldn’t happen as far as I know.

Yes, the box shadow generator is very nice. There are a few other pages like this in MDN, that are more full-featured, feature-specific tools. I’d like a way for us to make them generally more visible in MDN - they can be hard to find at the moment IMO. Also to keep the source code in GitHub, rather than embedded in the Wiki page :scream:.

1 Like
#19

@wbamberg as far as i kbow Github has an url to get the raw file code.
So either you could Ajax or PHP ( file_get_contents($magicUrl); ) .

? Not sure if I understood your sentence correctly about github.

Maybe i lost my way on’finding the live editor in CSS Transform i’ll try hacing a check later if able to.

EDIT:
I did check again with ?v=b i can see it although without that GET parameter I can’t.
What I see i strict equivalent of ?v=a if that helps you and if that GET parameter exists in any dimension of reality.

Bye bye.

#20

Very nice. I stared using Mozilla browser, now Firefox, for web development 16 years ago and never leave it. You are great.

1 Like