Stop Coding Like It’s 1999

| Filed Under: Insights | By:

It’s 2015.  You know what responsive means and how to adhere to it, and you can code a website with clean, efficient CSS. Your HTML is both valid and semantic. You know how to use a grid system. You keep your javascript as minimal as possible and keep your image size down to a minimum as well. That’s great, but that’s really the minimum level of web development these days.

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

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

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.

Modernizr

This Javascript library should basically be used on every page that’s going to be viewed on the internet because it allows you to detect which features the browser can and can’t use. This allows you to prepare your site to handle all situations where your CSS or JS might be breaking because of compatibility issues. Modernizr increases in importance as your viewership increases because you’ll invariably get a broader spectrum of browsers viewing your website.

Bower

This is a simple tool, but an important one. Bower is a package manager for various web components, which mostly come in the form of Javascript libraries, but there are a few exceptions. It allows you to use the command line (which you should be using already) to install and update all the packages in your project as well as manage which versions should be installed or not. This is used in conjunction with Grunt to automatically install and manage your packages.

Grunt

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

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.

Sublime Text

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.

Git

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.