Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Experiments with Live code samples #644

Closed
wants to merge 6 commits into
from

Conversation

Projects
None yet
3 participants
Contributor

louisremi commented Oct 5, 2012

Getting Live Code Samples into Kuma has been discussed to a great extent already but I'd like to demonstrate an early implementation: my experiment relies on the generic tab component for presentation (yet to be merged) and the new sandbox attribute of iframes.

Here's a short video introduction: http://youtu.be/PfJZ3oaGnos

This is not an ideal solution because of the limited browser compatibility, but it can be seen a step forward between what we have now (not much) and the future integration of jsFiddle.
I do not expect this PR to be merged as is, but rather to get the ball rolling.

Lr

Member

lmorchard commented Oct 5, 2012

Nice! This looks like it promises to be more elegant than what I've come up with as a plan for live samples. It would be great to have the sample source authored & managed inline with the article itself, rather than as a separate entity altogether.

Member

lmorchard commented Oct 5, 2012

I'm trying to think of compatibility and a fallback for older browsers: I wonder if it makes sense to build something server-side, inspired by this client-side JS. It could extract the HTML/CSS/JS from an identified sample tab-group on a page and build an iframe-ready document. Host the URL for that on a different domain origin, and we get some of the same sandbox benefits

Contributor

louisremi commented Oct 5, 2012

Certainly, but I'm not skilled enough to make those changes; somebody else would have to implement that part.

Member

lmorchard commented Oct 5, 2012

Oh, no worries: When I talk about building something server-side, I'm assuming I'll try doing it :)

But, this PR is a very welcome alternative approach to the cumbersome way I've started considering

Contributor

louisremi commented Oct 5, 2012

I'm glad you think so :^)

Owner

groovecoder commented Oct 5, 2012

Firefox 17 will be release November 20 so I think this is a great idea. Let's loop in the docs team on it.

Owner

groovecoder commented Oct 5, 2012

Can you include a sample of all the markup required to use this locally?

Member

lmorchard commented Oct 5, 2012

FWIW, I'm working on a server-side solution inspired by this. This will let us extract any given container element and try to wrap it in an HTML document as a sample. So, for example, this markup in a page:

        <div id="sample1">
            <pre class="brush: html">HTML</pre>
            <pre class="brush: css">CSS</pre>
            <pre class="brush: js">JS</pre>
        </div>

That would be accessible at a URL like this:

https://code.mozillademos.org/en-US/docs/CSS/Using_CSS_transitions$samples/sample1

The html, css, and js code listings would be extracted from sample1, inserted into an HTML template, and served up. That URL could also be included in an iframe, or even opened in a new window or tab.

The tricky parts left are:

Here's the fun part - with the extraction code I've got so far, although we could show the code in a tabbed panel, we don't have to. So, you could write something like this:

        <div id="sample2">
            <p>Explanatory text of the HTML which follows.</p>
            <pre class="brush: html">HTML</pre>
            <p>Explanatory text of the CSS which follows.</p>
            <pre class="brush: css">CSS</pre>
            <p>Explanatory text of the JS which follows.</p>
            <pre class="brush: js">JS</pre>
        </div>

In other words, the extraction code just looks for CSS selectors .html, .css, and .js, and ignores any other markup inside. So we can do lots of things with docs there, like "literate" programming where we can weave text between code blocks

Member

lmorchard commented Oct 8, 2012

FWIW, this also depends on #627, which I think @darkwing had opinions on

Owner

groovecoder commented Oct 9, 2012

This is awesome code.

We're using the idea to put the sample code straight into sections of the document, rather than creating new models for them.

But, we want the ability to edit live samples with jsFiddle, so we're making a server-side view of just the sample (#645) that we can POST back and forth with jsFiddle.

I'm going to show this in my upcoming HTML5 presentation at Tulsa Tech Fest though. (http://techfests.com/Tulsa/2012/Speakers/LukeCrouch/default.aspx) It's a great use of new HTML5 features.

We'll still probably merge #627 as soon as @darkwing takes a look at it.

@groovecoder groovecoder closed this Oct 9, 2012

Member

lmorchard commented Oct 9, 2012

FWIW, this would be great to bundle up as a jquery and/or wordpress plugin - or even something framework independent. Could make for a nice way to show off live examples on a blog, too

Contributor

louisremi commented Oct 9, 2012

Thanks for your review guys. I wanted to show how impatient we are to see live code samples in Kuma and try something new :^)

Making it an independant component is a good idea. It could fit in Activable, my growing collection of UI components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment