[MDN Live Samples] We need a live editable sample system on MDN

[Jeremie Patonnier]

Hello everybody :)

For a long time now, the MDN team knew that MDN needs a live editable code
sample tool (such as jsFiddle or Thimble). The recent survey for the
Learning Area project<https://wiki.mozilla.org/images/9/93/Learnin-area-survey-2014.pdf>as
well as some discussion
during the last MDN Work
Week-end<https://etherpad.mozilla.org/mdn-workweekend-livedemos>has
definitely proven that we MUST work on that feature for MDN.

That said, there are so many possible solutions to handle such a feature
that we first need to clearly stated what we need on MDN in order to decide
which tools we should use or build.

To help defining those requirements, I set up an Etherpad to gather all
your ideas, needs, hopes, wishes, dreams, expectations, fears, etc. about
it:

- https://etherpad.mozilla.org/mdn-code-samples

Please help us sorting this out. Go to the Etherpad and add your comments,
any comments. Also, feel free to spread it to any people or mailing list
that you think could be relevant to help us on this task.

Thank you very much for your help. I'm pretty confident that in no time we
will have our mind clearer about what we should do to build that feature on
MDN :)

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

[John Karahalis]

In addition to our own thoughts, I would be interested in research into what our audience really needs. We are expert users, and our needs are not always typical.

When we first talked about live samples, we arrived at a long list of nice-to-have features. Most of these features have not been implemented, but the possibility was enough to dissuade us from using tools like JSFiddle and Thimble. In hindsight, I wonder if these tools would have been better choices, as they offer features our users are more likely to need, including editing.

--
John Karahalis
Mozilla
openjck.com

----- Original Message -----

> _______________________________________________
> dev-mdn mailing list
> dev...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-mdn

[Ali Spivak]

I don't think it is a good idea to focus on specific tools, I think we need to talk about what users need & want, and then once we feel we have a comprehensive set of needs/requirements evaluate what is available against those needs.


ali spivak
408-859-8260
asp...@mozilla.com

----- Original Message -----

[John Karahalis]

Absolutely. I'm not recommending that we use JSFiddle or Thimble in particular, but instead that we be careful to generate requirements based on real user needs, lest we exclude them unnecessarily.

--
John Karahalis
Mozilla
openjck.com

----- Original Message -----

[Chris Mills]

On 17 Mar 2014, at 23:55, Eric Shepherd <eshe...@mozilla.com> wrote:

> John Karahalis wrote:
>> Absolutely. I'm not recommending that we use JSFiddle or Thimble in particular, but instead that we be careful to generate requirements based on real user needs, lest we exclude them unnecessarily.

> I agree; we need to improve the live sample experience. The system is incredibly powerful but the editing of live samples is really tricky and prone to mistakes. Let's try to find time to make it more usable this year; it will improve our content quality enormously!

Another issue in my mind is that it is hard (or impossible) to include samples that link to external CSS or JavaScript libraries. Often a developer will want to link to say, jQuery, or a game development library, just to build out the non-pertinent parts of a code example quickly with the minimum of fuss.

Having the code examples embedded in a docs page makes it less easy to share just the code example.

Allowing us to embed, say, jsFiddle or Thimble instances would solve these problems.

[Laura Hilliger]

I agree with Ali and would also say that whatever the needs and wants are from MDN user stories, we have an opportunity to extend Thimble to address those use cases. Rather than reinventing the wheel, know that your friendly MoFoes would love to collaborate with the MDN to make Thimble better for all levels of webmakers.

—laura

Laura Hilliger
Training & Curriculum Lead
Mozilla Foundation

Email: la...@mozillafoundation.org
Twitter: @epilepticrabbit

[Jean-Yves Perrier]

I also feel some unease to host these data outside a Mozilla realm: it
is a lot of work and I just don't want to see jsfiddle or so having a
technical problem and disappear. Being hosted on a Mozilla property,
Thimble would be ok (but that doesn't mean that it is the only alternative).

On 18/03/2014 11:10, Laura Hilliger wrote:
> I agree with Ali and would also say that whatever the needs and wants are from MDN user stories, we have an opportunity to extend Thimble to address those use cases. Rather than reinventing the wheel, know that your friendly MoFoes would love to collaborate with the MDN to make Thimble better for all levels of webmakers.
>
> —laura
>

--
Jean-Yves Perrier
Senior Technical Writer / Mozilla Developer Network

[Chris Mills]

I would prefer to use Thimble; it is Mozilla, plus it is a genuinely really good system (he says, having tested it a lot, for running beginner’s workshops and stuff.)

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

[Eric Shepherd]

I agree. I'd like to look at ways to ensure that Thimble can do what we need (including supporting a separate box for editing script and support for importing external JS libraries and content), as well as for embedding it within an MDN page.

Keeping the material in a Mozilla property future-proofs the samples, as has been mentioned by others.

Eric Shepherd
Sent from my iPad

> _______________________________________________
> engagement-developers mailing list
> engagement...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/engagement-developers

[Ali Spivak]

Hey all, let's put the effort into documenting what the users -need- on the etherpad & save the tool discussions until we have a robust set of use cases & requirements. Please? I know we love tools and all, but we need to think through the functionality first.

>From the thread below, I pulled out:


* hosted on a Mozilla property
* a separate box for editing script
* support for importing external JS libraries and content
* Ability to embed sample within an MDN page.
see, that's not so difficult :-)


----- Original Message -----

From: "Eric Shepherd" <eshe...@mozilla.com>
To: "Chris Mills" <cmi...@mozilla.com>
Cc: "Jean-Yves Perrier" <jper...@mozilla.com>, "engagement-developers" <engagement...@lists.mozilla.org>, dev...@lists.mozilla.org, "dev-mdc" <dev...@lists.mozilla.org>, teach...@mozillafoundation.org, "Technical Evangelism team" <tech...@mozilla.com>, "Holly Habstritt" <hhabs...@mozilla.com>, "Laura Hilliger" <la...@mozillafoundation.org>, "Christian Heilmann" <chei...@mozilla.com>
Sent: Tuesday, March 18, 2014 7:51:19 AM
Subject: Re: [MDN Live Samples] We need a live editable sample system on MDN

I agree. I'd like to look at ways to ensure that Thimble can do what we need (including supporting a separate box for editing script and support for importing external JS libraries and content), as well as for embedding it within an MDN page.

Keeping the material in a Mozilla property future-proofs the samples, as has been mentioned by others.

Eric Shepherd
Sent from my iPad



On Mar 18, 2014, at 7:29 AM, Chris Mills <cmi...@mozilla.com> wrote:

I would prefer to use Thimble; it is Mozilla, plus it is a genuinely really good system (he says, having tested it a lot, for running beginner’s workshops and stuff.)

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

<blockquote>

On 18 Mar 2014, at 11:25, Jean-Yves Perrier <jper...@mozilla.com> wrote:

I also feel some unease to host these data outside a Mozilla realm: it
is a lot of work and I just don't want to see jsfiddle or so having a
technical problem and disappear. Being hosted on a Mozilla property,
Thimble would be ok (but that doesn't mean that it is the only alternative).

<blockquote>

On 18/03/2014 11:10, Laura Hilliger wrote:
I agree with Ali and would also say that whatever the needs and wants are from MDN user stories, we have an opportunity to extend Thimble to address those use cases. Rather than reinventing the wheel, know that your friendly MoFoes would love to collaborate with the MDN to make Thimble better for all levels of webmakers.

—laura
--


Jean-Yves Perrier
Senior Technical Writer / Mozilla Developer Network

_______________________________________________
dev-mdn mailing list
dev...@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-mdn

</blockquote>

_______________________________________________
engagement-developers mailing list
engagement...@lists.mozilla.org
https://lists.mozilla.org/listinfo/engagement-developers

_______________________________________________
</blockquote>

[Jeremie Patonnier]

Hi!

+1 on Ali.

I agree, Thimble is a great tool. But before making any choice we need to
better define what we want to do with such a tool, what our users expect
and how to integrate it within our current workflow. If it was just about
adding an existing tools, we would have one for long on MDN. If we were
sure Thimble is the right choice (and right now, I don't have even a simple
single clue if it's the case), which kind of evolution do we need to ask?
and why?

So before jumping to any solution, please, take the time to think in termes
of what is needed rather than what would be cool to play with (I know, it's
tempting :).

Best :)
Jérémie

2014-03-18 15:51 GMT+01:00 Eric Shepherd <eshe...@mozilla.com>:

> I agree. I'd like to look at ways to ensure that Thimble can do what we
> need (including supporting a separate box for editing script and support
> for importing external JS libraries and content), as well as for embedding
> it within an MDN page.
>
> Keeping the material in a Mozilla property future-proofs the samples, as
> has been mentioned by others.
>
> Eric Shepherd
> Sent from my iPad
>
> > On Mar 18, 2014, at 7:29 AM, Chris Mills <cmi...@mozilla.com> wrote:
> >
> > I would prefer to use Thimble; it is Mozilla, plus it is a genuinely
> really good system (he says, having tested it a lot, for running beginner's
> workshops and stuff.)
> >
> > Chris Mills
> > Senior tech writer || Mozilla
> > developer.mozilla.org || MDN
> > cmi...@mozilla.com || @chrisdavidmills
> >
> >
> >

> >> On 18 Mar 2014, at 11:25, Jean-Yves Perrier <jper...@mozilla.com>
> wrote:
> >>
> >> I also feel some unease to host these data outside a Mozilla realm: it
> >> is a lot of work and I just don't want to see jsfiddle or so having a
> >> technical problem and disappear. Being hosted on a Mozilla property,
> >> Thimble would be ok (but that doesn't mean that it is the only
> alternative).
> >>

> >>> On 18/03/2014 11:10, Laura Hilliger wrote:
> >>> I agree with Ali and would also say that whatever the needs and wants
> are from MDN user stories, we have an opportunity to extend Thimble to
> address those use cases. Rather than reinventing the wheel, know that your
> friendly MoFoes would love to collaborate with the MDN to make Thimble
> better for all levels of webmakers.
> >>>

> >>> --laura

> >> --
> >> Jean-Yves Perrier
> >> Senior Technical Writer / Mozilla Developer Network
> >>
> >> _______________________________________________
> >> dev-mdn mailing list
> >> dev...@lists.mozilla.org
> >> https://lists.mozilla.org/listinfo/dev-mdn
> >

> > _______________________________________________
> > engagement-developers mailing list
> > engagement...@lists.mozilla.org
> > https://lists.mozilla.org/listinfo/engagement-developers
> _______________________________________________
> engagement-developers mailing list
> engagement...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/engagement-developers
>

[Laura Hilliger]

Hi everyone,

I added “Requirements" to line 57 to help clarify that question, I also made some comments elsewhere in that pad :)

https://etherpad.mozilla.org/mdn-code-samples

—laura

Laura Hilliger
Training & Curriculum Lead
Mozilla Foundation

Email: la...@mozillafoundation.org
Twitter: @epilepticrabbit

> >>> —laura

[Luke Crouch]

Thanks for the thread Jeremie.

I read the survey results and the Work Weekend etherpad.

1. Is anyone - MDN or Webmaker/Thimble - asking codecademy for advice on
this? It was the top 3rd-party resource that respondents gave us.

2. What is Mozilla's distinction from codecademy for learning content
and tools like this?

-L

--
Q: Why is this email five sentences or less?
A: http://five.sentenc.es

[Laura Hilliger]

Hi Luke,

1) Could you be more specific with your question? Asking for advice on what exactly?

2) I’d say that our main distinction from codecademy for learning content and tools is pedagogically. We believe in, promote and champion connected and blended learning, whereas codecademy is for autonomous learning. That said, our tools could be built out to be better for autonomous learners, it’s just those folks aren’t our target audience, so it’s not been priority.

—laura


Laura Hilliger
Training & Curriculum Lead
Mozilla Foundation

Email: la...@mozillafoundation.org
Twitter: @epilepticrabbit

[Luke Crouch]

On 3/24/14 5:12 AM, Laura Hilliger wrote:
> Hi Luke,
>
> 1) Could you be more specific with your question? Asking for advice on
> what exactly?

We should get codecademy's advice on exactly what we should build. We
should contact them to learn what *specific gaps* we should fill that
they cannot or will not fill themselves.

> 2) I’d say that our main distinction from codecademy for learning
> content and tools is pedagogically. We believe in, promote and
> champion connected and blended learning, whereas codecademy is for
> autonomous learning. That said, our tools could be built out to be
> better for autonomous learners, it’s just those folks aren’t our
> target audience, so it’s not been priority.

That makes sense to me, and I love that "connected and blended learning"
idea. But MDN has grown on autonomous, intermediate-to-advanced learning
- i.e., developers learning via Google searches.

So, this is all new for us, and I like to start new things small and
then iterate where we offer a unique value.

-L

>
> —laura
>
>
> Teach the Web <https://webmaker.org/> *Laura Hilliger*

> Training & Curriculum Lead
> Mozilla Foundation
>

> Email:la...@mozillafoundation.org <mailto:la...@mozillafoundation.org>
> Twitter:@epilepticrabbit <http://twitter.com/epilepticrabbit>

>
>
> On Mar 21, 2014, at 11:34 PM, Luke Crouch <lcr...@mozilla.com

[Michelle Thorne]

Hey all,

>
> 1) Could you be more specific with your question? Asking for advice on
> what exactly?
>
>
> We should get codecademy's advice on exactly what we should build. We
> should contact them to learn what *specific gaps* we should fill that they
> cannot or will not fill themselves.
>

We've spent time analyzing what codecademy does well and where it falls
short.

If I might be bold to suggest we should look at where Mozilla's already
been and what our community has built before creating something new based
on the feedback of an external company.

It might be that it's not a tool you're looking for, but a community of
learners sharing their best practices and tutorials.

A quick summary of codecademy:

Pros:
* It nicely shows your progress and a skills map, so you know what will be
covered and where you are going.
* It's self-directed, so you can learn at your own pace and on the topics
you care about.
* It's intuitive and teaches you real code--not a new language that helps
you learn programming better, but what real programmers use. However, it
has a con in how it does this (below).
* Community forums are useful to discuss the lessons.
* Options for community generated courses

Cons:
* The lessons are in a sandbox. They don't teach you how to deploy the code
elsewhere or to see how it'd live in the context of a real project.
* It doesn't have social learning in the lessons itself -- not easy to
share what you made or to collaborate with someone on a snippet of code.
* It only teaches JS, CSS, HTML, etc. and not other practices that
important about learning about the web and being a good coder in it,
including open practices, collaboration, security, designing for
accessibility and more.
* It's not open source.

2) I'd say that our main distinction from codecademy for learning content
and tools is pedagogically. We believe in, promote and champion connected
and blended learning, whereas codecademy is for autonomous learning. That
said, our tools could be built out to be better for autonomous learners,
it's just those folks aren't our target audience, so it's not been
priority.


That makes sense to me, and I love that "connected and blended learning"
> idea. But MDN has grown on autonomous, intermediate-to-advanced learning -
> i.e., developers learning via Google searches.
>
> So, this is all new for us, and I like to start new things small and then
> iterate where we offer a unique value.
>

The Webmaker offering, while initially targeted at beginners, is on track
to fill the above gaps. Its model is expandable, so we can add levels for
advanced learning, which the MDN community knows so much about.

It seems to me the biggest opportunity is:

* Make tutorials and lessons where MDN's content come to life on existing
tools (there are lots). It's a social engineering, not a technical
engineering challenge to have the community making interactive lessons.
* Consider forking or improving Thimble to have clear sections for HTML,
CSS, JS and a rendered page. I think Codepen (and other sites) do this
well: http://codepen.io/
* Design for openness and collaboration. Most learn-to-code sites overlook
this, and social learning and building is what sets Mozilla apart.

Happy to keep brainstorming. There is so much potential for teaming up
within Mozilla--lots we can learn from each other and do together. Let's
continue to examine this!

// m



> -L
>
>
>
> --laura
>
>
> [image: Teach the Web] <https://webmaker.org/> *Laura Hilliger*

> Training & Curriculum Lead
> Mozilla Foundation
>
> Email: la...@mozillafoundation.org

> Twitter: @epilepticrabbit <http://twitter.com/epilepticrabbit>

>
> On Mar 21, 2014, at 11:34 PM, Luke Crouch <lcr...@mozilla.com> wrote:
>
> Thanks for the thread Jeremie.
>
> I read the survey results and the Work Weekend etherpad.
>
> 1. Is anyone - MDN or Webmaker/Thimble - asking codecademy for advice on
> this? It was the top 3rd-party resource that respondents gave us.
>
> 2. What is Mozilla's distinction from codecademy for learning content and
> tools like this?
>
> -L
>
> --
> Q: Why is this email five sentences or less?
> A: http://five.sentenc.es
>
>
>
> --
> Q: Why is this email five sentences or less?
> A: http://five.sentenc.es
>
>

--
[image: Mozilla Webmaker] <https://webmaker.org/>
webmaker.org*Michelle Thorne*
Global Strategist
Mozilla Foundation

Email: mich...@mozillafoundation.org
Twitter: @thornet <https://twitter.com/thornet>

[Stormy Peters]

In addition to doing our own analysis, I agree with Luke that we should
talk to Codeacademy to make sure we are partnering and filling out the
ecosystem together in a complimentary way. Have we done this already?

Stormy

[Eric Shepherd]

Jeremie Patonnier wrote:
> I agree, Thimble is a great tool. But before making any choice we need
> to better define what we want to do with such a tool, what our users
> expect and how to integrate it within our current workflow. If it was
> just about adding an existing tools, we would have one for long on
> MDN. If we were sure Thimble is the right choice (and right now, I
> don't have even a simple single clue if it's the case), which kind of
> evolution do we need to ask? and why?

I've been half-following this discussion rather than being as engaged as
I'd have liked due to not feeling well lately, but now am trying to get
into it more.

We all seem to agree on the rough concepts of what we want and need to
accomplish, if not on the fine details.

How much work would be involved in adapting Thimble to match our needs
from an experience standpoint? That is, separate boxes for editing CSS,
HTML, and JavaScript, plus live display of the results, with the other
functionality we want to have as previously mentioned and recorded?

It does look like what codepen.io has done is very similar in many
respects to what we want, assuming we can make something like it that
can also be embedded in MDN pages to display samples in-content.

--

Eric Shepherd
Developer Documentation Lead
Mozilla
Blog: http://www.bitstampede.com/
Twitter: http://twitter.com/sheppy

[Ali Spivak]

gosh, we all like tools, don't we :-)

Ahem. While it seems like we agree, we haven't actually documented what, exactly, we think we are agreeing on. The etherpad is pretty rough and doesn't cover a lot of points. I also want to do a survey with users and get their needs recorded, as opposed to -our- needs. Once we have both of these things, we can evaluate tools.




ali spivak
408-859-8260
asp...@mozilla.com

----- Original Message -----
From: "Eric Shepherd" <eshe...@mozilla.com>
To: "Jeremie Patonnier" <jeremie....@gmail.com>
Cc: "Jean-Yves Perrier" <jper...@mozilla.com>, "Christian Heilmann" <chei...@mozilla.com>, "engagement-developers" <engagement...@lists.mozilla.org>, "Technical Evangelism team" <tech...@mozilla.com>, "dev-mdc" <dev...@lists.mozilla.org>, teach...@mozillafoundation.org, dev...@lists.mozilla.org, "Holly Habstritt" <hhabs...@mozilla.com>, "Laura Hilliger" <la...@mozillafoundation.org>, "Chris Mills" <cmi...@mozilla.com>
Sent: Tuesday, March 25, 2014 12:46:21 PM
Subject: Re: [MDN Live Samples] We need a live editable sample system on MDN