Atomic Smash homepage splash

Our current development tools and workflows

Words by Adam WardMarch 28, 2018

In this post, I will run through some of the development tools we use in our current workflow. I’ve always really enjoyed finding out about other Developers’ setups, so I thought I would share our dev team’s favorite tools.

As a studio, we all work on Macs, so apologies in advance for a bit of a bias towards Mac apps! Don’t run away PC users, a lot of the applications we use can also be used on multiple operating systems 😉

Code Editors

At Atomic Smash we all use Atom. It wasn’t always this way, some of us used Brackets, Sublime Text or VS Code but for the last year, we all moved over to Atom. As code editors go, it’s pretty reliable, has a great community and lots of great packages/plugins. One that deserves a special mention is the Pigments plugin, which I’m sure has been mentioned somewhere on this blog before! It’s a really handy little plugin that will suggest variable names as you type and show you a little preview of colour variables to help you figure out what the hell ‘$brand__colour–4’ is.

atom editor

Another feature, that we have only briefly tested, but love, is Teletype, which allows you all to work on the same project from your own machines. It’s a bit like how you collaborate on Google Docs. It sounds like mayhem (and kind of is!), but also a great tool and well worth trying out.

atom teletype

Terminal / Command Line

The majority of our dev team use the combination of iTerm and OhMyZSH. iTerm is an OSX replacement for Terminal. It comes with great features, such as a better search, autocomplete, command history, split panes and a ton of other useful functions. OhMyZSH is a framework for Zsh (Z shell). It’s a great tool for theming, configuring aliases and comes with lots of useful plugins. I have found this pairing has really sped-up my Terminal tasks. If you haven’t heard about either of them yet, they’re definitely worth checking out!

Source Control

At Atomic Smash we use GitLab to manage all of our projects; we use the hosted version on our own server. GitLab offers a lot more than just a platform to house your repositories. It has tools for planning projects, issue tracking, testing, deployment, and monitoring. We use most of those features and in general find the interface and design much nicer and better to use than its competitors.

gitlab workflow

Front-end Automation

Gulp is our task manager of choice. We use it for compiling, error checking and minifying our SASS/CSS, JS and images. We also use BrowserSync with Gulp to live-inject changes as we develop, which is a really useful feature for speedy front-end work.

We include Gulp in our projects via NPM, which is what we use to manage all of our front-end dependencies. NPM ensures our developers are all using the same version of each dependency and means we don’t need to keep any of the extra dependency code in our repositories.

Want to start using Gulp on your projects?

Follow this step-by-step guide.

Read more
gulp workflow logo

Local Development Environment

Previously we used MAMP and Scotchbox but for the last year or so we have settled for Homestead, which is a Vagrant box by Laravel. It comes with an NGINX web server, which is what we use on our production sites and works perfectly with Composer, which we use for all of our PHP package management. Homestead also works well with WordPress (essential for us!) and comes pre-installed with the wp-cli.

Working locally with WordPress?

Read Adam's post on some of our favourite tools.

Read more

Servers

When it comes to servers, we always use Digital Ocean. We find their service is flexible, reliable, reasonably priced and super fast! Digital Ocean also works perfectly with Forge, which is another tool by Laravel. We use Forge to provision and manage all of our servers. It makes it easy to manage SSL certificates, edit NGINX configurations and run automated scripts (‘recipes’). Forge saves us a lot of time and means we no longer need to run repetitive tasks for setting up servers every time.

Want to learn more about Forge?

Read David's post for more insight.

Read more

Deployment

We currently use two methods for deployment. The first is Capistrano, which we have used for a few years now. Capistrano makes it really easy to manage and push code to different dev environments. More recently we have started using the Pipelines within GitLab. Pipelines can be used to perform lots of custom tasks, such as running build scripts, testing and deploying to servers. We use Pipelines to set up deployment rules for each branch, i.e each time we push to a projects staging branch, we have a Pipeline which will deploy code straight from the repo to the staging site.

image of gitlab piplines

Get in touch!

We love to share our development methods and ideas, let us know what you think and what you/your team’s dev tools and processes are, we’d love to hear from you!

Profile picture of Adam Ward

Adam WardDeveloper

Adam is an expert in WordPress development and CRM integrations. His ability to craft WordPress to a users needs makes our websites easier to use.

Go back to top

Keep up to date with Atomic news