Solution For Handling Exercises

[addyosmani]

This is a discussion on how we aim to handle integrating the jQuery fundamentals exercises as a part of the new learning site.

On our last call we discussed a few options including having a gist/repo to jsFiddle hook (similar to what @divya/nimbupani previously mentioned) so that exercises can be maintained under source control but still offer the benefits of fiddle editing for those that wish to play around with the code examples.

If we did opt to go down that path, there are few different questions we need to answer like:

How are these going to be presented to the end user? - having access to both gists and fiddles means that we could either opt to embed gists (which come with GitHub forkability) vs embedded fiddles (which can be forked and run live).

My personal view is that the fiddles offer more value here for embeds, but this comes with an added reliance on jsFiddle.com staying live. As many of us know, the service has been prone to periods of large downtime/slowness lately and I think we need to consider the pro's of what the service allows us to do vs. the possibility of pages hanging waiting on fiddles to load up.

A possible solution to this is using something (embedded gists, js syntax highlighted code samples) to display code samples on pages and then just a jsFiddle link (generated based on the hook) below the sample so that users can play with it if they want to. This would avoid any hanging issues.

I'd like to hear what others thing about these ideas. Would the last point offer the best balance? If not, do you have any alternative suggestions?

[valentinvieriu]

I think the solution you've proposed is the best of both worlds. Having a quick way to test and run the code ( jsFiddle ) is a very good option to have, but sometimes the service can be quite slow. Providing a link is the best solution.

[addyosmani]

Here's the script divya had been talking about just for reference: https://gist.github.com/bca5bd4747a727c3d4e2

[gjohnson]

I think that is a great solution!

Also, what do you all think about having a base HTML/CSS document which could be referenced for even the small snippets in the normal (non jQuery Fundamentals Exercise) chapters? For example, while cleaning up the traversing chapter, I was thinking that to a beginner reader having a snippet like $('#myList').children() without much context as to what #myList is selecting, may make little sense.

IMO it would be great if we could have jsFiddle links on these chapters too, which we used that base HTML document for them. I do not think that each chapter needs it's own document, we could probably get away with a single document with a variety of elements (and styles) which all the chapters referenced, maybe?

I just think that providing that bridge from a reading article to a sandbox that readers can tinker around with what they just read is what makes a great learning resource. I know the examples on the official documentation have supporting markup and have the ability to run an example, which adds tremendous value to them. However, not sure if that is a maintenance nightmare though, maybe someone on the content team could share some input.

[addyosmani]

Hey @gjohnson. I think the idea of a base document for referencing snippets could be a very useful idea, but I think it depends on what context you were describing it in. For example, did you mean that we should have an index of all exercises that have links to fiddles (in case someone just wanted to play around with them) or rather that we have users click links below samples to be taken to the relative section of the base document to get access to the fiddle link?. I think it might make sense for the former.

With respect to a sandbox area, I know that Karl Swedberg has put together something similar for the latest version of Learning jQuery and we could well consider this idea for the future, but I imagine for the time being (just down to limited resources) we'll probably focus on getting the initial site out and then review the feasibility for such a sandbox.

In terms of the overall implementation of a gist -> fiddle system, I've asked @mklabs, who posted the original gist @divya had been speaking about to provide their insights on what we're trying to do in case they have further ideas.

[gjohnson]

@addyosmani

Just links to fiddles mainly, I can whip up an example of what I am thinking once the gist -> fiddle implementation is there.

Well I was referring to the idea of interacting with the examples (via jsFiddle in this case) as the notion of a "sandbox", but that sounds pretty cool too! :-)

[mklabs]

@gjohnson I definitely love the idea of a jsfiddle link on the small snippets.

I've started a quick experiment 4265685 where a script would generate a demo/ folder full of jsfiddles prepared folders.

This is a first try, mainly to get your thoughts on this. here is the idea:

some jsfiddle links:

• http://jsfiddle.net/gh/get/jquery/edge/mklabs/web-learn-jquery-com/tree/fiddles/demos/effects/snippet-3/
• http://jsfiddle.net/gh/get/jquery/edge/mklabs/web-learn-jquery-com/tree/fiddles/demos/ajax/snippet-3/
• http://jsfiddle.net/gh/get/jquery/edge/mklabs/web-learn-jquery-com/tree/fiddles/demos/jquery-basics/snippet-1/
• http://jsfiddle.net/gh/get/jquery/edge/mklabs/web-learn-jquery-com/tree/fiddles/demos/jquery-basics/snippet-10/

maybe it's a good start :) It still needs a lot of more work. Anyway, let me know what you think about this. Probably the next step would be to do pretty much the same on code/ folders.

@Suggsgested started something related on which we could iterate (btw, Suggsgested's work made me think of the "display-demo-from-github-repository" possibility, so thanks!)

[addyosmani]

Quick note: @mklabs and I are discussions some ideas and solutions around how best to move forward with this outside of this thread for the moment. Once we have some more progress, we'll post back with updates and hopefully a proposed solution in a fork that can be adapted for use.

[Suggsgested]

@mklabs whatever i can do to help :)

[gjohnson]

@mklabs that is exactly what I was thinking!!! Can't wait to see what you and @addyosmani propose.

[addyosmani]

just wondering: should we close this issue in favor of persuing #30? We appear to be focusing on more recent solutions to tackle exercises there.