Adding fiddles or code pens for each animation in the demo page #293

Open
harshabhat86 opened this Issue Jun 24, 2014 · 12 comments

Comments

Projects
None yet
4 participants

Adding fiddles would have an advantage over having these as positional modals (with reference to #244.
The users will be able to play around and have more of a "working" thing than just a reference.
On the flip side the pain would be to navigate to another URL to see the thing in action.

If there are too many of those to be done, we can somehow think of a way to automate the fiddle creation.

naeluh commented Jun 24, 2014

@harshabhat86 what about embedded fiddles or code pens but that also might look bad on page ?

@naeluh I second that. Embedded fiddles would spoil the beauty of the page. So a link that navigates you outside would be better IMO.
Or we can have the code as a positional modal and for the people who want to play around, a link to fiddle?
The link to fiddle would take them out of the current page.
Comments?

Contributor

grayghostvisuals commented Jun 24, 2014

Kinda a tough call here because then we (the contributors) are maintaining in two diff spots (repo and pens). We've been toying with the idea of showing code snippets for each effect instead.

naeluh commented Jun 24, 2014

I kinda of like how paper.js. It has this source button up in the corner but always reverts back to the original code but you can live code if you want to see what is possible, however I don't know the security implications of something like this, an implementation of this probably exists that is open source and secure, but it is pretty classy looking stylistically.

check this -> top right button gives you source.
http://paperjs.org/examples/candy-crash/

As @naeluh mentioned, paper.js' source button on top right is awesome. And if there is an open source tool for doing something like that, would work out awesomely well.
We can also think of embedding the jsfiddle code using their feature.
You can check it here.

I don't think updating the same fiddle (with the same URL) is possible. So every time there is a change in effeckt.css, there will be a new fiddle URL that we have to link to the example.

Embedding a sample fiddle would be as simple as adding an iframe.

<iframe width="100%" height="300" src="http://jsfiddle.net/zalun/NmudS/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
Contributor

wonglok commented Jun 25, 2014

Idea:
easy to maintain, only 1 source origin :)
easy to teach and learn with entire html+css+js code + comment.
easy to experiment with instant feedback. No need server side.

Solution:
preview: http://mrdoob.com/projects/htmleditor/
source: https://github.com/mrdoob/htmleditor

naeluh commented Jun 25, 2014

@wonglok wow that is pretty awesome, mrdoob has some great stuff for sure +1

Agree with @naeluh ...
Thanks @wonglok for sharing this.
Will come up with a couple of examples soon.

Contributor

wonglok commented Jun 26, 2014

thx >v<~

naeluh commented Jun 26, 2014

( ••) ( ••)>⌐■-■ (⌐■_■) YEAH!!!

Okay, while preparing demos, realized that a CDN would be a great way to make the content available online and make the usage easy.
Is effeckt.css already on CDN?
If not, is it a good thought to add it to CDN?

Contributor

grayghostvisuals commented Jul 2, 2014

As of right now it's on npm. As far as a CDN goes that is something a little ways down the road and outside the scope of this issue. Also our time needs to be spent organizing the structure so we can eventually have a clear and maintainable way to distribute this to authors.

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