Build a Sandbox

While the term “sandbox” may conjure up the notion of playtime for the development staff, in the world of software/web development they are all business. Sandbox—when used in the context of traditional back-end software development—refers to a separate server set up for testing and development. It’s a safe haven where new software or hardware can be explored, tested, poked, prodded and evaluated without risk to the production systems. Sandboxes, also sometimes referred to as a test box, test server, or development server can get quite involved requiring database support, software systems mimicking the production systems and version control. Luckily, for the front-end developer/designer wishing to try out some new jQuery techniques or a new plug-in, sandbox’s don’t need to be that complicated.

Characteristics and Benefits of a Front-End Development Sandbox

Whereas back-end systems typically depend on a series of programs or modules, the front-end development pages can be built as simple as possible as stand alone pages. For example… say after reading a article on jQuery form validation you decide to give it a try. Using your sandbox you create a single new page that simply contains just what is necessary for the form. This is in contrast to the typical production web page that contains masthead, navigation, graphics, a footer, etc.—this page is simple! This makes it easy to see what is going on and much easier to de-bug. By using a page that is dedicated to simply do one thing, development time should be dramatically reduced. Now, once you get the code working in the sandbox, you can then apply it to your project with the confidence gained from seeing it work in test. When trying to add code to an existing page you never know if it’s the new code that is at fault, or if the new code is having a bad reaction to something in the existing page code. By testing the code by itself and getting it to work by itself you gain the knowledge that at least the new code works. Then, if after taking working code from the sandbox and adding it to your website it stops working—you are in a much better position to figure out what is causing the problem. A final benefit of using a sandbox is that it tends to help standardize how new projects are coded since it is easy to use the sandbox code as a template for new projects.

Building Your Sandbox

Building a sandbox is similar to building a website. You’ll want use proper coding practices in the construction of your sandbox. This means creating the appropriate folders—js(javascript), css, images… and the like—and using includes to pull the code into the individual web pages. The reasons are twofold. First, it’s the way websites should be built to ensure future maintainability. Whether you are just testing out a new jQuery technique you just read bout in a blog or you are building code is destined to be used in a current project, the code should be built to production standards. This because in reality the sandbox is not just for testing, it’s a great repository of software snippets ready to be incorporated into future projects. The nice thing about the examples is that you’ll now how they work (you coded them). They are all in one place (I recommend the home page contains links to each separate page for easy retrieval). Finally, since the pages are just about a specific effect, process, etc. and not contained in a CMS or buried in unrelated code, adding the code to your project should be a lot easier. The second advantage to building your sandbox using good coding practices (i.e. the appropriate folders) to ensure ease of upgrading the code when for example the new version of the jQuery comes out. Good site file structure will make the job of upgrading a relatively painless process.

In Summary the Benefits of using a Sandbox are:

1. Sandboxes are a great way to learn new coding techniques. The simplified environment let’s you focus on the job at hand by eliminating unrelated code.

2. The use of a sandbox can speed up web development, promote code standardization, and improve the quality of the code in website projects.