Bug 1148743 - Add button to open samples in JSFiddle #3147

iakshay · 2015-03-29T13:03:56Z

Code to insert buttons using javascript.

    $('.sample-code-frame, .sample-code-table').parent().prepend(function() {
        return '<div><a class="button open-in-host" data-host="jsfiddle" data-section="' + 
        $(this).children('iframe').attr('id').substring("frame_".length) + '">Open in JSFiddle</a>'
        + '<a style="margin-left:10px" class="button open-in-host" data-host="codepen" data-section="' + 
        $(this).children('iframe').attr('id').substring("frame_".length) + '">Open in Codepen</a></div>';
    });

stephaniehobson · 2015-03-30T16:56:25Z

We can add a line to forms.styl which adds the margin to any button after the first button and then we can localize it for right to left display as well.

.open-in-host + .open-in-host {
bidi-style(margin-left, ($grid-spacing / 2), margin-right, 0);
}

darkwing · 2015-03-30T17:35:22Z

media/js/wiki.js

+
+    function create_jsfiddle(title, htmlCode, cssCode, jsCode) {
+       var $form = $('<form method="post" target="_blank" action="https://jsfiddle.net/api/post/library/pure/">'
+            + '<input type="hidden" id="html" name="html" />'


Do we need any of these id attributes? These seem unnecessary. Instead of $form.find('#html'), can you do $form.find('input[name=html')?

I thought id would be better performance-wise, although in this case since we have very few elements - it shouldn't make much difference.

stephaniehobson · 2015-03-30T20:56:28Z

Wanted to add: super excited to see a PR for this. It's a feature everyone has been talking about for a while!

iakshay · 2015-03-31T07:56:46Z

Good for another review :)

I also made minor change in EmbedLiveSample macro which I have posted here

iakshay · 2015-03-31T17:28:57Z

Do we want to insert the buttons using optimizely?

groovecoder · 2015-04-02T14:16:10Z

IIRC, @openjck wanted to use optimizely to change the order of the buttons. So we may not need to insert them via optimizely, but we may run an Optimizely experiment that re-orders them for 50% of viewers.

openjck · 2015-04-02T14:53:10Z

Having had some time to think about it, I would recommend just measuring clicks with Google Analytics. Switching the order of the buttons with Optimizely (or switching between showing one and showing another) would be bad for habituation.

If one button is clicked way more than the other, we could decide to support only that service. If the buttons receive similar numbers of clicks, we could decide to support both services. I don't expect button placement will have a very significant effect on number of clicks.

edit: Ah, but of course Optimizely and Waffle bucket users only once and keep users in their buckets between reloads. (At least in theory. I notice that the current homepage heading Waffle doesn't persist buckets between reloads.) In that case, we could use Optimizely to show one button or the other and measure which one gets more clicks. In that case, inserting the buttons with Optimizely probably would be the easier approach. That would mitigate the effect of any FOUCs.

I don't expect the numbers will be significantly different, but it wouldn't hurt to try it out.

groovecoder · 2015-04-02T15:31:16Z

If you'd like to try it out, go for it. For now, @iakshay - could we put this behind a waffle flag so we can merge and push it while @openjck decides (or not) to try out Optimizely?

stephaniehobson · 2015-04-02T16:30:06Z

media/stylus/base/elements/forms.styl

+
+.open-in-host + .open-in-host {
+    bidi-style(margin-left, ($grid-spacing / 2), margin-right, 0);
+}


Needs a line break at end of file (picky GitHub is picky).

stephaniehobson · 2015-04-02T16:34:17Z

All my comments have been addressed, thank you :) It would be nice if the sample code in the commit message was also updated.

openjck · 2015-04-02T16:48:47Z

I'm definitely up for doing an A/B test. I'll coordinate with @iakshay offline to get it going.

iakshay · 2015-04-02T18:00:48Z

Updated code to insert buttons
updated again

function create_buttons() {
    var section = $(this).find('iframe').attr('id').substring("frame_".length);
    return '<div style="margin-bottom:10px;"><button class="open-in-host" data-host="jsfiddle" data-section="' + 
    section + '"><i aria-hidden="true" class="icon-jsfiddle"></i> Open in JSFiddle</i></button>'
    + '<button class="open-in-host" data-host="codepen" data-section="' + 
    section + '"><i aria-hidden="true" class="icon-codepen"></i> Open in Codepen</button></div>';
}

$('.sample-code-frame').parent().prepend(create_buttons);
$('.sample-code-table').before(create_buttons);

iakshay · 2015-04-02T18:57:19Z

media/js/wiki.js

+            var $sample = $('<div />').append(sample);
+            var htmlCode = $sample.find('.brush\\:.html, .brush\\:.html\\;').text();
+            var cssCode = $sample.find('.brush\\:.css, .brush\\:.css\\;').text();
+            var jsCode = $sample.find('.brush\\:.js, .brush\\:.js\\;').text();


@darkwing Will these selectors match all our code sample snippets?

I have written selectors for the following 2 variations

// Case 1 <pre class="brush: js"></pre> // Case 2 <pre class="brush: js; highlight:[7]"></pre>

Also, I'm not sure if converting code to base64 is necessary.

I was wondering the same thing. What do you think, @darkwing?

It is not - see example in https://jsfiddle.net/zalun/mk29ttc2/

Will these selectors match all our code sample snippets?

12:09 <davidwalsh> I believe so
12:09 <davidwalsh> I think taht's right

openjck · 2015-04-08T16:45:01Z

How would you feel about writing the insertion code into the repository, so that we would run something like mdn.injectFiddleButton() and mdn.injectCodepenButton from Optimizely?

The code is non-trivial, so it makes sense for us to revision it. We also want to be sure that it stays synchronized with other changes happening in the codebase.

openjck · 2015-04-08T17:11:40Z

Maybe we could even add the buttons, but use display: none on them by default. That would be easier to maintain. We used the same approach in the A/B testing groundwork in #3142.

iakshay · 2015-04-08T18:57:44Z

I have created mdn.insertSampleButtons(sites). To insert the buttons you can refer this snippet

// insert JSFiddle button
mdn.insertSampleButtons(['jsfiddle']);
// insert JSFiddle and Codepen buttons
mdn.insertSampleButtons(['jsfiddle', 'codepen']);
// other order
mdn.insertSampleButtons(['codepen', 'jsfiddle']);

I can hide them by default, but this way you can experiment with order also :)

openjck · 2015-04-15T16:58:29Z

What would be a good page to spot-check this on? I'm having trouble finding pages that use .sample-code-frame or .sample-code-table.

Since this involves the live samples system, which @darkwing has done the most work with, I think it would be great to get his opinion too.

darkwing · 2015-04-15T18:04:04Z

media/js/wiki.js

+    });
+
+    function createSampleButtons(section, sites) {
+        var buttons = '<div style="margin-bottom:10px;">';


We shouldn't inline styles -- a CSS class should be created.

iakshay · 2015-04-15T21:37:52Z

@openjck - I modified the EmbedLiveSample macro to add those classes. Update macro is posted here

groovecoder · 2015-04-29T21:24:37Z

ping @darkwing - are you able to review this again?

groovecoder · 2015-05-08T16:22:28Z

@iakshay - are you able to waffle this?

iakshay · 2015-05-08T18:42:16Z

@groovecoder I'm not sure, how we waffle features client side. Do I just move the code to new file?

groovecoder · 2015-05-11T16:02:26Z

We use a django-waffle helper to create a window.waffle object. We use(d) it in demos/home.html and in ckeditor_config.js

openjck · 2015-05-15T18:31:48Z

Do we need to Waffle this? Even on this branch, the buttons need to be manually injected with JS.

darkwing · 2015-05-27T13:41:37Z

This does need to be waffled, yes.

zalun · 2015-06-09T12:18:01Z

any update?

darkwing · 2015-06-09T16:44:37Z

Superceded by: #3240

iakshay force-pushed the open-jsfiddle branch from d8916cd to 6dda163 Compare March 29, 2015 16:17

darkwing reviewed Mar 30, 2015
View reviewed changes

iakshay force-pushed the open-jsfiddle branch 2 times, most recently from 17ed6b2 to aad10d5 Compare March 31, 2015 07:47

iakshay force-pushed the open-jsfiddle branch from aad10d5 to 5206a27 Compare March 31, 2015 15:34

iakshay force-pushed the open-jsfiddle branch from 5206a27 to 852cc0c Compare April 1, 2015 07:01

groovecoder assigned openjck Apr 2, 2015

stephaniehobson reviewed Apr 2, 2015
View reviewed changes

iakshay force-pushed the open-jsfiddle branch from 852cc0c to 10d98f7 Compare April 2, 2015 18:38

Bug 1148743 - Add button to open samples in JSFiddle and Codepen

28217bf

iakshay force-pushed the open-jsfiddle branch from 10d98f7 to 28217bf Compare April 2, 2015 18:40

iakshay reviewed Apr 2, 2015
View reviewed changes

openjck added not ready and removed not ready labels Apr 7, 2015

openjck added the not ready label Apr 8, 2015

Bug 1148743 - Move code to insert buttons in wiki.js

3dce8f3

openjck removed the not ready label Apr 14, 2015

openjck assigned darkwing and unassigned openjck Apr 15, 2015

darkwing reviewed Apr 15, 2015
View reviewed changes

openjck added the not ready label May 15, 2015

darkwing mentioned this pull request Jun 9, 2015

Bug 1148743 - Open jsfiddle and CodePen for Samples #3240

Closed

darkwing closed this Jun 9, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug 1148743 - Add button to open samples in JSFiddle #3147

Bug 1148743 - Add button to open samples in JSFiddle #3147

iakshay commented Mar 29, 2015

stephaniehobson commented Mar 30, 2015

darkwing Mar 30, 2015

iakshay Mar 31, 2015

stephaniehobson commented Mar 30, 2015

iakshay commented Mar 31, 2015

iakshay commented Mar 31, 2015

groovecoder commented Apr 2, 2015

openjck commented Apr 2, 2015

groovecoder commented Apr 2, 2015

stephaniehobson Apr 2, 2015

stephaniehobson commented Apr 2, 2015

openjck commented Apr 2, 2015

iakshay commented Apr 2, 2015

iakshay Apr 2, 2015

iakshay Apr 2, 2015

openjck Apr 7, 2015

zalun Apr 8, 2015

openjck Apr 8, 2015

openjck commented Apr 8, 2015

openjck commented Apr 8, 2015

iakshay commented Apr 8, 2015

openjck commented Apr 15, 2015

darkwing Apr 15, 2015

iakshay commented Apr 15, 2015

groovecoder commented Apr 29, 2015

groovecoder commented May 8, 2015

iakshay commented May 8, 2015

groovecoder commented May 11, 2015

openjck commented May 15, 2015

darkwing commented May 27, 2015

zalun commented Jun 9, 2015

darkwing commented Jun 9, 2015

Bug 1148743 - Add button to open samples in JSFiddle #3147

Bug 1148743 - Add button to open samples in JSFiddle #3147

Conversation

iakshay commented Mar 29, 2015

stephaniehobson commented Mar 30, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephaniehobson commented Mar 30, 2015

iakshay commented Mar 31, 2015

iakshay commented Mar 31, 2015

groovecoder commented Apr 2, 2015

openjck commented Apr 2, 2015

groovecoder commented Apr 2, 2015

Choose a reason for hiding this comment

stephaniehobson commented Apr 2, 2015

openjck commented Apr 2, 2015

iakshay commented Apr 2, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

openjck commented Apr 8, 2015

openjck commented Apr 8, 2015

iakshay commented Apr 8, 2015

openjck commented Apr 15, 2015

Choose a reason for hiding this comment

iakshay commented Apr 15, 2015

groovecoder commented Apr 29, 2015

groovecoder commented May 8, 2015

iakshay commented May 8, 2015

groovecoder commented May 11, 2015

openjck commented May 15, 2015

darkwing commented May 27, 2015

zalun commented Jun 9, 2015

darkwing commented Jun 9, 2015