Live examples - opening codepens/jsfiddles in the same tab is annoying?

[Chris Mills]

Hi all,

A good point was just made (by gotoprototype) on the #mdn mailing list - our live samples have those “Open in codepen” and “Open in jsfiddle” buttons at the top of them by default, but they open in the same tab by default. This is annoying, especially as you can’t seem to use Ctrl/Cmd/middle click to open them in a separate tab.

It would be better if they opened in a new tab by default.

There’s an example at the bottom of the following section:

https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code

What do we think? Should we change this?

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

[Chris Mills]

Done!

Stephanie, we’d love your thoughts on this.

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

> On 29 Jun 2016, at 11:37, Jean-Yves Perrier <jype...@gmail.com> wrote:
>
> cc/ Stephanie for her insight there.
>
> (I think it is a good idea)

>> _______________________________________________
>> dev-mdc mailing list
>> dev...@lists.mozilla.org
>> https://lists.mozilla.org/listinfo/dev-mdc
>> MDN contributor guide: http://bit.ly/ContributorGuide
>> Doc project Trello board: https://trello.com/b/HAhl54zz/status
>
>
>
> --
> Jean-Yves Perrier
> Senior St. Project Manager, Developer Documentation / MDN
>

[Anthony Maton]

Hello,

As a standard user (I love that javascript doc), I think it would be a
great improvement.

[Sebastian Zartner]

I totally agree on changing that. I just missed to raise this so far.
So, thanks for bringing this up, Chris/gotoprototype!

Sebastian

[Jeremie Patonnier]

+1

Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>

[Stephanie Hobson]

Hi All,

I agree it would be much better to have them open in new tabs unfortunately
the buttons are not links but submit buttons for forms and we were not able
to find a way to make the post data transmit properly and get it to open in
a new tab :(

S.

[Eric Shepherd]

It's also worth pointing out that CodePen now offers support for inline
embedding of pens (see http://codepen.io/embeds), so you can let people
tinker with (and see running) the code in-place.

> I agree it would be much better to have them open in new tabs unfortunately
> the buttons are not links but submit buttons for forms and we were not able
> to find a way to make the post data transmit properly and get it to open in
> a new tab :(

--

Eric Shepherd
Senior Technical Writer
Mozilla Developer Network <https://developer.mozilla.org/>
Blog: https://www.bitstampede.com/
Twitter: http://twitter.com/sheppy
Doodle: http://doodle.com/the.sheppy

[Janet Swisher]

Embedding them would be very cool, and would provide a capability that's
offered by popular webdev tutorial sites.

On 6/29/16 9:09, Eric Shepherd wrote:
> It's also worth pointing out that CodePen now offers support for inline
> embedding of pens (see http://codepen.io/embeds), so you can let people
> tinker with (and see running) the code in-place.
>
>
>> I agree it would be much better to have them open in new tabs unfortunately
>> the buttons are not links but submit buttons for forms and we were not able
>> to find a way to make the post data transmit properly and get it to open in
>> a new tab :(

--

Janet Swisher <mailto:jREMOVE...@mozilla.com>
Mozilla Developer Network <https://developer.mozilla.org>
Community Strategist

[Eric Shepherd]

As I recall, the view in CodePen/view in JSFiddle buttons are inserted
by the server side rather than from within the EmbedLiveSample macro
itself, which complicates attempting to do this. I would love to see
some thoughts on designs for how this could work without making a mess
of things, because it would be awesome.

> Embedding them would be very cool, and would provide a capability
> that's offered by popular webdev tutorial sites.