"As developers, one of the best ways we can provide value to both the client and our agency is to always evaluate both the tools we are using now and those we might use in the future to decide."

Michael Behnke, Enlighten

How Staying Up-to-Date on Front-End Tooling Provides Value to Clients

How Staying Up-to-Date on Front-End Tooling Provides Value to Clients As developers, we like to think of code as craft, and we are therefore fairly obsessed with the tools we use. We test them, write about their pros and cons, and debate which are best. However, while evaluating tools, we focus on the technical aspects of the tool, rather than how that tool helps us provide value. By increasing productivity and reducing error-prone, repetitive tasks, agencies can provide a higher quality end product for their clients.

Ask developers at any busy agency what new tools they are interested in learning about and what tools they are using in their current work, and you’ll likely hear two very different lists. Is it because we as developers just don’t have the time? Sure, we are busy, but it’s important to make time to learn about the tools that are available and to identify which ones can help increase our efficiency. A good tool will pay for the time invested by decreasing the amount of time it takes to develop a feature or project.

So, what kinds of tools currently fit this paradigm of actually saving developers more time than we have to invest in learning them?

  • CSS Preprocessors – CSS preprocessors are a scripting language that extends CSS yet gets compiled into regular CSS syntax. Using a CSS preprocessor will almost instantly pay dividends for the time invested. Whether you choose Sass or Less, preprocessors are something that even relatively junior developers can pick up and start using in just a few hours. These tools very quickly add efficiency, and are syntactically very familiar to vanilla CSS. Developers can get started with CSS preprocessors with simple GUI tools like CodeKit (Mac) or PrePros (Windows), before eventually graduating to using a build tool.

  • Build tools – Build tools are used to manage and organize your builds, critical in environments with multiple or interconnected projects. Grunt and Gulp are the heavyweights in the front-end ecosystem right now. They both have a large base of users and developers adding plugins to augment their capabilities. By doing things such as catching errors before refreshing the browser, and automating tasks that can be time-consuming and error-prone if done manually, build tools help developers produce a more stable product. Examples of tasks build tools can be used for include optimizing images, creating sprites (combining numerous small images or icons into a larger image), preprocessing Sass/Less, linting code (analyzing for specific errors), and even preparing code for deployment by concatenating (linking) and minifying CSS and JavaScript.

  • CSS Frameworks – CSS frameworks are pre-prepared software that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. In agency work, frameworks like Bootstrap and Foundation can be overkill. Often designers will not want nor need the base styling a framework would provide. However, after removing the default styling and any other component code that won’t be used, these frameworks can provide a flexible, responsive base to build on top of. This ensures developers aren’t writing the same boilerplate code for each new project.

  • JavaScript Frameworks – JavaScript Frameworks are a library of pre-written JavaScript which allows for easier development of JavaScript-based applications. Angular, Ember, Backbone or Knockout all have their place and specific strengths/weaknesses, but these are tools that should be selected to fit a specific project. Even the simpler frameworks have a fairly steep learning curve, so unless the project requires the kinds of functionality that they provide, it may be better to fall back on more static methods of development. These frameworks shine for single-page apps, and can provide a “native-like” experience for the end user when properly coded.

The web development industry moves very quickly, and in agencies it can seem to move even faster due to often-aggressive client deadlines. As developers, one of the best ways we can provide value to both the client and our agency is to always evaluate both the tools we are using now and those we might use in the future to decide. By constantly assessing the tools we use, we will both be more efficient – allowing us to spend more time on the things that matter, like Twitter creating features that solve client requirements.

About the Author: Michael Behnke is a website developer and software engineer, a tech geek, focused on front-end programming but also a bit dangerous on the server-side. He is a JavaScript and Android enthusiast. Mike Behnke works at Enlighten Agency (@EnlightenAgency) and tweets at @LocalPCGuy.