Cristian Guerra
Back to blog

My Web Development Toolbox

This is a collection of tools that I've been using daily for years. (I always try to buy my own software, even before I started working remotely). I use a 27" iMac.

Alfred

This is my #1 app, I can literally do anything I want with it. I even created my own workflow. It's super flexible, I can write bash scripts for anything, drag and drop stuff to create personalized actions. I'm definitely gonna write a whole post about it later.

Text editors:

  • VSCode
  • Vim
  • Poedit (Translations)
  • Numi

Terminals:

  • iTerm2
  • Termius
  • VSCode

Browsers:

  • Firefox Developer Edition: Main browser.
  • Vivaldi: When I have to use Chromium plus their tab management is amazing. Chrome developer tools are great, don't get me wrong.
  • Safari
  • Chrome: I mostly use it headless or just for regular testing.
  • IE/Edge (Through VirtualBox)

Snippets/Documentation:

  • SnippetsLab
  • Dash

Design:

  • Sketch
  • Pixelmator
  • IconJar (Icon management)

Version Control:

  • SourceTree
  • Kaleidoscope: Pretty useful when comparing directories when full CI/CD integration is not available.
  • Github

Testing:

  • Integrity Plus (Link checker)
  • Lighthouse, Koa11y (Through Chrome - headless)

Local Development:

  • Docker
  • Kitematic (For Docker containers)
  • Postman (APIs)
  • Local by Flywheel (Being replaced by Docker)
  • Gas Mask (Host file management)
  • Sequel Pro

  • BrowserSync: I wrote this small bash function, It "auto reloads" your browser when doing changes. (I'll write a whole post about my dot files later). I mostly use it for old projects or when I just want to test something out super quick: 

    # Browser-sync
watch() {
# If argument is empty
if [ -z "$1" ]
    then
    # Run browser-sync on current directory (html)
    browser-sync start --directory --server --files "**/*.js, **/*.html, **/*.css" --logLevel "silent"
else
    # If argument is present, use it as a proxy value and run on current directory (php)
    browser-sync start --proxy $1 --directory --files "**/*.js, **/*.php, **/*.html, **/*.css" --logLevel "silent"
fi
}

    and you use it in your current project directory. If it's just plain html/js/css, just type: watch if it's a php site with a local server enabled, type watch https://your_local_url.

Password management

  • 1Password

Bookmark management

Documentation

Other apps

  • Jumpshare (Share screenshots, videos, etc)
  • Dropbox (Sync settings between computers)
  • Wunderlist
  • Gif Brewery
  • Spotify

I'm in the process of automating all this setup. More Coming soon.