There has been some feedback from the SF All Hands that we have discussed and a general review needed of the current JS and CSS editor. This relates to interactivity, better blending with the new MDN overall brand, enhancements to the editors, and the output. This issue is to collect all of the information and spin of separate issues for implementation.

Currently CSS code example have either a red or yellow border on the right.

Red indicates invalid CSS
Yellow indicates the currently active example

To aid in the overall user experience and a generally better UI, we need to:

1. Move above mentioned borders to the left
2. Change the yellow border to green
3. Add a default gray border to inactive examples

-> http://imgur.com/a/LGnP2

I think the overflow should be hidden, and they should get a horizontal scrollbar.

But also I think we should try to avoid long lines: in this case, for example, we could have something like:

transform: scale(2, 0.5) rotate(50deg);

That still makes the point but is much shorter.

Also, in these cases the "Reset" button obscures the end of the line. I don't think this is as much of a problem, but again we should design the content to try to avoid this.

If I load, say, https://developer.mozilla.org/en-US/docs/User:schalkneethling:transform and press Tab, the last item gets a dotted grey border, as if it's selected, and its Reset button appears.

If I press Tab after having selected a few different rows, then their Reset buttons appear: http://imgur.com/a/47YZm.

We should probably think about what we want Tab behavior to be. Ideally it feels like it should:

• focus the Reset button in the current row, if that row has an active reset button
• or select the next row (as if you had clicked to, so you can start typing)

In order to determine how/if users are using the interactive samples we need to instrument the live code samples. This issue tracks the instrumentation of the examples as well as clearly defining what needs to be instrumented.

With the CSS examples, if I change the initial contents of row A, the Reset button appears. If I switch to a different row, the button disappears - this is as expected. But if I then switch back to row A, the Reset button does not reappear - it's now impossible to get back to the original without reloading the page.

Trying out: https://developer.mozilla.org/en-US/docs/User:schalkneethling:transform

If I click one of the examples, then reload the page, the cursor is placed oddly: visually it appears between the currently selected item and the previous item. Logically it appears on the line before the selected example. If you just start typing, you see default-font text.

I've attached a GIF to try to explain: http://imgur.com/a/5AWvy.

The cursor should probably be initially placed at the end of the selected row. I don't think it should be possible to put the cursor in the place shown in the GIF.

[Schalk]

Do we want to do feature detection for certain examples and only show those that are supported by the browser? Is there a baseline we want to define and say, if the feature does not meet our baseline, do not add it or, is there another way you would suggest?

[Stephanie]

The samples are meant to showcase the technology. For example: I would not include the -ms- prefix to make a flexbox demo work in IE 10… I would suggest we:

• Show a plain text version of the example (I assume we have a plain text version already? since we need to serve something to our users with js disabled)
• Put a small note beneath it that their browser does not support the feature. Thoughts?

-> http://imgur.com/a/j7oyY

Investigate the amount of effort involved in switching the JS examples over to using Prismjs as apposed to CodeMirror.

The main benefits are:

1. Lighter code base
2. Consistent theming for syntax highlighting
3. Improved maintenance as we drop one dependency

If you select all the text in a row and delete it, the whole row has gone and you can't reset: http://imgur.com/a/hdK19

I don't think this should be possible.

Also, if you position the cursor at the start of the row and press delete, the row gets smaller: http://imgur.com/a/Ns8eq

I don't think this should be possible either (the rows should just be fixed one-line things IMO).

If I edit an example, then press Reset, the example loses some of its padding, which makes it appear misaligned: http://imgur.com/a/UeGlq

I think this is because the reset example loses its <code> tags: http://imgur.com/a/9EJ6g

Note that e.g. codepen.io detects this kind of thing. I think they take a heuristic approach: like, it runs the example for a couple of seconds, then kills it if it is still running. I think this would be more robust than trying to detect all the ways someone could get into this situation.

It's great to have the transition when you click "Run", to signal that something is happening. But it's being applied to the whole output box, not just the output. So the whole box flickers when you press "Run". I think it would be better to apply the transition only to the text in the box.

Currently generated pages are pushed to a gh-pages branch to be served via Github. This will not scale well so, we need to have a S3 bucket that these pages can be pushed to via Travis-CS

Can the reset button fade out again after it's clicked until the user makes another edit? It seems like a good way to signal to the user that it has done its job.

Looking at https://developer.mozilla.org/en-US/docs/User:schalkneethling:transform

It's quite jarring that the caption "Try editing..." is a different font to the default font for MDN. I think maybe the black on white is a bit too strong in the context of the page design. since the page design is moving, it's hard to know what to do here, but wherever we end up the styling for the editor should work with the page design.

CSS examples will work much better with a side by side display. This issue tracks the implementation of side by side display for CSS examples with a fallback to examples on top, output at the bottom.

Looking at https://developer.mozilla.org/en-US/docs/User:schalkneethling:push

The code sample has "logger.log()" not "console.log()". Is there a reason for this? I'd have thought console would be more obvious.

When we were working on these prototypes, @stephaniehobson came up with a design for the "Run" button where it was on the left of the output box, with an arrow pointing to the output box. You can see it in the second screenshot here: https://docs.google.com/document/d/1XabiVMF7Dng7nOzK3XLfvMn6JTEPM5KuFyUsMZbmkwM/edit.

I ever got around to implementing this, but we should.

Currently each time you call console.log it overwrites what is currently in the output div. For JS examples that involve loops of any kind where one would want to print more than one result, the user will only see the last log

For example: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Improve the logger so that it can write out multiple results into the same output.

If I click a row and edit the CSS, introducing an error, then click in a different row, then the row that had the error keeps its white background, so now there are two highlighted rows:

http://imgur.com/a/tgNhy

I don't think it should do this: there should only be one highlighted row at any time, and the "warning" icon should be hidden for non-highlighted rows

http://imgur.com/a/e9LRY

It's great that you can tab through the rows, but tabbing from a row to the next places the cursor on the line before the CSS in the row after next. If you then start typing, you get unformatted text (although it is applied as CSS):

http://imgur.com/a/KAzE8

This function is completely out of hand now ;) I need time to refactor it so we have less event handlers and definitely not adding event handlers inside loops.

-> http://imgur.com/a/viUM3

Looking at https://developer.mozilla.org/en-US/docs/User:schalkneethling:push, the "Run" button doesn't "press" when you press it. Do we think it should?

As I wrote up the brief for Brigade I noticed that, especially the JavaScript example, look pretty odd when JS is disabled.

Here is an example of the CSS example:

Couple of questions on this then:

1. Will the JS interactive example, and thus the static fallback replace the syntax block? Like for example here?

https://developer.mozilla.org/en-US/docs/User:schalkneethling:push

If that is the case, we should probably:

1. Have the default height of the iframe be a lot less tall.
2. Add the blue side border to the output area as it is on the current Syntax example
3. Add a Syntax heading that will be displayed as part of the fallback

The CSS is a bit more tricky perhaps or, maybe we can do the same. Thoughts @stephaniehobson @wbamberg

In the side-by-side view, it looks odd that the example element is at the top with a bunch of empty space below:

http://imgur.com/a/znj6h

I am getting an error while starting the node server for the interactive examples. My node version is 5.0.4 still my http-server is not working.

Do not use eval for JS code execution. Function gives us all we need, and does not have the security problems of eval

From https://developer.mozilla.org/en-US/docs/User:schalkneethling:transform.

If you enter some invalid CSS, it shows a yellow "warning" triangle, but this appears underneath the "Reset" button, so you can't see it.

Maybe instead of the triangle, we could change the color of the (currently yellow, possibly green in future) border-right? To red? That would save us some space in the row, which would be handy.

I tried embedding some of them in MDN pages, and noticed a few things.

For example, compare:
https://developer.mozilla.org/en-US/docs/User:wbamberg/Examples_on_top/filter_old
https://developer.mozilla.org/en-US/docs/User:wbamberg/Examples_on_top/filter_new

• the examples don't get any border at the top
• the old version is more compact
• the help text "Try editing the selected examples, or select a different example below:"
  should have a style that matches the page.

I tried embedding some of the new ones, for example: https://developer.mozilla.org/en-US/docs/User:wbamberg/Examples_on_top/animation_new

• when I load the page initially, the cursor ends up in a weird place, right under the "Try editing the selected examples, or select a different example below:" line.
• you can see (I hope you agree :) that the big comment about slidein is quite distracting
• the lines are too long for the content column, so we get horizontal scrollbars

When there aren't enough options to fill the vertical space, there's some empty space under them: http://imgur.com/a/uOFcO

It would be great if we could automatically adjust the height of the options so they fill the space: http://imgur.com/a/6luuX

As we discussed, it would be fine to make this a progressive enhancement using flexbox.

When JavaScript is disabled we want to simply show the code for the examples without the output section as static text that is not colour coded.

With the JS examples, there was a transition applied to the output when you click "Run" (see e.g. https://mdn.github.io/js-examples/editable-samples/editor/pages/array-push/). This was to show people that something is happening when you click "Run" even when you haven't changed the code. Otherwise we found people just kept clicking "Run" expecting "something to happen" - of course something is happening, but you can't see it.

I don't think the comments are always worth the space the occupy in pages like https://mdn.github.io/interactive-examples/pages/css/animation, especially where they all say the same thing. I feel that the comment showing the definition of slidein is not worth the space it consumes either.

Looking at https://developer.mozilla.org/en-US/docs/User:schalkneethling:push

If you load the page, the start typing without clicking in the box, strange things happen. This is from typing "12345": http://imgur.com/a/TcmMH

Also, the arrow keys don't work in this situation, and also, the row isn't highlighted.

If I move the cursor, then put it back there, this behavior goes away.

The rows are taller, and the text is not vertically centred in them.

https://mdn.github.io/interactive-examples/pages/css/filter
https://mdn.github.io/css-examples/editable-samples-2/pages/filter/

Actually, it looks like they have a blank line at the start. Is this intentional?

In SF, @callahad suggested we should have transitions for changes in the CSS editor. I tried this out: http://imgur.com/a/iYFel.

Fun, or annoying?

This also came up in SF: people we confused about the Reset button and suggested it might be clearer if the Reset button was either hidden or disabled if the contents of the editor had not been changed. This might be a signal about what the button does.

I'm not sure if hiding or disabling is better.

STR:

• load https://developer.mozilla.org/en-US/docs/User:schalkneethling:transform
• copy some text (from anywhere in the page, apparently)
• place the cursor at the end of a row, and paste

Now you get something like this: http://imgur.com/a/vHhiL

Now if I click "Reset", this extra line is not removed.

We have some interest from the greater community out there to contribute to this project, and this is great. Specifically want to call out @Satyam-Bhalla

This issue is to create a wiki page with clear documentation on how to contribute, and what would be needed.

All syntax highlighting on MDN should match.

Currently the CSS examples and MDN's code examples use Prism with the default theme.

Two questions need to be resolved to make all 3 match:
Can we switch the JS examples to use Prism? (Are there technical reasons it does not use it currently?)
What do we want all 3 to look like? (Will and I liked Code Mirror's "eclipse" best of the Code Mirror themes)

In my Firefox Nightly, the Reset button does what I want when I click it, but it doesn't get the "pressed" look when I click it. Also, if I double-click it, I get handles and can resize it!

http://imgur.com/a/h9f0j

I don't see this behavior in Chrome.

Like we do on the JS examples, we should wait until the user makes an edit to fade in the reset button.

The arrows look great in side-by-side layout, but strange in top/bottom layout. We should probably hide them in this case.

The buttons in the JS and CSS examples should match.

I suggest the following styles for all reset buttons:

background-color: #fff;
border: 2px solid #9b9b9b;
color: #4c4c4c;
font-size: 14px;
line-height: 1;
padding: 3px 5px;

And the following change for the run button in the JS examples:

border: transparent;
background-color: #29627e;
color: #fff;

This gives the buttons roughly the same proportions as the redesign ones but makes them a bit smaller to fit better.

When a JS or CSS feature is not supported by the current browser we want to instead fallback to a static example. Need to decide whether we want to include a lib to handle the feature detection or, create a minimal lib that handles only known cases.

For this iteration, it was decided that if one of the examples is not supported, we fallback to static examples.

The "invalid CSS" thing doesn't seem to work properly any more. For example, if you visit the original https://mdn.github.io/css-examples/editable-samples-2/pages/filter/ and edit a function so it's misspelled, you get a little warning in that row. It's displayed immediately, and hidden if you select a different row (but is shown again if you go back to the broken row). If you do the same in https://mdn.github.io/interactive-examples/pages/css/filter, the warning seems to be shown immediately in the first row, but not in the broken row (but is shown in the broken row if you go back to it).