mucahid.dev

Environment Setup on Windows/Mac for IT People

Environment Setup on Windows/Mac for IT People

Mucahid Yazar's photo
Mucahid Yazar
·

8 min read

In this article, I will share the common environment setup with you. You can be a frontend developer, a backend developer, QA engineer, or a product manager. I will share the common requirements for any IT person. We will go forward step by step. Let’s say you get a new computer from your company. And you need to make your computer ready. Then follow the following steps and install the programs. Also, I will add a signature to show you which program I installed and I am using.

1. (MAC) homebrew (Package Manager) 🐞

  • Open its website and follow the instructions and install it in the correct way.

[Homebrew
The Missing Package Manager for macOS (or Linux).brew.sh](https://brew.sh/ "brew.sh")

  • (Optional) You can install some packages like the one below. Even if you are a UX/UI designer you may also need to use git at some point. So you should decide on it.

brew install tree 🐞 (It allows you to view all files in a tree view)
brew install node 🐞
brew install git 🐞
brew install graphql-playground
brew install ruby
brew install python
brew install kotlin
brew install postgresql
brew tap heroku/brew && brew install heroku

1.1. GIT

After you install git like above with brew. You should set your defaultBranch, name, and email below.

git config --global init.defaultBranch main
git config --global user.name "Mucahid Yazar"
git config --global user.email mucahidyazar@gmail.com

And generate an ssh key and add it to your GitHub account by using the instructions on Github documentation.

https://docs.github.com/en/authentication/connecting-to-github-with-ssh

2. (MAC/Windows) Browser Installation, Settings, and Extension

  • Everyone needs to use a browser even if it is a very old computer. So choose yours and use it. I prefer you to use Brave or Chrome.
    - Brave, 🐞
    - Google Chrome, 🐞
    - Firefox,
    - Opera,
    - Tor Browser
  • Add a home button to your browser and open the most opened website by you. 🐞
  • And set your browser to open “Latest closed websites” after you open your browser again. 🐞
  • Log in to your Google Account and sync your browser with your browser. 🐞
  • Some of the extensions. that I am using.
    - Adguard 🐞 / Adblock,
    - Apollo Client Developer Tools,
    - JSON Viewer, 🐞
    - Momentum,
    - React Developer Tools, 🐞
    - Redux DevTools, 🐞
    - Wappalyzer, 🐞
    - daily.dev, 🐞
    - Colorzilla, 🐞
    - Whatfont,
    - Testing Playground, 🐞
    - Vue Devtools,
    - Lighthouse, 🐞
    - Grammarly, 🐞
    - Remembery 🐞

3. (MAC/Windows) Crone (Calendar App) 🐞

[Cron | Early access
Cron is the next-generation calendar for professionals and teams. Look at the blessing that arrived in my inbox this…cron.com](https://cron.com/ "cron.com")

  • This is the coolest calendar app that I have seen so far. Even you can install it on your windows computer. I think you need to give it a try. :)

4. (MAC/Windows) Slack (Communication App) 🐞

[Slack is where the future works
Slack is better together (no, really, it's a bit underwhelming by yourself), and it's easy to invite your team. Run a…slack.com](https://slack.com/ "slack.com")

  • Install Slack to communicate with your team.

5. (MAC/Windows) Terminal

5.1. Warp 🐞

[Warp: The terminal for the 21st century
Warp is a fully native, GPU-accelerated, Rust-based terminal. No Electron or web-tech. 60fps on 4K screens. Along the…warp.dev](https://www.warp.dev/ "warp.dev")

  • I am using warp for a few months and it is really awesome in one word. It has a beautiful UI and it is easy to use. If you won’t use warp you will use iTerm. But that way, you should install some more extensions to improve your terminal experience.

5.2. iTerm2

[iTerm2 - macOS Terminal Replacement
iTerm2 is a replacement for Terminal and the successor to iTermiterm2.com](https://iterm2.com/ "iterm2.com")

  • Or as I said above you can install iTerm2.

5.2.1. Terminal Helper Tools (Optional)

If you will use iTerm instead of Wrap, you can/should one of these extensions.

5.2.1.1. fig.io

[Fig
Autocomplete for your terminal.fig.io](https://fig.io/ "fig.io")

5.2.1.2. oh-my-zsh

https://ohmyz.sh/

- zsh-autosuggestions
- zsh-syntax-highlighting

6. (MAC/Windows) Music App

  • Some alternatives
    - Spotify 🐞
    - Youtube Music
    - Apple Music

[Listening is everything
Spotify is all the music you'll ever need.spotify.com](https://www.spotify.com/ "spotify.com")

7. (MAC/Windows) Notion 🐞

[Notion - One workspace. Every team.
We're more than a doc. Or a table. Customize Notion to work the way you do.notion.so](https://www.notion.so/ "notion.so")

  • This is the best note app I have ever seen today. You can create everything with Notion. Even a website. :)

8. (MAC/Windows) Design (UI/UX) App

[Figma: the collaborative interface design tool.
Figma connects everyone in the design process so teams can deliver better products, faster. Try Figma for free Join…figma.com](https://www.figma.com/ "figma.com")

  • There are some alternatives. But I think Figma is going to moon for a couple of years. So my favorite one is that. And I will put some of the alternatives.
    - Figma 🐞
    - Sketch (Just for MAC)
    - Adobe XD
    - Zeplin
    - Photoshop

9. (MAC/Windows) 2FA (UI/UX) App

[Authy | Two-factor Authentication (2FA) App & Guides
Defeat cyber criminals & avoid account takeovers with stronger security, for free! Watch the video below to learn more…authy.com](https://authy.com/ "authy.com")

  • Most applications force us to set up a 2FA process to provide our safety. So we should use a 2fa application. You should install this 2FA application on one more device for me. The most popular one is Authy. But I will also put some of them below.
    - Authy 🐞
    - Google Authenticator

10. (MAC/Windows) File Management App

There are a few alternatives. But it depends on your case. If you have a Macbook you should use iCloud. I would not you to use the other ones. But if you use Windows or Linux you can choose one of the other ones.

  • iCloud 🐞
  • Google Drive
  • One Drive

11. (MAC/Windows) Developer Apps

- Docker 🐞
- Postman 🐞
- MongoDB Compass 🐞
- Visual Studio Code 🐞
- Android Studio 🐞
- (MAC) Xcode 🐞

12. (MAC/Windows) MongoDB Community & MongoDB Compass (Optional) 🐞

1. Follow these instructions

https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/

2. Download and install MongoDB Compass https://www.mongodb.com/try/download/compass

Use the command brew list to see all installed packages

13. (MAC/Windows) VSCode & Settings 🐞

I am currently using SynthWave ’84 as a theme of VSCode.

13.1. Typeface

Code Editor Font: Dank Mono 🐞
Terminal Font: FuraMono Nerd Font 🐞

[JetBrains Mono: A free and open-source typeface for developers
Consider this in contrast to some other fonts. Consolas, for example, has slightly wider letters. However, they are…jetbrains.com](https://www.jetbrains.com/lp/mono/ "jetbrains.com/lp/mono")

[MonoLisa
As software developers, we always strive for better tools but rarely consider font as such. Yet we spend most of our…monolisa.dev](https://www.monolisa.dev/ "monolisa.dev")

[Dank Mono: The coding typeface for aesthetes
A typeface designed for coding aesthetes with modern displays in mind. Delightful ligatures and an italic variant and…philpl.gumroad.com](https://philpl.gumroad.com/l/dank-mono?ref=producthunt "philpl.gumroad.com/l/dank-mono?ref=producth..")

[tonsky/FiraCode
Programmers use a lot of symbols, often encoded with several characters. For the human brain, sequences like ->, <= or…github.com](https://github.com/tonsky/FiraCode "github.com/tonsky/FiraCode")

13.2. Visual Studio Code 🐞

If you install VSCode the first time, make a clean installation with my following instructions. Then install “Settings Sync” and save your settings to the Cloud. In this way, you would get and keep a backup save on the cloud and when you install VSCode again you will get all of your settings, and shortcuts with just one click.

# The shortcuts of Settings Sync
# Upload
SHIFT + OPTION + U
# Download
SHIFT + OPTION + D

13.2.1. Extensions (Optionals) 🐞

You should install the packages that you need.

code --install-extension auto-close-tag

code --install-extension auto-rename-tag

code --install-extension beautify

code --install-extension better-comments

code --install-extension code-settings-sync

code --install-extension color-highlight

code --install-extension copilot

code --install-extension cypress-snippets

code --install-extension dotenv

code --install-extension es7-react-js-snippets

code --install-extension fig

code --install-extension gitlens

code --install-extension glance

code --install-extension grammarly

code --install-extension html-snippets

code --install-extension JavaScriptSnippets

code --install-extension jest-snippets

code --install-extension jestRunIt

code --install-extension jquerysnippets

code --install-extension LiveServer

code --install-extension markdown-all-in-one

code --install-extension markdown-preview-enhanced

code --install-extension material-icon-theme

code --install-extension mdx

code --install-extension moonlight

code --install-extension night-owl

code --install-extension path-intellisense

code --install-extension polacode

code --install-extension prettier-vscode

code --install-extension prisma

code --install-extension quicktype

code --install-extension quokka-vscode

code --install-extension react-native-react-redux

code --install-extension remote-containers

code --install-extension remote-wsl

code --install-extension solidity

code --install-extension spellright

code --install-extension sqlite-viewer

code --install-extension styled-components-snippets

code --install-extension swift

code --install-extension synthwave-vscode

code --install-extension vscode-commitizen

code --install-extension vscode-docker

code --install-extension vscode-eslint

code --install-extension vscode-github-actions

code --install-extension vscode-graphql

code --install-extension vscode-html-css

code --install-extension vscode-import-cost

code --install-extension vscode-jest

code --install-extension vscode-kubernetes-tools

code --install-extension vscode-react-native

code --install-extension vscode-sqlite

code --install-extension vscode-styled-components

code --install-extension vscode-tailwindcss

code --install-extension vscode-todo-highlight

code --install-extension vscode-typescript-next

code --install-extension vscode-versionlens

code --install-extension vscode-yaml

code --install-extension vscodeintellicode

14. (MAC/Windows) NPM Packages Globally (Optional)

npm i -g yarn 🐞
npm i -g babel-cli
npm i -g eslint
npm i -g expo-cli
npm i -g firebase-tools
npm i -g gatsby-cli
npm i -g jest
npm i -g lighthouse
npm i -g netlify-cli
npm i -g newman
npm i -g node-sass
npm i -g parcel-bundler
npm i -g pm2
npm i -g prettier
npm i -g serve
npm i -g spaceship-prompt
npm i -g surge
npm i -g typescript
npm i -g update
npm i -g vercel

Use the command npm list -g --depth 0 to see all installed packages

15. (MAC/Windows) PIP Packages (Optional)

Use the command pip or pip3 to install depending on your system.

pip3 install astroid
pip3 install autopep8
pip3 install certifi
pip3 install chardet2
pip3 install click
pip3 install Flask
pip3 install Flask-Cors
pip3 install harperdb
pip3 install idna
pip3 install isort
pip3 install itsdangerous
pip3 install Jinja
pip3 install lazy-object-proxy
pip3 install MarkupSafe
pip3 install mccabe
pip3 install psycopg2
pip3 install psycopg2-binary
pip3 install pycodestyle
pip3 install pylint
pip3 install python-dotenv
pip3 install requests
pip3 install setuptools
pip3 install six
pip3 install toml
pip3 install urllib3
pip3 install Werkzeug
pip3 install wrapt

Use the command pip3 list or pip list to see all installed packages

16. (MAC) Emojis 🐞

[Rocket - the best emoji app for Mac
The fastest, smoothest Slack-style emoji picker for your Mac Access to every emoji through the shortcut window Pick…matthewpalmer.net](https://matthewpalmer.net/rocket/ "matthewpalmer.net/rocket")

And also if you are using a MAC, I absolutely prefer you to look at my Macbook hint article. I am crazy sure you will find some useful things for yourself.

[27 Macbook Tips & Tricks in 2022
This week I bought a Macbook Pro 16". So I just wanted to set and use my Macbook more efficiently. Before the Macbook I…mucahidyazar.medium.com](https://mucahidyazar.medium.com/21-macbook-tips-tricks-in-2022-98072c53366a "mucahidyazar.medium.com/21-macbook-tips-tri..")

See you at the next one. 👋