Create a sandbox code project to test code. Add one package or more to test in isolation.

The purpose of this sandbox is not to be used. The sandbox is for testing and the code should not be kept. This will give you a ‘go to’ environment to do some gun slinging code without fear of breaking a project.

Use this environment to get confident with new code or test logic in isolation before adding it to a project.

This blog post will use underscore as the sandbox package.

Prerequisites

Node.js must be installed and have npm set up.

You will need to use the command line, so some command line knowledge is required.

Create the sandbox

Create a folder for all the sandboxes, eg “Sandboxes”.

In that folder create the sandbox folder. Make it intuitive so that you know what that sandbox is for.

As an example, create a folder called “underscore”.

You should have this folder structure:

Sandboxes

– underscore

Create template files

Have a folder for template files. In this file you will want to keep blank files that you can copy and paste into your sandboxes as you need.

For example you will need an index.html file to run the script in. Create a bank html5 template that you can copy and paste and tweak.

These files will be useful to have in the templates folder:

• index.html
• style.css
• script.js

NPM

Add your library into your sandbox by using npm. In your command tool, navigate to the sandbox folder, type in the following:

npm install [package]

In the underscore folder you would run: npm install underscore.

You will see a node_modules folder with the package inside.

Set the sandbox up

Once the package is installed, add an index.html file. Copy/create a blank index.html file into the sandbox. Add the javascript and stylesheet references.

<script src=”node_modules/underscore/underscore-min.js“></script>

Get coding

Run the index.html file in a browser.

For quick code open up the console. For most browsers this is F12 (if using a pc). You now have access to the package, and freedom to test code.

Add a script.js file if you want to keep adding to code and refreshing.

Run example underscore code:

Some fake data

var characters = [{
id: 1,
name: 'Eddard',
surname: 'Stark',
house: 'Stark',
children: [3, 4, 5, 6, 7, 8]
},{
id: 2,
name: 'Catelyn',
surname: 'Stark',
house: 'Stark',
children: [3, 4, 5, 6, 7]
},{
id: 3,
name: 'Robb',
surname: 'Stark',
house: 'Stark'
},{
id: 4,
name: 'Sansa',
surname: 'Stark',
house: 'Stark'
},{
id: 5,
name: 'Arya',
surname: 'Stark',
house: 'Stark'
},{
id: 6,
name: 'Bran',
surname: 'Stark',
house: 'Stark'
},{
id: 7,
name: 'Rickon',
surname: 'Stark',
house: 'Stark'
},{
id: 8,
name: 'Jon',
surname: 'Snow',
house: 'Stark'
}];

Practice using underscore

var starks = _.filter(characters, function(character) { return character.surname == 'Stark'});

var notStark = _.reject(characters, function(character) { return character.surname == 'Stark'});

var eddard = _.first(_.where(characters, {name: 'Eddard'}));
var catelyn = _.first(_.where(characters, {name: 'Catelyn'}));

var houses = _.pluck(characters, 'house');

var surnames = _.pluck(characters, 'house');

var eddardChildren = _.filter(characters, function(character) {
return _.contains(eddard.children, character.id)
});

var catelynChildren = _.filter(characters, function(character) {
return _.contains(catelyn.children, character.id);
});

var otherChild = _.difference(eddardChildren, catelynChildren);

Why use this approach?

I often find myself wanting to test a package in isolation from a project. There is a lot of freedom to experiment and learn other avenues of coding.