blog-thumb-2.jpg

OSx Web Development Environment

Configuring your mac for development can be a frustrating task, recently I had hard drive failure but thankfully I had the programs in place to quickly get back up and running. However, remembering the numerous applications I had installed over the years was difficult to say the least. I have compiled a list of essential programs and utilities for web design & development that developers should have in order to avoid this pain in the future.

 

Core Applications

Google Chrome - Hands down the best browser out there, development tools are fantastic especially its easy device emulator.

Sublime Text - Probably the most popular text editor, Sublime Text is fast and customisable. It has a plethora of plugins and themes.

Iterm 2 - A terminal replacement providing extra features of the standard OSx implementation

Resillo Sync - Backup program that syncs my essential folders with other devices and a digital ocean server. The reason I chose this over dropbox is the ability to exclude folders based on name. I exclude 3rd party vendor folders, which significantly reduces the processing and time required to sync.

 

System

Homebrew - Essential OSx package manager, it gives an easy and maintainable way to install software like node, image magic etc.

Node js & NPM - Popular programming language that is used for more than just building websites and applications. I use gulp to compile scripts and styles as well as using various other task runners to optimise my development workflow.

Node Version Manager - Node JS moves on quickly and programs I've built in the past can become incompatible with the latest version. Using nvm allows me to easily switch to the node version the application was built upon.

Bower - Although it’s increasingly being replaced by Node Package Manager, Bower allows you to install and maintain GitHub packages in your websites. Most GitHub plugins are available through this service and can be easily reinstalled on another machine with one command. Need JQuery in a project? Simply run ‘bower install jquery —save’.

 

Local Web servers

Laravel Valet - This is a revolutionary new program, it automatically scans a folder and serves each folder as a website using “[folder-name].dev” as the url. Getting up and running with a new project is seriously fast.

MAMP - An alternative to Valet, MAMP gives you all the tools you need to get up and running with a new project.

Vagrant - If you're working in a team and all need to run of the same enviroment, vagrant is a great option for keeping in sync with your co-workers.

 

Tools

Gulp js - A node JS task runner's main purpose is to compile scripts and sass files along with extra features like auto-prefixing for browser versions, minifying code and running browserify to serve sites on an external url and synchronise page position across different devices.

Yeoman - Scaffolding application to help kickstart projects, I generally use this when starting an experimental project. It provides a set of scaffolding options for a wide variety of languages and frameworks including Angular, Node JS and Wordpress.

Sequel Pro - Sequel Pro is a great GUI for mySQL, connecting to local and external databases is a breeze.