Waste Less Time
As web developers, we harness powerful, time-saving tools that make our lives easier. Tools such as Git, Ruby, and NodeJS, along with their counterparts, have become essential to our development process. However, not all developers are familiar with these tools, and sometimes you find yourself developing on unfamiliar environments, without the tools. I want everyone to have these tools, and I’ll tell you how to make that a reality.
Development Processes
The Old Way: Path of Pain
Common development processes have changed quite a bit over the years. At times, it used to be downright painful—FTPing code to a remote host with no version control, changing file names to keep old versions around, writing JavaScript without linting or validating, and handwriting all of our CSS…yikes!
The New Way: Path of Enlightenment
Things have changed—and for the good. First, we at Sparkbox use source control: Git along with GitHub. Source control, such as Git, SVN, or Mercurial, and a central repository (GitHub, BitBucket, Beanstalk, Dropbox, etc.) allow developers to keep code in sync, manage conflicts, and even deploy code. Next, we use preprocessors, such as Sass and Compass, for stylesheets. This allows for less repetition and more manageability. CoffeeScript for JavaScript creates valid, lint-free JS for us! GruntJS, for task automation, allows us to watch our files, sit back, and write code without worrying about what command-line tool to run after changes are made. Capistrano for deployment automation, in conjunction with GitHub, can be quite powerful too.
The Tools
Ruby
Ruby gives you:
Sass
Sass is a precompiled enhancement to CSS; it allows for cleaner, easier CSS. The good part about it is that it compiles to CSS, which can be the end deliverable. We typically use Scss syntax because of how similar it is to CSS. Also, you can easily convert a standard CSS file into a Scss file, simply by renaming the file from “style.css” to “style.scss.”
Compass
For extended functionality and power, install the Compass gem! Compass comes with powerful “mixins” or functions for your Scss files. It also has better support for cross-browser compliance.
Capistrano
https://github.com/capistrano/capistrano
If you think having a way to easily manage, automate, and deploy is a dream, Capistrano is a dream come true! By setting up a simple deployment script, Capistrano will deploy your website to multiple servers, run a build process, and save you a heck of a lot of time.
Note: The current version of Capistrano is unstable. We’re still using an older version of Capistrano for now, but (as with many of these tools) they change. Another deployment tool you can use is Mina.
NodeJS
NodeJS gives you:
CoffeeScript
Like Sass, CoffeeScript is a precompiled enhancement, but for JavaScript. It can easily be incorporated into any project, as the final result is JavaScript. CoffeeScript will compile with any system that has NodeJS installed, but CoffeeScript comes with its own library that can be added for runtime compilation. (I would not recommend this unless absolutely needed for the project to work.)
GruntJS
GruntJS is a powerful JavaScript task automator. It gives you the power of all your command-line tools bundled up into a single command. By setting up Grunt tasks, you can let Grunt watch your development files for changes and run commands, like CoffeeScript and Compass.
Git and GitHub for Source Control
Sparkbox has been using Git for source control for some time now. Along with GitHub, Git has become a valuable part of the development process. Though, we understand, it’s not always up to the developer to choose source control for a given project; learning and using Git is essential as it has become the source control of choice for many open-source tools, including our very own development process.
Note: GitHub is a major open-source sharing platform! You can find all the tools listed below on GitHub.
How to Harness Tools Across Platforms
We currently employ these tools in our development build process, as mentioned in the Our New Build Process post. In the same post, we mentioned that we use Macs for development. Fortunately, these developer tools are available on just about all platforms. At the time of writing that article, we said, “While you can install Ruby and Node on Windows, we have not tried it. Your mileage may vary.”
But now, gosh darn it, we did it on Windows as well as Linux, and they worked!
Here is another article to walk you through the tools that we use, from the ground up, and I’ll show you how to install some of our favorite time-saving, development tools on popular platforms.
