Interactive editors in beta

Am I missing something here? The CSS editors seem to work but I can’t see any interactive editors on the JS pages. Probably me but just wondering. Thx

Wow, I was just thinking about the possibility of combining contenteditable with Prism for CodeFlask.js project, and while I was thinking you guys were already developing it! Badass!

Do you have any plans of publishing the editor’s code on Github or something?

1 Like

Looks very good! This is a very valuable feature :slight_smile:

1 Like

Hey Rod,

If you go to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push?v=b do you then see the JS interactive editor?

Indeed! You will find the project here: https://github.com/mdn/interactive-examples

Wish I had that when I was starting to learn JS and CSS :slight_smile:
Glad to know that there will be an interactive editor the next time I need to learn some new JS or CSS thing.

2 Likes

Thank you for your very kind comment Sato.

This is very nice! I visit the mozilla documentation for JS alot and would love to see working examples everywhere for each piece of code.

What i do miss, is a “copy” button or some other type of “try this code” for examples below the first one provided… This way i dont need to copy and paste other examples on the same documentation page to try them out.

Regards

1 Like

Playing around with parameters explains sometimes faster than reading all the text.Why it was not offered before? ;-).

1 Like

Grrreat! One problem though is the editor seems to interact poorly with the Samsung s4 standard keyboard in fennec. I tried to type navigator. mediaDevices.getUserMedia({video: true}) but the editor kept erasing (bakspacing over) my words as soon as I entered any punctuation, braces, colons. I suspect the keyboard as it also added (in)conveniences like space after the first period.

1 Like

I sadly got in the wrong group so I couldn’t play around with CSS Transform Editor
:frowning: T_T :frowning:
But I can tell that the JS console log is decent and well appreciated.
( that is the only thing I could play with :wink: )

But to hance discussion : I found that while fooling around searching for Editor

That is a nice feature you included some nice stuff in it (like z-index for :before & :after)

yeah I love what MDN does. Bye.

1 Like

Great to hear some feedback from someone using it on a mobile device. Thanks jib. I will do some testing in this regard and see how we can make using the JS editor more seamless on mobile devices.

Btw, are you using the standard keyboard that comes with the stock Samsung S4 Android version or, are you using something like gBoard? Thank you in advance.

I wanted to try it right away. :slight_smile: Yes I’m using the stock “Samsung keyboard”, but under “Samsung keyboard settings” I have “Keyboard Swipe” set to “SwiftKey Flow”. That seems to be the culprit. When I turn that off the problem goes away.

@JamesWeb, as far as I know, whichever bucket you are in, you can always get the versions that contain the editors by appending the “v=b” URL parameter, like: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color?v=b.

I wonder why you see the editors for the JS pages but not the CSS ones, that shouldn’t happen as far as I know.

Yes, the box shadow generator is very nice. There are a few other pages like this in MDN, that are more full-featured, feature-specific tools. I’d like a way for us to make them generally more visible in MDN - they can be hard to find at the moment IMO. Also to keep the source code in GitHub, rather than embedded in the Wiki page :scream:.

1 Like

@wbamberg as far as i kbow Github has an url to get the raw file code.
So either you could Ajax or PHP ( file_get_contents($magicUrl); ) .

? Not sure if I understood your sentence correctly about github.

Maybe i lost my way on’finding the live editor in CSS Transform i’ll try hacing a check later if able to.

EDIT:
I did check again with ?v=b i can see it although without that GET parameter I can’t.
What I see i strict equivalent of ?v=a if that helps you and if that GET parameter exists in any dimension of reality.

Bye bye.

Very nice. I stared using Mozilla browser, now Firefox, for web development 16 years ago and never leave it. You are great.

1 Like

Very Nice!!! Thanks.

It gets more awesome and awesome :slight_smile: love it :heart:

These interactive examples will likely spread through more and more of the content over time. Details about exactly where they’ll be used and where they won’t are not decided yet. We will have that discussion once the first phase of getting things in place is finished.

Sheppy

Very good :heart_eyes: