BIT-101 [2003-2017]

I’ve been doing a lot of HTML/JS development lately. My editor of choice these days is Sublime Text 2. A really great editor with loads of features and nearly infinite customization ability. But, as I’m doing a lot of learning and experimenting, I’m finding the need to create a lot of small, throwaway projects to try something out. In sublime, doing such a thing means:

1. Creating a directory for your project.
2. Creating a project using that directory.
3. Adding that directory the project.
4. Creating a JavaScript file in that project.
5. Creating an HTML file in that project that references the JavaScript file.
6. Setting up some kind of build system to be able to quickly launch the HTML file in the browser of your choice. I’d settled on ANT for this, and have a build.xml file that I can just drop into the project.

Compare this to the good old days with Flash:

1. Open Flash.
2. Type some code.
3. Hit Control-Enter to see what it does.

So I decided to make a project template that does most of the work in setting up a project. And I think I have a pretty decent setup at this point, so I will share it.

The template comes in two pieces: a zip file and a build.xml file for ANT. Yeah, you’ll need ANT installed and functioning on your system for this to work. The build system depends on it anyway. So if you’re anti-ANT, you can stop reading here.

Download the file here. Unzip it and you’ll have the zip and xml files. Save these somewhere safe.

Now, when you want to make a new project, Here’s what you do:

1. Create a directory for the project, say “foo”.
2. Copy the template.zip and build.xml files into the directory.
3. From the command line, type “ant”.

Now you can open Sublime Text 2, and from the menu, navigate and open your new project. It should look like this:

Here we have some various useful directories for putting stuff into, including a scripts dir with a main.js file in it that looks like this:

[php lang=“JavaScript]window.onload = function() {
document.writeln(“hello world”);
}[/php]

All ready for you to insert your real code.

An index.html file that looks like this:

[php lang=“html”]

As you can see, the title of the page has been set to your project directory name automatically, and it has a script tag already linked to main.js.

Finally, the build.xml file:

[php lang=“xml”]