My frontend workspace on Mac

Just today I’ve received a kind email from a colleague to engage my first front end freelance project. I didn’t expected it today but I knew it was hardly impossible not to get to this point as we know the market is requesting more and more front end engineers and the available heroes are running low.

I could have tried to work on this project with my company laptop but I think it’s better to keep things separated and that’s the reason I faced the challenge to setup my environment from scratch on my domestic machine. Nothing super fancy or advanced but just the way I work or what applications make my work easier. Here we go.

From scratch

First of all I realized that I hadn’t touch the terminal on my domestic computer. It was like new, no .bash lines on the file either. So first thing here was installing iTerm2 to replace the default terminal application on Mac. This comes with a lot of improvements I don’t know and I don’t use (yet) but with one huge advantage for me as I can split vertically one single window in two so I can take a look at the same time at the hot deploy and the watchers on the script I’m usually working with and an extra tab for git commands. I like the solarized dark high contrast theme.

workspace_001After that I change the bash itself to oh-my-zsh. Yesterday I just found out that just zsh is the bash replacer but oh-my-zsh is a framework with a lot of features out of the box. My favorites are color in the terminal and autocompletion for command history and for file browsing. I just can’t live without it.

I leave it like a is except the theme which I change to eastwood. Maybe it’s not the overall best but I’ve get used to it and now it’s the default look and feel of my terminal application.

Now that terminal is good to go, I’d like to install brew.  So useful I can’t start explaining how much you need this if you aren’t already working with it. It makes everything so easy to install, a lot like ruby gems or npm.

And after that, just to being able to start to do something I downloaded the repository for my coaching from GitHub which required me to create and install the ssh keys. Super easy.


For that I use a local folder «Projects» and inside used git clone and the SSH clone url you can find on the right of every GitHub repository.

Next step for me is to install the IDE which changes every now and then. I use phpStorm/webStorm at work but at home I would prefer to go to a community free software like Atom powered by the GitHub people and which the experts says that will left Sublime Text far behind in the upcoming versions. Let’s give it a try as it looks gorgeous.


As this first project doesn’t requiere too much backend stuff I will skip the ruby env stuff which although I think I completely understand always drives me crazy.

What I will do after leaving all this set as complete is following John Papa steps not to use sudo in order to install npm packages. Using sudo is something that I believe it’s quite dangerous as you could be changing permissions or erasing files with super user permissions so I like to keep it safe and this is the best method I’ve found.

For the last step, instead of:

Use :

Desktop applications

  • Skitch: from the Evernote group for creating easy to understand pictures when trying to point some flaws on the design.
  • Snappy App: to take screenshots and keep them on screen on top of all other apps (super handy for specs or code comparisons).
  • Spectacle: to easily resize an position windows to fit the desktop needs.
  • Dropbox: of course for file sharing and last resort backup storage.
  • Photoshop: for pixel measurement when looking for pixel perfect implementations but I’m looking forward to switch to Pixelmator as my needs are fully covered by it and the price is way lower.
  • Todoist and Evernote: for tasks and notes.
  • f-lux: to take care of my eyes when it’s getting dark or winter is coming.

Browser extensions

  • Web developer: for easily changing the browser setup for testing pages (mainly a quick way to disable javascript).
  • Measure it and Page Ruler: for quick measurement on the browser.
  • Emmet Re: for having at one sight all the breakpoint layouts (this requires that the breakpoints are not messed up).
  • Pocket: because I don’t want to loose neither interesting posts or my time.

Final things

  • I prefer Chrome over Firefox because of the dev tools.
  • I tend to work a lot on console so no SourceTree or similar git ux apps.
  • I really like to work with my laptop and an external monitor. On the laptop screen I put terminal and specifications designs (pdf) and on the big screen I use a configuration of several virtual desktops:
    1. Browser: Chrome
    2. IDE: PhpStorm / Atom
    3. Todoist and Mail applications (screen vertically split in two)
    4. Slack and Skype (screen vertically split in two)
    5. Calendar / Spotify (screen vertically split in two)
    6. Photoshop
  • I abuse the favorite bar and I should stop doing it…
  • I use a lot the built in screen capture feature:
    • cmd + shift + 2: snappy app
    • cmd + shift + 3: full screen capture
    • cmd + shift + 4: custom selection capture
    • cmd + shift + 5: skitch custom selection capture
    • cmd + shift + 6: skitch full screen capture

And this works like a charm for me =)

Un comentario en “My frontend workspace on Mac”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *