Tools for the Busy Web Developer

By Elizabeth Phillips

Time is by far the most valuable asset for every serious web developer. Thankfully, there are a wealth of tools available for streamlining the development process, whether you’re building a simple landing page or a complex web application. In this article, I will share few tools that have helped me save time and that you might consider adding to your workflow.

Wireframing and Prototyping Tools

If your website needs to be redesigned or built from scratch, there are many tools available for designing the UI and layout that can speed up your workflow.
Moqups and Mockflow are both UI, wireframing and mockup tools similar to the popular Balsamiq. Moqups and Mockflow both offer a limited free level plan while Balsamiq offers a short term free trial.

In my view, Mockflow stands apart from the others in that you can share notes and chat in real-time with co-developers, users and clients as you make design decisions. This feature could save you hours or days of revisions and help you reach a final design acceptance much faster.

Web Development Frameworks

Working with a good front-end development framework is an absolute must for busy developers. Serving up production-ready scaffolding, base CSS, HTML/CSS/Javascript components, libraries and testing platforms to ensure responsiveness for all the myriad devices that your users employ, development frameworks are one of the most valuable items in any professional developer’s toolbox.

Bootstrap is, as you probably already know, a very popular and open-source development framework in wide use that has all the above features. However, a new noteworthy alternative that you might consider is Kickstrap. Kickstrap extends Bootstrap’s functionality to include features like the ability to package an app, including all its dependencies. In addition, Kickstrap offers a number themes and extras that are ready to go right out of the box.

Coding Tools and Text Editors

People are passionate about their code editor. While some die-hards insist a simple text editor is all any real developer needs, a good code editor can save a ton of time with features like syntax highlighting, auto-formatting, auto-completion, code snippets, auto-preview and more.

There are a lot of options, with some people expressing their preferences SublimeText, Coda, TextMate, BBEdit or Brackets. Although Brackets is relatively new, it contains useful features such as the ability to edit HTML and CSS while viewing the updates on the fly in the browser and the ability to quickly access the the CSS and JavaScript associated with elements on page.

Miscellaneous Tools

A plethora of other apps and tools exist for speeding up your development process, with more emerging all the time.

Tools such as ColorZilla, Adobe Kuler and Dribbble can help you choose color schemes in minimal time. Adobe Kuler is a must-have for color schemes because it allows you to browse a variety of pre-made color schemes or use the interface to create your own. ColorZilla allows users to quickly find the color of any part of a website or image in the browser (Firefox or Chrome) which is useful in designing pages and themes. Meanwhile, tools like Typecaster and WhatTheFont can help you make typography choices.

A fast, easy-to-use FTP client such as CyberDuck or FileZilla can make uploading your code and other assets to your testing and/or production server a snap. CyberDuck is simple to set up, easy to use, and allows developers to drag files into a widget to upload in no time at all. On the other hand, FileZilla is the ideal choice for transferring large files or groups of files.

It may seem obvious but a reliable Internet connection is essential for a developer to succeed. To minimize technical difficulties, web developers need to invest in a fast, fiber-optic internet service if it is available to them. Google Fiber delivers a connection that is 100 times faster than today’s average broadband speeds but is only currently available in three US cities: Kansas City, Provo and Austin. Verizon Fios can potentially provide similar speed and efficiency, but is available in more areas.

Last but not least, don’t underestimate the value of a computer with a decent-sized screen for ample workspace. Good, noise-canceling headphones can help block out distractions. Finally, a comfortable, ergonomically designed chair can make staying focused and comfortable easier.

Choose What Works for You

Having the right tools won’t make you a good developer, but they will make a good developer a much more productive one. Speed is of the essence for the professional web developer, and these tools can make your workflow much smoother, faster and, hopefully, more profitable.