Best Productivity Tools for Web Developers

Following on from our recent post about the best productivity tools for web designers, we thought we’d share some of the tools, software and industry tips that our developers use to program our client’s websites to perfection.

Developing a website from a set of designs is very much a step-by-step process. Each step along the road is as important as the last, and involves a variety of tools. Below we’ve outlined some of the steps that we take and the software that our developers utilize:

HTML/CSS page templates

Every development project must start with static page templates, which later get turned into dynamic and interactive pages. Each of the templates is coded based on the designs using a text editor, such as Sublime Text, Brackets or MacVim. Each of these editors come with great extensions and built-in features, which makes for fast and effective coding.

Frameworks

Our designs are primarily based on the Bootstrap grid framework. This framework then gets customized to suit the needs of the project. We use the grid layout to ensure a consistent match between the designs and the finished site. Depending on the project, we may use Bootstrap, Foundation or Susy frameworks.

Setting up a local server

Once the groundwork has been done, we need to build our templates into the CMS of choice; either WordPress or TYPO3. Both CMSs are programd using the Server Side language PHP, so our developers need to set up a local server on their own machines to run and test the site. Software packages such as MAMP or XAMPP allow you to turn your computer into a server to run the Server Side code and build out the rest of the site.

Pre-processors, compilers and task runners

To make building and running a website faster and more efficient, our developers use a variety of command line and application tools. The pre-processor language SASS (SCSS) makes writing CSS not only faster, but also more efficient for the future. In addition, writing in SASS provides a clear set of style lines, that can translate across the team.

To make our websites load and run faster, the CSS, JS and other files are then compiled, reduced in size and bundled together using CodeKit, a fantastic piece of Mac software.

We also use task runners like Grunt and Gulp to turbo-charge our workflow, and ensure that changes are applied to multiple files simultaneously.

Deploying the website

After the website has been built and is ready to go online, we use an FTP client like Transmit or Coda to upload the files to the server. Small changes to files can then be made on the server directly, rather than having to reupload them.

Version control and revisions

Not every website is perfect when it first reaches our staging servers, so we use tools like GitHub, BitBucket and Beanstalk to manage versions and revisions of the project. By using Google Chrome Canary’s powerful built-in DevTools, our whole team, from PM to designer to developer, is able to suggest pixel-specific layout, type and color alterations to the live site. These changes can all be logged, tracked and dealt with through a GIT version control tool.

There are of course many other smaller details and steps along the way, but all of the above make up a suite of tools and software applications our developers use on a daily basis, and are integral to the process.

Why not give some of these tools a try and see how much your development workflow can improve.

Back to all newsBack to all news