New Mac Setup Checklist: For Drupal (Front End) Developers

Have a shiny new Mac? :)

Botched a Mac OS upgrade and it's time for a fresh install? ;(

I kept a google doc with our company's epic "new computer" checklist, and it's long overdue to be written as blog post. Tools constantly evolve so I'll keep this post updated over time. 

Mac Settings

1. Mac > Preferences > Firewall = On
2. Mac > Time Machine = Set it up
3. Finder > Preference > Configure everything

Housekeeping and essential apps

1. App store > Install Xcode (It'll take a while)
2. Browsers: Chrome, Firefox, Opera 
3. Terminal - iTerm2 (Set as default terminal)
4. MySQL GUI - Sequel Pro
5. Git GUI - Git Tower ($80 USD) / Source Tree (Free) (For Resolving Git Conflicts)
6. File Sharing: Drop Box / Google Drive
7. Productivity: Alfred

A Few More Mac Settings

Show Hidden Files

Open Terminal

$ defaults write com.apple.finder AppleShowAllFiles YES

Hold 'alt' on your keyboard, then right click on the Finder icon in the dock and click Relaunch. 

Save Screen Captures to ~/screenshots

$ defaults write com.apple.screencapture location ~/screenshots/ $ killall SystemUIServer

Create a .bash_profile if there’s already isn’t one

Check to see in there's a .bash_profile file in your user folder if not...

$ touch ~/.bash_profile

Design / UX Software (Commercial)

1. Download Adobe Creative Cloud 
2. Design / SVG's -  Adobe Illustrator
3. Photo Editing - Photoshop 
4. UI Design - Sketch /  Axure / Adobe XD (We're starting to experiment with it)

IE Testing Virtual Machines

EG. Why we need to buy upgrade to larger expensive mac SSD's....
 

1. VMware Fusion ($80 USD) / Virtual Box (Free)
2. Download IE Virtual Machines
   • IE 9 on Windows 7
   • IE 11 on Windows 7
   • Edge (Stable) on Windows 10
   • BEFORE your first login - Create a "snap shot" of the VM so you can roll back the 30 trial on the OS
   • Login and run windows updates. Currently the default login is: user =  IEUser password = Passw0rd!

Here's are detailed instructions for VM Ware fusion.

Command Line Tools

Install Xcode Command line tools

$ xcode-select --install

Install Homebrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Set environment variable

$ echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bash_profile

* For Mac OS Yosemite follow these instructions

Install Git

$ brew install git

Confirm you're using home brew's git. 

$ git --version

Should return something like this

git version 2.7.4

Not something like this

# Not the Apple default git!
git version 2.5.4 (Apple Git-61)

Setup Ruby (Optional)

Note: We use for supporting legacy websites build back in yesteryear when Ruby Sass had way better features that Lib Sass. Don't bother with this step if you don't need to support old rubySass / Compass sites.

# Optional Ruby Tools
$ brew install rbenv 
$ brew install ruby-build 

Install Required Legacy Ruby Versions

$ rbenv install 2.0.0-p451
$ rbenv rehash

Set global version to most common version used.

$ rbenv global 2.0.0-p451

Install node.js, bower and gulp

$ brew install node

Then use node to globally install bower and gulp

$ npm install -g bower 
$ npm install -g gulp

Sublime Text 3

Download sublime text 3. Once installed, you will need to install package control to manage all of the Sublime Text 3 packages.

To install packages use Ctrl+Shift+P or Cmd+Shift+P in Linux/Windows/OS X, type install and select "Package Control: Install Package" from the list. 

Install Many Sublime Packages

• BracketHighlighter - Bracket and tag highlighter for Sublime Text
• Color Highlighter - Underlays selected hexadecimal colorcodes with their real color.
• CSS Extended Completions - CSS Completions, LESS Completions, SCSS Completions
• CSS3 - The most complete CSS support for Sublime Text 3
• Emmet - Web-developer’s toolkit that can greatly improve your HTML & CSS workflow [Demo]
• Four Spaces JavaScript (snippets)
• JavaScriptNext - ES6 Syntax
• PHP-Twig
• Sass
• SCSS
• SideBarEnhancements - Enhancements to Sublime Text sidebar. Files and folders.
• SublimeLinter // Packages List - Interactive code linting framework
• SyncedSideBar - Plugin to sync project sidebar (folder view) with currently active file

SublimeLinter-jshint

SublimeLinter-jshint provides an interface to jshint. In order for this plugin to work jshint must be installed first. 

$ npm install -g jshint 

SublimeLinter-contrib-sass-lint

SublimeLinter-contrib-sass-lint provides an interface to sass-lint (Node,js). In order for this plugin to work sass-lint must be installed first. 

$ npm install -g sass-lint 

Install Drush & Composer

Install Composer globally

$ curl -sS https://getcomposer.org/installer | php
$ mv composer.phar /usr/local/bin/composer

Add Composer's directory to your path by editing your .bash_profile

$ export PATH="$HOME/.composer/vendor/bin:$PATH" 

Reload your terminal or just re-source the configuration you just added.

$ source ~/.bash_profile 

Use composer to install latest stable 8.x release of drush

$ composer global require drush/drush:dev-master 

To roll back to earlier release versions of Drush use

$ composer global require drush/drush:8.* 

Local Web Server 

Depending on the project we've run Mamp, or Drupal VM. (We're keeping a close eye on Kalabox)

MAMP PRO - $80

Download Mamp and Install

For each version of PHP you run, update following values in unique php.ini

max_execution_time = 90; Maximum execution time of each script, in seconds 
max_input_time = 90; Maximum amount of time each script may spend parsing request data 
memory_limit =1024M; So Kint() needs lots of memory! 
pdo_mysql.default_socket = /Applications/MAMP/tmp/mysql/mysql.sock 

Drupal VM 

Follow the quick start guide.