I’m always on a lookout for some tools that could aid me in making my design & front-end development workflow faster, more streamlined and productive. Here are 10 apps for Mac, I see as essential when coding websites and web apps, to do it efficiently. No, a Twitter client is definitely not one of them.
Working on a project without a solid version control & source code management, is like building with Lego in a pitch black room: you won’t be able to retrace your steps or make amendments to improve the build without retracing your actions via ⌘ + Z.
On the other hand, version control systems, such as Git or Subversion scare the living hell out of some developers (and designers even more). This is where SourceTree comes in with its easy to understand workflow, full support for Git & Mercurial, versioning mechanisms such as GitFlow, all of which are making working with source code a pure pleasure.
SourceTree works out of the box and, unlike a native GitHub app, can handle any remote repository, as long as its accessible. Full Git support in a great GUI makes it my go-to app. And it’s free.
Not a day goes by, where I don’t have ST open, even for a brief moment. It has powerful features which are absent from many other editors, such as split-view workspaces, auto-suggestions (even for variables), proper syntax highlighting for many different languages and superb handling of projects.
If you don’t like text-based configuration, it might not be exactly to your taste, but it’s worth trying anyway. Currently, ST is a backbone for all the front-end development and web user interface design I'm doing every day.
Sublime Text 2 is available for free for evaluation purposes (there’s a new beta release of Sublime Text), but if you plan to use it on a continuous basis, you should purchase a licence for $70.00, which is totally worth it and it supports its developer.
To speed up my workflow over the years, I’ve been using many tools, although not a single one of them was as great, as Hammer for Mac is.
To put it simply, Hammer is a static compiler. It works by compiling all your declared pieces of front-end code, such as headers, footers, sidebars or whatever you are going to come up with, into a static site or app.
Hammer has also a unique feature of publishing your builds with a click of a button. This way you can give a unique link to your client or testers, to have a look at a particular revision of your work. Clever!
I’ve written a bit about Gradient for Mac before, so there’s no point writing the same thing twice. Just to briefly describe it to you, Gradient is a small tool which makes it dead easy to prepare CSS code for gradients, ready to copy and paste.
Saving tons of images in preparation for the site launch can be a daunting task. Here’s where ImageOptim comes in and saves you from spending your precious time on saving images in Photoshop, one by one.
All you have to do is open it and drag & drop images from the file system to ImageOptim’s window. The algorithms and compression ratio will be calculated automatically to preserve as much details as possible.
Anvil is one of those apps that we don’t really need until we try them: a silent menubar resident, which allows you to turn a project folder into a working local site.
It works for any static HTML site or app, as well as for apps based on Rack. There’s no more fiddling with Terminal to create yet another virtual host which isn’t really needed.
Notice: Anvil doesn’t play well with MAMP, so you’ve been warned.
To determine a solid colour palette, you need a good colour picker. ColorSnapper, although titled with American spelling, it’s a very good tool to pick the paint off your pixels.
It can automatically convert the value from and to any given format, whether you use HEX, RGBA or HSL, it copies the converted value to clipboard and stores a few of your last-used colours as well.
What more would you need from a colour picker?
When you’re building a static app or a UI for an API, you may want to optimise your CSS yourself. ProCSSor makes it easy in exactly the same way ImageOptim does: just drag & drop your CSS files, then watch the magic happen.
To get your files to the server, you need a good FTP client. And I haven’t seen any FTP software doing a better job than Transmit.
It’s the consistency, ease of use and the speed with which Transmit performs all the actions. You can read about all of Transmit’s features on its homepage, where you can buy it as well for $34.
Those of you who build anything in PHP on a Mac, know this package: it’s a twist on Apache, MySQL & PHP stack for web development, but intended for OS X. It contains also some basic log viewer and PHPMyAdmin, which is incredibly helpful for managing MySQL databases, but other than that it’s a barebones setup.
MAMP is available for free, but if you fancy some more tools, better environment and a more accessibility, you can go for MAMP Pro, which costs about $59.
If you use MAMP (and not all of us have to, or need to) you can try this awesome virtual host configuration utility, which will make it dead-easy to add new sites to your local server.
Knowing that you can't really test virtually hosted sites on your local network without the need for running expensive DNS server, VHX makes it possible to browse them via free local proxy service, which you can enable separately for each of your vhosts.
VHX isn’t free, but there is a 14-days trial available. After it expires, you can buy the app for $39.95.
All of the above apps are used to help me spend more time coding quality websites and web apps, rather than configuring various pieces of my web development environment all the time.
I hope you found the above selection useful. If you know of any other great apps which could help front-end developers, let me know; there’s plenty to discover on the Web and we can all benefit from the findings.