Well, jsFiddle is like Gist on steroids. Not only can you dump code and get a shareable URL, you can execute the code, play with it, and save new versions as you go. You can even give them names and collect them under your user account (if you're logged in) for your future convenience and others' benefit. Lastly, others can easily fork your fiddle in order to modify and re-share it.
It's an essential tool for experimenting with client-side code (which is what we'll be using it for in this blog), as well as hosting client-side miniapps to share with others when reporting bugs or asking for help. There are three panes for your HTML, CSS, and JavaScript, and a fourth pane that shows the results of executing your code — essentially, a mini-browser.
Here's what it looks like:
 |
| Image stolen from http://davidwalsh.name/jsfiddle-interview. |
Using jsFiddle for Ember
In order to hack on Ember code using jsFiddle, you first have to load in the appropriate libraries. On the left panel you'll see a select box under "Choose Framework". Select jQuery
In the HTML pane, don't include <html>, <head>, and <body> tags — those are all added for you. Just start typing the content you would normally put between the <body> tags. Same thing with the CSS and JavaScript panes — don't wrap everything in style/script tags, just type your actual styles and code directly.
If you want a fiddle to show up in your public list of fiddles (at jsfiddle.net/user/<username>/), click on "Info" in the left panel and give it a title. You don't need to do that just to share a fiddle, though; simply link to it.
A Starter Kit Fiddle
For your convenience, I've taken the HTML and JavaScript content from the latest version of the Ember Starter Kit and packaged it as a fiddle. It loads all the standard libraries (including Ember-Data). I've also added a link to it on the sidebar of this blog, along with a link to the Ember API docs. Now you're never more than a click away from being able to modify/execute live Ember code, and a second click away from authoritative answers!
Embedding Fiddles
I intend to use embedded fiddles heavily in this blog to share code. It's a compact way of including the HTML, JavaScript, and output all in one tabbed widget — and with a single click you can jump to the live fiddle, play with it, fork it, etc. Here's what my Starter Kit fiddle looks like embedded (the tabs are clickable):
Tip: If you want to embed a fiddle with the minimum height necessary to show all lines in the default tab and avoid a scrollbar appearing, use the formula "40px + 14px/line". It's working for me... for now. Horizontally, it's using 7px/char, so 560px gives you 80 characters. This blog's width is 566px.
Support & Contributing
The site's been in "alpha" mode for almost two years now. The source used to be open, but a rewrite has been started in a private repo. No word yet on whether it will be open-sourced again, but at least work is being done on it. The creator, Piotr Zalewa, has said the beta version will allow for custom CSS for embedded fiddles. You can find him in the #jsfiddle IRC channel on irc.freenode.net as 'zalun', or follow @jsfiddle.
In the meantime, bug reports and feature requests can be filed as issues against the obscure jsfiddle-docs-alpha repo.
Next up: Debugging Ember in the browser
Update: Here's a nice article about using jsFiddle with AngularJS. (Thanks to author Pawel Kozlowski for bringing it to my attention.)
No comments:
Post a Comment