In order to get a good overview of me as a developer and how I work on a day-to-day basis, I’ve decided to write this post on the general tools and technology I work with. Hopefully future posts will build on this as changes to my workflow are introduced, so it’s nice to have a starting reference point. I’ll link everything I use, as I fully recommend everybody to check them out.
Operating System and Hardware
For as long as I’ve professionally developed, I’ve been based on OS X. Starting about 4 years ago on a big 2012 17” MacBook Pro. Nowadays I’m rocking a 2014 15” MacBook Pro Retina with the following specs:
- 2.6GHz Quad-core Intel Core i7
- 16GB RAM
- 512GB Flash Storage
Over the past few years I’ve seen different development environments come and go. MAMP, docker, homestead, etc. The newest player in the game is Valet by Laravel. It allows you to set one or more directories as your “root” for all of your projects, and then simply navigate to
project.dev in the browser, where
project is a directory in your root directory. No other setup required. No modifying hostnames or ports, or starting and stopping servers for different projects. It just works.
For more advanced server functionality, such as elastic search or catching outbound emails I also use docker alongside to provide these services. To make this workflow easier, I created a couple of aliases to synchronise the tasks of starting valet and a supporting Docker file.
I use iTerm, an improved version of the default macOS terminal.app. I replace the standard bash shell with the more powerful zsh alternative. This allows me to utilise many plugins to aid productivity such as git, z , docker and more .
Most of my git usage is done via the command line using the zsh git plugin, but for peace of mind in those times when you’re doing a potentially dodgy commit, I use Tower.
In the rare instance I use FTP (usually to transfer images, and almost always over the SFTP protocol) I use Transmit to get the job done.
For any database management, whether local or on production servers, I use Querious by Araelium.
As a frontend developer I have to deal with PSD and Sketch files sent over from the designer to code up. Both of which are paid license products, and I’d rather not have them on my machine if I can help it. Not to mention issues with fonts in Sketch files, but that’s beside the point. To get around this problem, I use an app called Avocode. This allows the designer to upload visuals once they’re ready for development, and for the developers to extract styles and assets in a pixel-perfect fashion from the interface. The app also boasts the following features:
- Store SASS/Less variables
- Upload revisions
- Comment and request feedback on parts of the design
- Multiple image export formats (SVG, PNG, JPEG, Base64)
- Export images at multiple resolutions
- Copy text as HTML
When you work with images on the web, you have to be very careful about the images you’re adding, making sure they’re not too heavy for the user to download. To get around this I use a handy app for compressing and optimising images called ImageOptim which does a great job at compressing for the web.
I write all of my CSS using the Less pre-processor language, which is transpiled down the standard CSS using our webpack workflow.
Webpack is great. Like really great. But boy is it an endless struggle to set up a config for each project you use it on. Luckily, Jeffrey Way came and saved the day with the glorious Laravel Mix package that makes web pack setup a breeze with a fluent API for defining Webpack build steps, as well as a fully customisable webpack config you can tweak to your hearts content.
Bootstrap is my CSS framework of choice, and has been for a long, long time. The grid, mixins and generally awesome features make it an easy win. It allows me to selectively pull in what I need for the specific project via it’s use of the Less pre-processor for the raw source files. Less code bloat, and no awful classes cluttering up the dom.