My Minimal Web Development Setup
Tags: webdev, productivity, javascript
Published: 2022-08-08 06:25:00

This is the setup I use daily to get things done as a full-stack web developer. I love knowing about tools other people are using and here I'm sharing my exact set up so it can give inspiration to others. I will try to keep this guide updated.

### Laptop and OS

My main computer at the time of writing is an early 2020 Macbook pro (not M1) I'm really happy with the laptop but chances are I would upgrade to M2 MacBook air when it comes out 🤞. I use mac os but I don't think there is anything that makes it any better than windows 11 or Linux in general, I used to use windows in the past and the only reason I'm using macOS is that I can test and debug websites on safari if I ever need to.

![mac os](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvxvaq9lpjx44yh0057z.jpg)

## Apps

### Spotlight

I use macOS's Spotlight to open apps, find files, and just get around the OS. I rarely ever use Launchpad to open apps.

![Spotlight image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgrbqkbhs5xgnrqzovwz.png)

### Firefox

I use [Firefox](https://www.mozilla.org/en-GB/firefox/new/) as my default browser. I find chrome's design a bit too rounded and I don't use safari because I don't think it's good for me to get locked in apple's ecosystem.

I use very few extensions. uBlockOirgin, Bitwarden, React Devtools and Grammarly are the only extension I have installed.

![firefox-image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658648182036/KA9HY9XBZ.png)

### Visual Studio Code

I have tried many editors in the past, I have tried Sublime Text, VIM, Webstorm, and everything in-between but VS Code feels the one with the best defaults and most active development. I don't use (n)vim because of its configuration-heavy nature. I have written another post about [my exact setup in visual studio code and with all the plugins I use](https://dev.to/itsjzt/my-vs-code-setup-for-2022-3klp). bottom line I'm pretty happy with vs code and I don't think I will be changing editors anytime soon.

![vs-code-image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658648157337/NTe9KEwnv.png)

### Bitwarden

[Bitwarden](https://bitwarden.com/) is my password manager of choice. I'm still on the free plan and I don't have any complaints. I don't like the UI that much but on the functionality side of things it's good enough, It gives everything you might need from your password managers even in the free plan.

### Obsidian

I use [Obsidian](https://obsidian.md/) for taking notes and writing posts. I have tried Notion, and Evernote in the past. Evernote feels kind of bloated and tailored for more advanced use cases and Notion is more tailored for teams and people who need very customized workflows, I just need a Markdown-based editor and cloud syncing. I have also tried Simplenote it was really good but there were two problems (1) it didn't support uploading images (2) It doesn't support folders so everything was flat and very hard to find.

![obsidian-image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658647666405/Ii11eVDC7.png)

### Insomnia

[Insomnia](https://insomnia.rest/) is a testing tool for graphql and REST APIs. I use it for testing our backend and sometimes external 3rd party APIs

### Xcode

I recently tried swift UI and it looks super cool. The UI layer is inspired by React and its cross-platform atleast in the Apple ecosystem.

### Postbird

[Postbird](https://www.electronjs.org/apps/postbird) is a GUI for Postgres database nothing special I use it for creating new users/databases and sometimes connecting to a remote database.

### Slack

Our company uses slack for communication not much to talk about it, I don't use any custom themes or anything just have a few custom icons installed.

![slack-custom-emoji.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658647553887/A-blGi1YJ.png)

### Homebrew

Every other operating system comes with a preinstalled package manager (even windows 11 has [winget](https://docs.microsoft.com/en-us/windows/package-manager/winget/)) but you have to use this third-party service on macOS. It works well but I wish mac had something native for this.

### NVM

[Node Version Manager or NVM](https://github.com/nvm-sh/nvm) helps you to use different versions of Node for different projects I don't work on projects that require a very specific version of node but it makes updating node easier so I have it installed.

### Default Mac Terminal

I use the default macOS terminal. I never found a use case for iTerm so I stick to the native terminal. I have increased the font size to 14 and that's all the customization I have done to my terminal.

![terminal-image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658647526689/AINeyuPlg.png)

### Excalidraw and Figma

I use this to make flow charts and rough design sketches. Excalidraw is good for doing whiteboard-like problem-solving.

And sometimes when I need to create a UI mockup, I use Figma for that.

![excildraw-image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658647407356/s242PPifB.png)

## Conclusion

I have tried to keep my setup minimal I feel once you start customizing things you just spend a lot of time on a never-ending quest for the perfect setup and end up spending more time in setup than what it would save you. You should watch [this video by mpj](https://www.youtube.com/watch?v=dIjKJjzRX_E) for some context.

*Originally posted on [itsjzt.com](https://itsjzt.com/posts/my-minimal-web-development-setup)*