Skip to content
Engineering

Stepping Up Your Development Environment Game!

Setting-up a superhero development environment

This post is from 2015, the macOS Yosemite era. Nearly every tool named below has since died, been acquired, or been broken by later macOS releases; I keep the post as a record of what a carefully tuned Mac setup looked like at the time. The dotfiles philosophy is the only part that aged well.

Every developer eventually faces the moment of setting up a new working environment. For me, the transition from a Windows powered PC to a Mac OSX powered laptop was one of the best things I did in my career. I found the openness of things you can do on a Unix based system accompanied with a solid appealing set of software. However, setting everything the way you want it can be time consuming, so I decided after a few trials and errors to share my experience in customizing my machine and how it can be easily transferred into other machines as well.

For up-to-date instructions on how to set up your machine and deal with dotfiles, head over to my article about my bash framework

Customizing the UI

First, let's start with the lightweight things. The desktop and general UI enhancement. I always loved to show some nice widgets on my desktop, and for that I used . Before it I had used , which basically allows you to run custom scripts and display them on the desktop, but I wasn't at all happy with the experience of styling those "widgets" and the availability of 3rd party widgets. Übersicht lets you run system commands and display their output on your desktop in little containers, called widgets. Widgets are written using HTML5, which means they are:

  • Easy to write and customize
  • Can show data in tables, charts, graphs ... you name it
  • Can react to different screen sizes

There was already a nice set of widgets published in the . In my widgets folder, you will find the set of widgets I was using with customized positioning and styling.

Widgets

  • for the date and time in the middle of the screen
  • to show the Muslim prayer times for my area, the green indicating the current active prayer time
  • to show the nice weather forecast. It used the Free Geo IP API to obtain your location, and the Yahoo Weather API (both services are gone now) to obtain the weather information.
  • System Stats
    • : Shows disk usage for mounted disks, with the option to exclude specific disks.
    • : Displays current Ethernet and Wi-Fi status (connected / not connected / IP Address / Mac Address).
    • : Displays the current public IP address.
    • : Display swap file metrics for your system.
    • : Shows CPU usage summary.
    • : Shows a memory usage summary.
    • : Shows incoming and outgoing throughput on a user-specified network interface.
    • : Total system memory benchmarks.

Installation

  • Installing Übersicht could be done using the downloadable zip file, or the recommended way would be via cask (which I will explain later) via brew cask install ubersicht
  • Installing the widgets is done by copying the contents of the widgets folder into Library -> Application Support -> Übersicht -> widgets. However, what I did was set up my widgets to be in my Github repo or dropbox folder so that they are synced and can be backed up, and I linked the folder directly to the desired location via ln -s ~/Projects/Configurations/config/widgets/ ~/Library/Application\ Support/Übersicht/widgets where the first parameter is the location of the widgets/ folder cloned. Note I have included the folder link in my .osx file, you may need to adjust the path of the first argument.

Other Widgets

One element that I used that is not part of Übersicht is Dateline, a discrete desktop calendar with support for iCal and other calendar applications (it has since disappeared from sale).

Geeklets

In the geeklets/ folder there is a backup of the deprecated Geeklet scripts that I used with the old Geektool. If you still prefer it over Übersicht then feel free to use them.

Dock & Desktop Icons

In the flat-icons you will find the set of flat icons I used for my mounted HDD icons and the dock. To easily change application icons, I used LiteIcon, which could also be installed via my caskfile.sh.

To further customize the dock, I used Dockmod, which was the most feature-rich application for dock theming with support up to OSX Yosemite, in order to provide a transparent Dock background. That whole category of tooling is dead: System Integrity Protection, introduced right after Yosemite in El Capitan, put an end to dock theming of this kind.

I also removed the arrow icons for aliases/shortcuts, which was done automatically when executing my .osx file or manually by typing the following command in the terminal (another thing SIP no longer allows):

mv /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/AliasBadgeIcon.icns /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/AliasBadgeIcon_OFF.icns

Finder

Although I had the latest OSX Yosemite update, I was still unhappy with the capabilities of the Finder. I found that was a great replacement. Just head over and you can check the list of things you can do with this great piece of software.

Other Tools

  • : Flexiglass features complete and convenient window management with exclusive multi-touch gestures support, offering a simple way to manage many windows on a Mac with a mouse, keyboard, trackpad, and graphics tablet. It includes different tools to move, resize, and arrange windows on the screen easily and joyfully.
  • : Bartender lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to Bartender's Bar. You can display the full menu bar, set options to have menu bar items show in the menu bar when they have updated, or have them always visible in Bartender's Bar.
  • : Alfred saves you time when you search for files online or on your Mac. Be more productive with hotkeys, keywords and file actions at your fingertips. It is super useful with the powerpack activated with features like clipboard history. Check also for more integrations.
  • : Caffeine is a tiny program that puts an icon in the right side of your menu bar. Click it to prevent your Mac from automatically going to sleep, dimming the screen or starting screen savers.
  • Flashlight: an unofficial Spotlight API that allowed you to programmatically process queries and add additional results. It was a rough but fun proof of concept; it is long dead, since macOS never opened Spotlight up officially.
  • : uBar aims at replacing the Mac Dock. It helps you find the window you're looking for at a glance. If an application has more than one window, you'll know right away. Click that application to open the window menu, which allows you to bring any window or even just the application itself to focus. You can turn window grouping off, and all your individual windows will be shown right in uBar.

Alfred Workflows

Workflows are one of the key features in Alfred v2; They provide a way for you to extend Alfred to perform the tasks you need more efficiently.

For example, with a workflow, you can launch a group of applications from a hotkey, create custom search filters for frequent searches or run scripts from a keyword.

The Workflows I used are (Located in the workflows folder):

  • Fantastical: Allow for easy adding of calendar events.
  • Kill Process: When a process hangs, it's a hassle to open Activity Monitor, search for it, and kill it. Once again, Alfred makes a repetitive task much faster.
  • Shorten URL: Shortening URLs (for tweets, emails, etc.) is a pain; you have to go to the website you want, enter your URL, wait for the transformation to occur, copy it, and move on. This allows for a quicker process across all the famous URL shorteners.
  • StackOverflow: Search StackOverflow questions directly.
  • : Encoding and decoding a string into multiple variations
  • A bunch of Github commands integrations for Alfred.
  • Search Safari and Chrome Tabs: Search tabs in Safari and Chrome (also supports WebKit, Chromium, and Chrome Canary)

Setting-up the Machine

Developers are very picky about their working environment. We may consolidate various . files tailored to our tastes over years and track the change in a version control system. It's no secret that on the UNIX world, dotfiles play a very important part when it comes to making your terminal look good. Be it on Linux, be it on a Mac. Dotfiles are there so you can configure your favorite software to look just the way you like it.

Dotfiles can be used to customize the look of the terminal, to manage bundles with Vim and saving configuration for almost anything.

One thing that normally annoys me, is the fact that whenever I rebuild my machine (or build a new one) I need to copy over my dotfiles, and obviously make sure they are kept up-to-date on all my devices when I change something.

My configuration consisted of the following:

  • Mac OSX terminal with bash shell configured with a forked configurations
  • iTerm2 terminal with zsh shell configured with
  • A cloned gitignore repo for easy fetching of .gitignore files into various projects
  • A Custom set of for various machine-wide configurations

Installation

First of all you will have to clone this repository into your local machine, and since there are a bunch of other git modules in this repo, you will need to recursively clone this repository and all of its children using:

git clone --recursive http://github.com/ahmadassaf/Configurations

Note If you have cloned without --recursive, you may find out that some folders are empty. To fix this:

git submodule update --init

Afterwards you can launch the installation by running sh install.sh. What this will do is:

  • It will ask you if you would like to run an update using the update.sh script. Usually this is good when you have lots of changes in your repos and you wish to fetch all the changes afterwards, but simply skip this if this is a fresh installation.

  • It will install the oh-my-zsh scripts by symlinking the folder and the zshrc into the ~ folder.

  • It will prompt if you wish to install zsh-syntax-highlighting and does that automatically.

  • It will install the bash-it script files and guide throughout the installation process.

  • It will prompt if you would like to add the Aliases defined also to your zsh aliases recommended

  • It will symlink the dotfiles into your ~ folder.

  • It will prompt if you wish to install type-based ls

  • It will prompt if you wish to install grc for command output coloring

  • It will install homebrew and the following brew formulas:

    • Core Modules coreutils, moreutils, findutils, binutils
    • Bash, Bash plugins bash, bash-completion, zsh, grc
    • Development git, heroku, node, mercurial, iojs
    • Git specific addons git-extras, hub, bfg
    • Utilities htop-osx, id3tool, lesspipe, ssh-copy-id, the_silver_searcher, tree, fcrackzip, foremost, ack, p7zip, pigz, pv, gnu-sed, vim, wget
    • Network tools dns2tcp, knock, rename, webkit2png
    • grep, screen

  • It will install cask and the following applications (reading this list back is a small graveyard tour: Mailbox was shut down by Dropbox in 2016, Screenhero was absorbed into Slack and discontinued, and Dockmod and LiteIcon did not survive SIP):

    • Utilities path-finder, alfred, cakebrew, a-better-finder-rename, fastscripts, bettertouchtool, iterm2, launchrocket, gyazo, ubersicht, dockmod, liteicon, cleanmymac, bartender, flexiglass
    • Productivity todoist, evernote, mendeley-desktop, fantastical, slack, screenhero
    • Development sublime-text3, atom, sourcetree, github, brackets, coda, tower, transmission-remote-gui, macvim, sqlite-database-browser, lightpaper, codebox, anvil, hex-fiend, ksdiff, codekit, MAMP
    • Internet, Networking firefox, google-chrome, charles, dropbox, google-drive, mailbox, viber, utorrent, plex-media-server
    • Misc vlc, imagealpha, imageoptim, steam, the-unarchiver, spotify, handbrake
    • Quick Look plugins betterzipql, qlcolorcode, qlmarkdown, qlprettypatch, qlstephen, quicklook-csv, quicklook-json, quicknfo, suspicious-package, webp-quicklook
    • Color pickers colorpicker-developer, colorpicker-skalacolor

  • It will aggregate the iTerm and Terminal themes and prompt you for the name of the color scheme you want to apply and apply it for you

  • It will prompt if you would like to run the .osx file which contains some system wide modifications and runs it for you. I recommend that you read the .osx file and enable or disable the features that you like. I also create some symlinks there for my Sublime Text 3 configurations and the widgets of Übersicht.

  • It will install the

  • It will prompt if you wish to set the bash to the updated version installed by Homebrew

Updates

Simply run sh update.sh and it will take care of the rest

The opinions and views expressed on this blog are solely my own and do not reflect the opinions, views, or positions of my employer or any affiliated organizations. All content provided on this blog is for informational purposes only.