MDN team is working for quite a long time to bring the Interactive Editor for the features of CSS and Javascript reference pages on their site. The interactive editor brings the functionality of showcasing the effect of the JS and some of the CSS property without opening an online editor in a new tab. Using this functionality they are allowing the readers to edit the code directly on the reference page and see the results directly on the page.
The team has started the beta testing of this feature and they also want us to try the same. Here are the Six (6) links of the reference pages provided by the MDN team to test this functionality. Out of the six pages, 3 are for JS and 3 are for CSS.
- Javascript – Array Push
- Javascript – Array Concat
- Javascript – Array Reduce
- CSS – Background-Color
- CSS – Transform
- CSS – Box-Shadow
A logged in user to their site will see the old page; however, when a non-logged-in user visits one of these pages, they are either placed in control group “a” or the experimental group “b”. The probability is 50% for each. User who fall into the control group will see the old pages, and users in the experiment group will see the new ones. Once the user land into the experiment group, they can play around with the editor.
The editor also links to a survey where users can tell the MDN what they think of it.
MDN has provided you with the option to forcefully open their experimental group page by including a query parameter in the URL, like this:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b
Please let the team of MDN know, that you have tried their Interactive Editor by filling out the survey provided at the end of the experimental page. You can also Tweet Them.
