Atomic Smash homepage splash

Mac OS power tools for web development

Words by Anthony HartnellDecember 8, 2016

At Atomic Smash we use a number of different code editors and in this article I wanted to share some of my favourite workflow tips which will hopefully help you to improve your development processes.

Brackets, Atom and Sublime are three of the most common code editors that can be extended with a vast amount of themes and packages to suit your workflow.

sublime_text_logo

Sublime Text

Sublime Text has a free and paid for option meaning you can evaluate it for free to see if it’s right for you. In order to get the best out of it you’ll need to add the package control plugin at  https://packagecontrol.io/installation which opens up the ability to install hundreds of free and open source plugins and themes. 

Here are some of the more popular sublime packages:

  • Emmet – speed up your HTML and CSS workflow
  • ColorPicker – show a colour wheel inside the editor
  • cssComb – sort css properties
  • FileDiffs – compare differences between two files
  • SetiIcons – display file type icons in the file tree
  • PHP-Twig – twig support

 

Brackets editor logo

Brackets

Brackets is an open source editor built by Adobe that is targeted at Javascript, HTML and CSS development. Out of the box it comes with some handy features like Live Preview and the ability to extract design information from a PSD. As you can imagine it has a colour picker built in which can be found by pressing Cmd + E on any CSS colour code. Alongside Sublime’s Emmet and File icons here are some additional packages:

 

Atom editor logo

Atom

Atom, an open source editor built by Github has full git integration which is an extremely useful feature and is why it’s my editor of choice. I’ve customised my installation with the following set of plugins:

 

Snippets

If you find yourself typing the same code blocks over you should look at a lesser know feature called Snippets- a configuration file that lets you write your own code syntax shortcuts. Snippets can be written for every language supported in the editor and triggered by the tab key. Thankfully custom snippets always appear at the top of the suggestions list while typing so you can focus on coding.

Creating a snippet

  1. In Atom, select Atom > Snippets to open the config file
  2. Enter the code snippet you want to assign using the tutorial at http://flight-manual.atom.io/using-atom/sections/snippets/
  3. Save the snippet and begin using it straight away by typing the shortcut and pressing Tab

Some useful PHP and Twig snippets:

Mac OS Terminal Icon

The Terminal

Knowing just a handful of terminal commands can significantly improve the speed at which you can get things done on a computer and will allow you to spend less time clicking and more time typing. 

Mac OS is built on the Unix framework- one of its defining features being that everything is a file. What this means is that a number of resources and file types can be queried with Unix filters- commands that allow you to manipulate data.

Here are some essential terminal commands: https://www.tjhsst.edu/~dhyatt/superap/unixcmd.html

Example uses

1. Create 5 placeholder files for the WordPress Media Library

cd ~/Desktop
mkdir placeholder-images
cd placeholder-images
touch test.pdf; touch test.doc; touch test.jpg; touch test.png; touch test.gif
echo " " > test*

*The WordPress Media library ignores some files that have no content which is why I’m using echo to print a blank space into any files starting with test. This adds 2Kb to the files.

 

2. Create an SSH key and copy the public / private key

ssh-keygen-t rsa
# Copy the public key to the clipboard
cat ~/.ssh/id_rsa.pub | pbcopy

# Copy the private key to the clipboard
cat ~/.ssh/id_rsa | pbcopy

 

3. Make every file in a directory read-only

mkdir ~/Desktop/my-test-directory
touch testfile.txt ~/Desktop/my-test-directory
touch testimage.png ~/Desktop/my-test-directory
chmod -R 400 ~/Desktop/my-test-directory
ls -lA ~/Desktop # the permissions on my-test-directory will now be read only
# File permissions explained: http://endlessgeek.com/2014/02/chmod-explained-linux-file-permissions/

 

4. Quickly find all png images in a directory

grep -r ".png" ~/Desktop/my-test-directory

oh-my-zsh

Pimp your terminal with iTerm and Oh My Zsh

While you can customise the built-in terminal in Mac OS, iTerm, a new and improved terminal comes bundled with loads of awesome features like coloured tabs, multiple layouts, themes and more.

You can customise the colour schemes to match your preferences or download a list of pre-made colour schemes at http://iterm2colorschemes.com/

Finally there is one more thing you need to install before you’re fully pimped: OH MY ZSH- an extension that comes bundled with even more themes and plugins like Git integration, better auto completion, select to copy and much much more. Follow the installation notes at https://github.com/robbyrussell/oh-my-zsh and view all the available themes at https://github.com/robbyrussell/oh-my-zsh/wiki/themes.

Profile picture of Anthony Hartnell

Anthony HartnellDeveloper

Anthony works in the development team and enjoys creating plugins and integrating maps, libraries and other APIs into Wordpress.

Go back to top

Keep up to date with Atomic news