Adds next iteration of the HTML interactive editor #576
Conversation
|
@stephaniehobson @alexgibson @jpetto ~ If either of you have time to code review this PR it would be much appreciated. Thanks! |
|
I think this looks really good. The only thing I think we need before user testing is to run the example on page load (like the CSS examples) rather than wait for the user to press "Run" (like the JS examples). (But then I wanted to do that for the JS as well, and it just confused people. But still this feels different.) I'm unsure about both the positioning and the wording of the "Run" button. I might call it "Update", but I'm not sure where we could move it to that would be better. But we can test this stuff, anyway. I've done some testing of the JS and CSS examples in this branch, and nothing seems to be broken :). I don't think we need a JS tab for user testing (we probably don't need it for the majority of the HTML examples). |
wbamberg
left a comment
There was a problem hiding this comment.
As per my comment, but putting it in a review:
I think this looks really good. The only thing I think we need before user testing is to run the example on page load (like the CSS examples) rather than wait for the user to press "Run" (like the JS examples).
(But then I wanted to do that for the JS as well, and it just confused people. But still this feels different.)
I'm unsure about both the positioning and the wording of the "Run" button. I might call it "Update", but I'm not sure where we could move it to that would be better. But we can test this stuff, anyway.
I've done some testing of the JS and CSS examples in this branch, and nothing seems to be broken :).
I don't think we need a JS tab for user testing (we probably don't need it for the majority of the HTML examples).
|
@wbamberg updates made. Thx! |
wbamberg
left a comment
There was a problem hiding this comment.
Thanks @schalkneethling , looks good to me!
This reverts commit 432e90b.
This reverts commit 432e90b.
This reverts commit 432e90b.
This introduces the next iteration of the HTML examples. With this update both the HTML and CSS are displayed as a tabbed interface. This allows users to experiment by changing both the HTML as well as the CSS and interactively run the code to see the output.
There are some things that still needs to be done. Things such as documenting how to contribute HTML examples, deciding if we want to also explore a non-tabbed UI(this should be as simple as switching out the base template used), whether we want to introduce a JS tab at this stage or, stick with just HTML and CSS.
With all of that said, this is good for review and merge if all looks good. The rest can be handled iteratively. We can then also get this on a demo page on MDN to see how it behaves in its final destination.
Let me know your thoughts @wbamberg