My Setup

4 minute read

A comfortable environment is important to designers, developers and all computer users alike. Whether this be an ultra-customized modded out system or a simple default one everyone has their own preferences. Today I’ll be sharing my system and UI/UX setup running macOS 10.13 High Sierra on a 13 inch Macbook Pro 2017 (w/o touchbar). Included in this post will be all the apps and plugins I use to make my life easier in my day-to-day work/use.

Program Overviews

Apps

Purpose Program Download Cost
Terminal Emulator Hyper.js Website Open Source
Window Manager ChunkWM Repository Open Source
Text Editor Atom Website Open Source
Hotkey Daemon SKHD Repository Open Source
Photo Editor Pixelmator Website $
Vector Editor Sketch Website $$$
FTP Transmit Website $$
Menubar Manager Bartender 3 Website $

CLI’s

Purpose Name Install/Run Repository
Music Control shpotify brew install shpotify Repository
Weather wttr.in curl wttr.in Repository
System Info neofetch brew install neofetch Repository
Screensaver pipes.sh brew install pipes-sh Repository

Extras

Purpose Program Download Cost
Copy/Paste History CopyClip App Store Free
System Monitor iStats Menus Website $
Select Interface PopClip App Store $
Image Optimization ImageOptim Website Free
SVG Preview Gapplin App Store Free
Finding Shortcuts CheatSheet Website Free
Uninstalling Apps AppCleaner Website Free

Configurations

Terminal

Terminal Screen

My terminal emulator is HyperJS, built with purely HTML, CSS & JavaScript. Due to its markup Hyper is heavily customizable and allows for several packages and plugins. I am running my terminal with the “hyper-snazzy” theme and a neat plugin called “hyper-quit” which actually quits the instance of Hyper running on macOS when all of the terminal windows are closed. My shell, while I am most accustomed to bash, has recently been changed to zsh utilizing oh-my-zsh and the ‘pure’ prompt. Both my .hyperjs and .zshrc config files are included in this repository.

When using my terminal for things other than pushing git or making system changes I keep a spare terminal window open for quick commands and information. The two command line interfaces I use on a daily basis are ‘shpotify’ and ‘wttr.in’. The former lets one have basic control over Spotify with swift keystrokes and the latter simply resources the weather through a ‘curl’ command (be wary of curl however, because unlike wget there is no security layer). Lastly, for pure fun and eye-candy I use the neofetch system information display and a script called ‘pipes.sh’ which acts as a screensaver for your terminal (clearly made in reference to the classic Windows NT screensaver of the same name).

Text Editor/IDE

Text Editor

For programming I use Atom, an open source text editor created by GitHub. Like my terminal Atom is heavily customizable with a variety of packages. I run it with the One Dark UI theme and Snazzy syntax theme. For packages I use ‘pigments’ to highlight color codes in hex, RGB or plain text. I also use ‘emmet’, ‘file-icons’ and ‘atom-beautify’. Emmet allows for quicker creation and specification of syntax. For example, when typing ul>li.item$*5 pressing the TAB key directly after outputs the following:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Emmet quickly becomes extremely handy when working with HTML or CSS. Next, the package ‘file-icons’ is pretty self explanatory as it just adds small colored navigation icons next to the name of each file based on its filetype. Lastly, ‘atom-beautify’ allows for easy beautification and organization of code. A few more reasons I prefer Atom as my editor are its integration with GitHub, spellchecker and its great support for markdown.

Extras

CopyClip

CopyClip

A nifty utility, which lives in your menubar, that keeps a short record/history of your clipboard for those times that you either need to keep a few thing ready to paste or forgot that ultra important text you had copied

iStats Menus

iStats Menus

A set of diagnostic and system information monitoring tools with a beautiful UI. iStats’ menus can live in the app itself, the notification/sidebar or your menubar as a dropdown.

PopClip

PopClip

PopClip is a unique addition to macOS that brings an old iOS feature to your Mac. When text is selected a small popup comes up giving you several smart functions such as the basic cut, copy, paste, but also more advanced features like search, define, link and autocorrect.

ImageOptim

ImageOptim

A tiny app that compresses image files without any hassle. Just drag and drop your files and set your compression level and ImageOptim will do the rest by compressing and replacing the source file.

Gapplin

Gapplin

Suprisingly, macOS has no way to preview .svg files so to fix that theres Gapplin. Gapplin is the closest thing to a native, simple and lightweight previewer for vector files.

CheatSheet

CheatSheet is a simple utility that activates when you hold down your Command Key. It shows you all set keyboard shortcuts for a program. Especially useful for those who want to improve there efficiency in video editing and design tools which often have a large amount of specific, hard-to-remember keyboard shortcuts.

AppCleaner

Uninstalling apps/programs on macOS is convenient, but it comes at a cost. Since all app files seems to be self contained a typical user simply drops the .app package in their trash bin. However little remnants of files and data are left on your hard drive which is taken care of by AppCleaner. Next time you want to uninstall an app just drop it into AppCleaner which will not only throw away the app package, but any preference or configuration files associated with it.