Review UI and UX for JS and CSS examples about interactive-examples

[schalkneethling]

Some existing issues that relates to this overall goal

• #102
• #101
• #100

[schalkneethling]

Open discussion:

#73

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

comment: #73 (comment)

comment: #73 (comment)

Open discussion:

#71

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.

There has been some comments made on the above, but a consensus has not yet been reached.

Open discussion:

#68

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.

There has been some discussions around this, but this will be refined as part of the full UI/UX review.

[stephaniehobson]

I think #73 and #68 have been resolved.

Error state communication still isn't perfect :/

[wbamberg]

Error state communication still isn't perfect :/

I really like the arrow to link code to output. I think the orange rectangle is not very obvious to indicate errors, would a red cross be better?

[schalkneethling]

I really like the arrow to link code to output.

The only time it is a little cumbersome is when the layout switches to be stacked, as apposed to side by side.

I think the orange rectangle is not very obvious to indicate errors, would a red cross be better?

After out last discussion I believe we wanted to move away from red but yes, perhaps a yellowish cross?

[schalkneethling]

Feedback is being collected here: https://github.com/mdn/interactive-examples/wiki/Feedback

[schalkneethling]

Seeing that we have had a review by The Brigade, and implemented the suggestions, this is good to close.