Fortunately there already is a way to publish these working code snippets, similar to the ease of creating a blogging platform. Type some code into a box and let someone else take care of the boilerplate. For code samples you can choose from jsFiddle.net and jsbin.com. If all you need is some CSS/HTML hacking area there is also cssdesk.com, but I'll focus on two scripting-capable solutions here.
Both jsFiddle and jsbin do basically the same thing, but use different interfaces. It's mainly a matter of preference as to which one you like and use. With either, you can:
- Choose an appropriate boilerplate for your code, including external JavaScript or CSS if needed.
- Edit the script, HTML, and CSS for the sample code.
- Easily change the boilerplate (for example, change jQuery versions) without editing your sample code.
- See the live results, either in a sub-window or a full browser window.
- Save multiple versions of the example, and go back to any previous version.
- Share versions with other people, and allow them to create their own variations.
Just like blogging revolutionized web authorship, these sites are an incredibly powerful way to share and create code. Rather than copy/paste sample code fragments into an email and trust the person on the other end to understand the context, you can give them a completely working example with almost no additional effort. It's great for teaching as well. The HighCharts charting package has based their API documentation on jsFiddle, for example, so you can run and change the live code in their examples.
You can even embed a working code sample into another web page! The information is read-only while embedded here, but click the plus-sign to be taken to the jsFiddle web site where you can tweak to your heart's content!
