I am available for projects starting April 2017. If you want to work with me, get in touch.

rowsBack to the list
starSave for later

10 Useful Apps For Mac, To Help You Develop Better Websites

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.

SourceTree

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.

Sublime Text

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.

Hammer for Mac

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.

It uses a unique type of HTML comments to declare your sub-modules, variables and helpers, then tie them together. But its work doesn’t end here: it constantly scans for changes in a given project directory, so once you save a given file, like a stylesheet or a JavaScript piece, it will automatically recompile the source and even refresh your browser for you. No more ⌘ + TAB to switch to different windows, so it saves you an enormous amount of time in the long run.

Hammer for Mac

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!

Hammer is easy to grasp and supports CoffeScript, SASS & SCSS (if this is something that floats your boat), but it’s no stranger to regular JavaScript and CSS.

Gradient for Mac

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.

ImageOptim

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.

ImageOptim

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 for Mac

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.

ColorSnapper

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?

ProCSSor

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.

ProCSSor

Transmit

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.

MAMP

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.

Bonus: VirtualHostX

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.

VirtualHostX

Summary

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.

Published by , on .

Professional digital designer, specialising in UI/UX for web & apps. Opinionated gamer (@_skepticalgamer), avid petrolhead, and a proud full-time dad.