mdn / interactive-examples Goto Github PK
View Code? Open in Web Editor NEWHome of the MDN live code editor interactive examples
License: Creative Commons Zero v1.0 Universal
Home of the MDN live code editor interactive examples
License: Creative Commons Zero v1.0 Universal
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.
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.
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
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.
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:
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
Do not use eval
for JS code execution. Function
gives us all we need, and does not have the security problems of eval
The arrows look great in side-by-side layout, but strange in top/bottom layout. We should probably hide them in this case.
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.
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)
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.
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.
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).
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.
Investigate the amount of effort involved in switching the JS examples over to using Prismjs as apposed to CodeMirror.
The main benefits are:
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.
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.
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.
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).
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.
Like we do on the JS examples, we should wait until the user makes an edit to fade in the reset button.
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.
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):
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!
I don't see this behavior in Chrome.
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?
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.
In the side-by-side view, it looks odd that the example element is at the top with a bunch of empty space below:
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.
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?
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.
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
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 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.
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.
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.
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.
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.
[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:
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:
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
STR:
Now you get something like this: http://imgur.com/a/vHhiL
Now if I click "Reset", this extra line is not removed.
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.
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?
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:
https://developer.mozilla.org/en-US/docs/User:schalkneethling:push
If that is the case, we should probably:
iframe
be a lot less tall.The CSS is a bit more tricky perhaps or, maybe we can do the same. Thoughts @stephaniehobson @wbamberg
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.
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.
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:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.