Like their real-world counterparts, web development “sandboxes” are environments for play, exploration and discovery. Sandboxes take code entered into one window and present it live in another, avoiding the back-and-forth cycle of developing a page, saving it, and refreshing it in a browser. A sandbox is a safe zone: it is nigh-impossible to break anything while coding within its borders. It is also a place of cooperation: sandboxes usually feature save-states, allowing others to view, share and contribute to your work. Sandboxes are the online equivalent to a hallway whiteboard in an office of codemonkeys: places to congregate and communicate snippets of code. Sandboxes are not direct development environments, and do not make web pages themselves… but they can be vital tools for making your pages better.
A catalog of web development sandboxes in 2012 would include:
Dabblet, created by Lea Verou: probably my current favorite sandbox. CSS is entered in one window, HTML in another, and the result is shown in a third. CSS is assumed to be prefix-free, so there’s no need to include proprietary code to run your examples. Dabblet code may be saved and referenced anonymously and stored in github.
CodePen might be thought of as Chris Coiyer's response to dabblet, with many of the same features but a little more sharing and community focus.
CSSDesk: one of the first sandboxes I was aware of; perhaps a little aged at this point, but still useful.
Google Code Playground is a sandbox for testing Google’s multiple APIs: code samples include everything from manipulating Google Maps to embedding YouTube videos to searching Google Books. A lot of practical applications.
Have a sandbox you prefer that is not listed here? Share it in the comments!