<js-fiddle> Custom Element

[snuggs]

Proposal

<js-fiddle
  id=ewq21w
  theme=dark
  bg=#bada55
  lang=html,css>
</js-fiddle>

Reason

Because keeping up with JSFiddle examples and source code in the repo is like Christmas Kitty

Settings

• id - We can use GlobalAttributes.id as the chance of there being 2 <js-fiddle>s with the same id on the same page is slim to none. Just doesn't make sense RN. The id attribute will be used as the token within a URL builder inside <js-fiddle> (part of the reason of creating this custom element)

• language - Not sure if intended usage but we can use GlobalAttributes.lang property to specify html,js,css panes. Here is the spec for lang I kinda wanna (ab)use the attribute for this purpose. Opens up many doors lang=pug :trollface:

• background color - ????? Dunno the attribute to use for this one but we need it to specify color to compliment theme (see below)

• theme - Values dark,light for jsFiddle.

Other learnings

@brandondees ya don't know what ya don't know! EUREKA!

I don't know if the following is relevant to the <js-fiddle> component but we DO have a way to POST js-fiddles onto the server. However don't know if there is a mechanism to PUT/PATCH for updates. THIS IS WHAT WE'VE BEEN LOOKING FOR @brandondees @pachonk.

Not sure if the intent is to POST on each request making an ephemeral jsfiddle. The API is a bit unclear. Or I just don't like to read. @tmornini may have some input on WTF is going on with their API.

• http://doc.jsfiddle.net/api/post.html
• http://jsfiddle.net/zalun/sthmj/embedded/result/

[brandondees]

well, don't really care if it's ephemeral then... the live page can create a fiddle based on its own code contents at load time if that's what it has to be, or there can be a canonical one created at deploy time and referenced from the page, which is obv more efficient but probably doesn't drastically impact user experience either way. if we can have a "export to your own fiddle" button to let folks create their own variant components that's kinda gold.

[brandondees]

doing our own fiddle component still may be a great direction longer term but a syntax highlighting editor / IDE could be a somewhat bigger undertaking and could have a high maintenance obligation attached

[snuggs]

:thinking: @brandondees. Was gonna do this element today but may wait until tomorrow to sleep on it. For now workin' on this <github-ribbon> element ;-) https://github.com/devpunks/snuggsi/pull/82