I spend a lot of time writing little scraps of HTML, JavaScript, and CSS to demonstrate a technique or prove/disprove the existence of a bug. It is a royal pain to do that in a classic web page development process and make them available to the world, because it involves creating a file that is 80 percent boilerplate, adding my own code, coming up with a unique name, and dropping it in some place on a web site that I control. Ugh, so tedious.
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:
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!
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!
Comments