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
- Mac > Preferences > Firewall = On
- Mac > Time Machine = Set it up
- Finder > Preference > Configure everything
Housekeeping and essential apps
- App store > Install Xcode (It'll take a while)
- Browsers: Chrome, Firefox, Opera
- Terminal - iTerm2 (Set as default terminal)
- MySQL GUI - Sequel Pro
- Git GUI - Git Tower ($80 USD) / Source Tree (Free) (For Resolving Git Conflicts)
- File Sharing: Drop Box / Google Drive
- 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)
- Download Adobe Creative Cloud
- Design / SVG's - Adobe Illustrator
- Photo Editing - Photoshop
- 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....
- VMware Fusion ($80 USD) / Virtual Box (Free)
- 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
You probably will get a nag message about Xquartz If you do - Download it from their site
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
To get Drush with MAMP and MySQL to work in command line follow these instructions: https://www.drupal.org/node/1651282
Drupal VM
Follow the quick start guide.
Post a comment if you think we missed anything or there's a tool you find useful in your day to day Drupal (Front End) development.