When I’m not writing Appstorm reviews or doing schoolwork, I’m a freelance web developer. A lot of what I know about web development I owe to the in-depth tutorials and screencasts over at Nettuts+, which is, in my opinion, one of the most reliable and richest resources for all levels of learning. You may or may not know that Nettuts+ is owned by Envato, who also happens to run AppStorm. We’re an ever growing family of sites aimed at providing you with all your digital needs, from education and app reviews to online marketplaces for designers and developers.
In addition to providing quality educational materials, Nettuts+ has recently entered into the world of Mac app development with a duo of helpful web development tools: Nettuts Builder and Structurer Pro.
Read on to find out how to use these great utilities to speed up your web development workflow!
Structurer Pro was the original Nettuts+ app, built to help web developers quickly create project templates without having to manually create each file and folder.
Using Structurer Pro
When you open up Structurer Pro, you’re greeted with a fairly spartan interface with a couple of text boxes. The first step is to choose a base path for your project’s folder. Next, you start defining the files and directories you want to create using a very straightforward set of rules.
To create a file, just type in the name of the file you want to create with the appropriate extension. To create a folder, type in the name you want to use, then a forward-slash. If you’d like to populate the folder, you can either add a file name on the same line as the folder name after the slash, or start a new line and precede the file name with a forwad-slash. To create our project, the Structurer text box would look like this:
You can create nested directories as well, just make sure you always put a forward-slash after the name of each folder.
To those of you familiar with using the command line to create files and directories, Structurer Pro may look like little more than a glorified Terminal shell. After all, the same result could be achieved with a few
touch commands. That being said, the real benefit of using Structurer Pro is the ability to save templates of commonly used project structures.
To create a template, simply select “Save Template…” from the Structurer Pro dropdown menu and give your template a memorable name. Now when you access the dropdown menu, your template is just a click away. You can add and manage as many templates as you like through the “Manage Templates” option.
Once we’ve created some reusable templates, we’re still a few clicks away from being able to create a project from scratch. To speed up your project creation even further, Structurer Pro comes bundled with Structurer Menu, a small menu bar application that gives you one-click access to your project templates. Simply pick a template and choose a location for it, and you’re ready to go.
Though our example demonstrated the creation of a very simple HTML site, Structurer Pro would be even more of a time-saver for the creation of large scale projects and web applications involving many classes and directories. I find that using Structurer Pro not only speeds up my workflow, but also encourages me to plan ahead and think about what resources I’m going to need for a project, which saves me even more time later on.
Using Nettuts+ Builder
Nettuts+ Builder is a menu bar application with some very simple and easily configurable features. When you first open it up, you’ll just see a little construction hat in your menu bar with just a “preferences” menu item. From Preferences, you can select your compression engine (YUI, JSMin, Closure Compiler) and add an FTP server to upload your project to.
Once you’re ready to publish a project, simply drag it to the menu bar item, and it will be automatically compressed and uploaded to your server. Nettuts+ builder also creates a new “publish” directory for your project within the original folder containing the compressed files.
When you make changes to your project, you can simply drag the folder back to the menu bar, and the changes will be uploaded.
When you’re specifying an FTP server to upload to, make sure you add a new URL path for your project, as the “Project finished folder name” refers to the local copy of your project, and you probably don’t want all your files to upload to your root directory.
Nettuts+ Builder is a great utility and time saver, but probably wouldn’t appeal to web developers that use advanced IDEs or editors with these features built in. Personally, I do a lot of my devleopment in Coda, which has a built in FTP client, but coders using more single-function text editors like TextMate and BBEdit would likely appreciate the simplicity of drag-and-drop uploading without having to open an FTP client.
The Nettuts+ duo of apps can definitely streamline the web development workflow, and enforce good practices like planning and script compression.
I’m sure some readers will prefer to accomplish tasks like uploading, compression, and directory creation through the command line, but Terminal isn’t an environment everyone is comfortable in, and user interfaces were invented for a reason.
These apps don’t introduce any breakthrough new features, but they fit the needs felt by many web developers for easy ways to speed up what is often a repetitive and tedious process. The way I see it, most web developers either accomplish the mundane tasks of web development by opening up the Terminal, or by taking advantage of more fully-featured development environments. The Nettuts+ apps offer a middle ground, an inexpensive, easy option to expedite repetitive tasks.