my (front-end) developer "life-hacks"

Rien's "life-hacks"

I was going to start this post with "these are some things I use to boost my productivity" but at the end of the day, these are just some small workflow improvements that I'm using but won't make me any more productive on a slow-brain-day.
In no particular order, here are some apps and tools that I use in my day to day workflow.

Magnet App

window management with shortcuts for mac

Magnet adds window management to Mac Os (I'm told windows has a feature like this). As a front-end developer I like to have my code editor and browser side by side on my screen, this works nicely with a wide screen. You can drag a window to the side of your screen to resize it to half the size of your screen, to a corner to resize to a quarter of the screen. Make sure to get used to the shortcuts for fast organizing. (eg. cmd + shift + ⬅️ fills the left half of your screen with the current window)

Alfred App

spotlight replacement app

Alfred replaces my spotlight search bar. Having it under cmd + space makes it quickly available. I use it to open apps, find files, open a google search or maps directions, quick calculations, etc. It's quite smart in showing you what you're looking for. It's a powerful app but I only use a few features:

1. Opening apps
   Just open alfred and type the name of your app

   

2. Searching for files
   Open alfred and start typing "find" until you see an option "reveal in finder" using tab or enter will auto-complete, then type the name of your file.

   

3. Web searches
   one of the alfred features is the web search feature, it allows you to pick what site you want to be searching on by prefixing your search with a command. For example to search youtube, you can type "youtube funny cat video".

   

4. Custom web searching
   You can also add custom web searches on your favorite sites (eg. documentation). The ones I use most often are one for https://caniuse.com/ to quickly check if I can use the latest fancy css property and the mdn docs to lookup specs.

   

Clocker

timezones!

Clocker does one simple thing, it allows you to add clocks from different timezones to your menu bar. Between working in a remote team, having in-laws living in Thailand and friends in Australia, there's a lot of time. It's nice to be able to see the time in those places with just a quick glance.

MonitorControl

brightness control

MonitorControl Allows you to quickly control brightness, contrast, and volume of most computer monitors. It also let you use the apple keyboard buttons to do so on the currently active monitor

Kap

screencaptures on steroids

Kap is an app with a button in the menubar that allows you to make screen recordings. It's an open-source project with a plugin api with a bunch of cool plugins available. These include uploading functionality to different platforms, adding your face (from a webcam) to a recording, showing keypresses or hiding notifications while recording. As a front-end developer I use Kap mostly to record short clips of parts of the app we are working on, export them as a gif and share them on slack, to ask for feedback or show off something cool I did.

TripMode

take control of your data usage

Tripmode is yet another app controled from the menu bar. It allows you to enable/disable internet access for specific apps. This can come in handy on your typical "workcation" when internet can be slow or expensive (for example when using your phone's internet connection) and you only want the crucial apps to be using your precious mbps'es. while running, it also keeps track of how much data each app is using.

keybinds

Some of the keybinds I use most often. These are mac shortcuts, but in most cases replacing cmd with ctrl should do the trick.

• vscode (most developers will know most of these already)
  • cmd + p / cmd + shift + p I guess everyone knows these...
  • cmd + b to open/close the sidebar
  • cmd + shift + e opens the sidebar explorer (filelist) view
  • cmd + alt + t to close all tabs except the one that's currently open
  • cmd + j to show/hide the bottom panel (mostly terminal in my case)
• Slack
  • cmd + k Opens the search dialog to quickly change channels
• Brave (chrome)
  • cmd + shift + t reopen the last closed tab