Speed Up Your Web Development Workflow with Cactus for Mac

As a design-oriented web developer, I usually spend more time than I should editing CSS files. As a result, my HTML gets slightly neglected, which can lead to a bit of a mess when dealing with larger websites. Using a CMS such as WordPress is a nice way to organize larger sites, but lately I’d been looking into static options, which have proven to be much quicker. The only problem with these is that they take some time to set up (especially for designers who aren’t familiar with the command line).

Enter Cactus for Mac. It’s a beautiful application aimed at designers and front-end developers who want to focus on hand coding their HTML and CSS, without worrying about the initial setup issues presented by command-line tools. I was able to try out Cactus this week, and chat with the creators of the app, a trio of designers from The Netherlands: Jorn van Djik and Koen Bok – of Sofa and Facebook fame – and Benjamin Nathan. This is what they had to say about the origins of Cactus:

Back when we were still at Sofa, our websites ran an early version of Cactus. The product pages and our company page were built with it. Initially, Cactus ran a small local web server and made it really easy to get a basic file and folder structure set up.

After we got acquired by Facebook, we decided to turn it into an open source project. Which turned out to become quite popular on Github. Hand coding a website takes a lot of effort and Cactus was helping a lot of folks out with their workflow. But the terminal isn’t for everyone, so we decided to turn Cactus into a simple and really easy to use product.

Since there’s no need to use the command line to set up your file structure, using Cactus is pleasantly simple. All you have to do is open the app, and create a new project from one of the templates presented: a blog, portfolio, or personal vCard-type site, as well as a template void of styles with just the basic file structure defined. Once you’ve selected a template, the site immediately opens in your default browser, and you can begin creating your website in your favorite editor.

What makes editing with Cactus so great is the instantaneous auto refreshing; simply save your changes in your text editor, and the preview will update instantly in the browser. Also, since Cactus automatically creates a local hosting environment for your websites, you can be sure that what you’re seeing in the browser preview will also show up on the server once you fully deploy.

Image

There are a few interesting little features in Cactus that are worth highlighting, including the ability to use the auto refreshing feature with mobile devices as well as PCs. As mentioned before, there’s extensive markdown support included, and you can also use SASS, SCSS, and CoffeeScript with Cactus if you’re into that sort of thing. Other small additions such as that of the error console show how much care has gone into this application.

The design of Cactus is groundbreaking in a way; it embraces the minimal, or ‘flat’ aesthetic introduced to Apple products with iOS 7, while maintaining the usability that Mac apps are known for. I asked van Djik about the design process behind Cactus, and he was able to give some insight:

When we started to create some early designs for Cactus, iOS7 had just been announced. We thought it was interesting to see how far we could take some of the visual cues of iOS7 to the desktop. But most of the time went into the interaction. From the beginning we wanted Cactus to become an integral part of your workflow without telling you how to do your job. So we spend a lot of time thinking about how the interface should behave and if we could simplify things even further.

Clearly the team behind Cactus has created the app with care, from the back-end functionality to the pixels on top. Many designers (myself included) will enjoy using this app, not only because of the tools it offers, but because of the amount of attention paid to its design.

When reviewing an app such as this one, I always want to know if it will continue to be updated in the future. Thankfully, the folks at Cactus are going to be pushing out new updates regularly; when asked if there were any future plans, the team responded:

The most exciting part about Cactus (and other static site generators) is that they provide a new, better way to build websites. But it might take some time for everyone to get on board. To make it easier, we’ll be posting tutorials and examples for real life tasks over the next few weeks, like building a teaser page or integrating with existing frameworks like Bootstrap or Compass.

We’ll also continue to add features to Cactus. We’ve already had a bunch of requests we’re going to look into, such as HAML support, more templates and other integrated deployment options. The great thing is that the core of Cactus is open source so people don’t have to wait on us to extend Cactus.

I’m quite excited about Cactus, and I can’t wait to see the new updates that will be coming to the app. If you’re a designer who wants to be on the cutting edge of web development, or just want to hand code your sites without worrying about complicated file structures, then Cactus is for you. If you’re a developer who’s familiar with the command line, and would rather not use the app, you might want to check out the open-source version of Cactus on Github.

Cactus is on sale in the Mac App Store now for $29; a free 7-day trial is also available.

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions