Being as efficient as possible is always something to strive for – especially in the business world – as long as the quality doesn’t suffer. The web development world is ripe with tools, but finding the right ones to use and using them correctly can be extremely difficult and time consuming. I’ve found eight great tools that can both increase productivity and give you lots of utility.
Sass allows you to write CSS like you thought you’d be able to before you learned how simplistic and plain CSS really is. Sass is a CSS preprocessor, which means that you write Sass into a .scss file and Sass spits out an equivalent CSS file. Sass gives you features like variables, functions, nesting, loops, control statements, and mixins – a way to minimize classes you use and keep your HTML clean. Sass gives a whole host of functionality besides what’s listed here, but these are some of the more prominent features. Sass should be used to make your CSS more modular and to reduce the amount of lines that have to be written by using a combination of functions, loops, and mixins. If a developer said they weren’t using any of the tools on this list, this is the first tool I would tell them to pick up.
Bourbon contains a bunch of mixins and functions that are useful in day to day coding. Need a clearfix for a div you have floated content in? Easy, just include the clearfix mixin and you’re set. It also includes the vendor prefixes for lots of CSS properties which usually come in the form of mixins. Along with Bourbon I would suggest picking up a Sass grid framework. There is one developed by the makers of Bourbon, called Neat, but many people find it’s system to be a little off. Another one that I’ve been using lately is Jeet which gives the most basic and useful aspects of grids and nothing more.
Out of all the tools on this list, this one is probably the hardest one to set up, but it can save you the most time in the long run. Grunt is a task runner, but the real power comes from a lot of the tasks designed by the Grunt community. While you’re coding, Grunt becomes your local server and can do live reloads of the pages you are changing so that you can see them immediately. It can also run your Sass compiler and automatically inject Bower components into your HTML files. In addition to all this stuff, you can set up a build task that will minify all your files, auto-prefix all your CSS rules and rename all your files to make sure you’re not seeing a cached version. Grunt is extremely powerful and takes some configuration time, but you’ll save time just by running it to make live reloads, among other reasons.
Yeoman is a project scaffolding tool. You use it once at the beginning of the project and never touch it again. Yeoman simply sets up a directory structure, your Grunt file, pre-installs a couple useful components based on your selection and then lets you get to the coding quicker. If you always use the same basic tools for every website you build, you can create your own Yeoman generator that will set up projects for you. Otherwise, there is a library of generators that you can find online that should come close to what you need.
There are many text editors out there but only a few of them should be used for any serious web development. My personal choice is Sublime Text. It allows you to install packages to customize the way you use your text editor to add functionality. For example, I use a package called Emmet which allows me to write HTML in a shorthand version, saving me tons of time not having to type every closing tag or brackets. There are a plethora of useful packages but that’s beyond the scope of this article. The takeaway here is get a good text editor.
Finally we have Git. This is almost essential for any project with more than one person. I would use it for every project regardless, even when I’m by myself. Git allows you to keep the changes you’ve made to your code organized and in a history. It keeps this history using commits, which are basically checkpoints of code changes. Git makes it very easy to collaborate with any number of people by allowing them to make a copy of the “master” code and split off into their own branches. Once someone feels like their branch is complete, they can merge back into the master branch and settle any conflicts in their code at that time. Git gives you peace of mind that you’ll always be able to go back in case you make a mistake in the future.
While you don’t need all of these tools, each of them can help you increase productivity and code quality. Using all of these tools together, however, creates a very synergistic workflow that will hopefully not change too much over time. If I had to choose three tools out of this list that must be picked up, I would choose Git, Sass, and Modernizr. This would give you a minimal base without all the automation, but it would at least get you writing more efficient CSS, allow you to be able to progressively enhance websites to work in any browser and give you peace of mind that your code is not being overwritten and always have a history of what you’ve done. There are many duplicates of some these tools, so use what feels right for you. The ideas behind each are the same. Stop repeating yourself and let the code do it for you.